EE Gallery - Alternative Template

published on Mar 12th, 2008 // 41 Comments

 
EE Gallery - Alternative Template
 

A method for adding a category image to the Gallery Module. Includes the alternative layout templates used in Gallery example.

UPDATES

  • 07/10/08 – Album Thumbnails and Pagination solution from Birdie
  • 4/07/08 – Corrected Next & Previous Links in templates
  • 12/03/08 – I spent some time updating the templates and the overall look. Everything is now neater and there are a load of things to be learnt by having a read through the template code and CSS. Special thanks to Robin for help with eliminating query soup.

The live version

Take a look at what we will be building first here

Introduction

To start this tutorial first we have to go through our little scenario.

  • We would like a website with a gallery page
  • There will be one or more albums displayed on the gallery page
  • Each album on the gallery page will display a title, an image, a description and an image count
  • When you click on an album you will go to the full image page
  • On this full image page you will have thumbnails from this album with the first full image displayed
  • When you click a thumbnail it will reload the page with that thumbnail’s full image

Now to get our terms right

  • We will treat our gallery page as one Expression Engine Gallery
  • An Album is an Expression Engine Category
  • An Album Description is an Expression Engine Category Description
  • Our Album Image is Expression Engine’s Gallery Medium Sized Image

Images

Expression Engine Gallery makes 3 images

  • Thumbnail image will be our album page thumbnails
  • Medium image will be our album image
  • Full image will be our …well, our full image!

Ok lets start

  • Open up the Gallery module and create a gallery if you haven’t done so already
  • In your preferences set your thumbnail and medium sized image proportions. (remember medium is your category image size)
  • Call Custom Field One Album Image
  • Choose Text Formatting as ‘none
  • Choose type as ‘dropdown
  • Add 2 options
  • Type ‘no‘ as first then on new line type ‘yes
  • Save preferences
  • Create your categories and upload images to them.
  • Add category descriptions if you want
  • To select an album image find the entry you would like in the your chosen category and change the new field you just created to ‘yes

Templates

This is a 2 page gallery so the default templates we will be editing are the index template and the category template.
Lets edit the index template first.

  • Download the following text file and and update your index template with it – gallery_index.txt
  • There are a few things here to change. I made it all very easy and assigned variables for you to update in the header of the template
  • Next download the next text file and update your category template with it – gallery_category.txt
  • Again update the variables in the top of this template

And as a bonus here’s the CSS also – gallery_css.txt

That’s all there is too it.

 

41 Comments

Djive says:

Great tutorial smile man, just on right time…

gravatar icon
 

michael says:

thanks, very nice.

gravatar icon
 

abismal says:

I love your ee tuts. thanks a lot!

gravatar icon
 

mkey says:

I love the demo, and I am trying to use this template for my EE gallery, but it’s not working right… I get {/exp:query} instead of the album image.

I’m sure I followed all steps, and I repeated the tutorial several times, what can I be doing that’s wrong? Do I need something other than EE to use this template? Like plugins or something?

gravatar icon
 

Editor says:

Do you want to email me a link to your gallery and I will have a look. All you need is Expression Engine to use this tutorial. Although EE Core does not include the Query Module. Might this be your problem?

gravatar icon
 

mkey says:

Short Comment: Problem solved. Long Comment: I just started my gallery all over again, it was annoying since I did so much with it, but.. for some reason, now everything works fine, just a few CSS things I need to fix. That’s good news, but now I’ll never know what caused the problem.. how odd.

But again, thanks for these templates. They’re really great. One question though, have you tried using them when your photo gallery has photos of different sizes? Does it work all right?

gravatar icon
 

Cecil says:

I’m having the same trouble. I’ve tried rebuilding from scratch several times, but to no avail. I’‘ve got the full version of EE installled so the query module isn’t the issue.

gravatar icon
 

Editor says:

Cecil, do you want to email me a link to your gallery and I will have a look?

gravatar icon
 

Catherine Walker says:

Hi I’m just trying to set up the image gallery following your tutorial and it is mostly working. (I have Slideshow Pro and was going to install it next but I figured I would try the template first.)

I have left my current gallery intact until I can get this working so I am trying to install the new one here:

www.walkerstrails.com/index.php/eegallery

Now I have 2 problems I know it must be something I have not changed or set up right but the album images are not coming up.

The links work fine and sets up the images in that category just fine except the navigation thumbs only have a handful, so people can only see a few images in any of the categories.

um, help?

gravatar icon
 

Catherine Walker says:

er, don’t worry about the first problem, I’m an idiot, on the other hand I’m an idiot who worked it out, just have to do something about the spacing.

Still have the second problem though

gravatar icon
 

Editor says:

Catherine, if you add a limit=“500” into the {exp:gallery:entries} tag that should probably solve your problem. As a second option you could add pagination links after the thumbs, but if I remember rightly I came across a problem using pagination. Not sure what it was now sorry smile

gravatar icon
 

Catherine Walker says:

Thanks so much you are right that did work (the limit=“500” one), now all I have to do is figure out how to get it to fit into my current page design, yes I know it is in the CSS but I do not want to loose the formatting for the images etc. Then if I can get that working I’ll tackle the Slideshow part.

Thanks once more your tutorials are very helpful to those of us who really are not all that technically minded…. even if it did take me a few days to work it out!

gravatar icon
 

Editor says:

Catherine, glad it worked for you. Good luck with the layout. If you want any help with the CSS try posting in the 5piece’s Forums.

gravatar icon
 

Frank says:

I think that I have come across the problem you mention earlier with Pagination, when I select page two thumbs and click, the medium image, the image is selected ok but the thumbs revert to page one, this happens for any page. Any idea to get round this otherwise you are stuck with one page of thumbs. Thanks

gravatar icon
 

Matthew Crist says:

First, thank-you for this tutorial. It was a great help.

Second, can you tell me if it is possible to do next and previous links with this template? I have tried a couple different ways, and I can’t seem to get anything to work.

gravatar icon
 

Matthew Crist says:

My question was answered on the pMachine forums, over here.

gravatar icon
 

pdg72 says:

Love this layout. One question: on the index, how would I separate categories? I’d like to show categories 1-5 in one spot and categories 6-10 in another. If you could help me with how that code would look I would be very grateful.

gravatar icon
 

Richard says:

Thanks so much for this plugin; it’s been working well so far.

One thing I’ve always wondered about was this:

{exp:gallery:category_name}{category}{exp:gallery:category_name}

…why does this work? I mean, I thought it was a bug or typo at first, but of course the category names don’t get output unless it’s marked up this way.

gravatar icon
 

Bill says:

Hello,

Thanks for showing us how to add category images with the gallery. I would like to know how to have only thumbnails on the category page (see example below.). In other words, there would be a gallery page, a category page and the full-image page. Both the gallery page and the category page would have only thumbnails.

thank you

http://www.livingcolorgardencenter.net/html/webPhotoGalleries/plantsCSS/index.htm

gravatar icon
 

Editor says:

Bill, take a look at this reply http://expressionengine.com/forums/viewthread/72104/

gravatar icon
 

Bill Lindley says:

Thanks John

This worked perfectly.

gravatar icon
 

CTAC says:

John Henry! Thank You very much for your example.

gravatar icon
 

CTAC says:

I see a mistake with Prev|Next entry

We need to use next code {exp:gallery:prev_entry gallery="{gallery_name}"} <a href="http://{path=">Previous entry</a> {/exp:gallery:prev_entry}&nbsp;&nbsp;|&nbsp;&nbsp; {exp:gallery:next_entry gallery="{gallery_name}"} <a href="http://{path=">Next entry</a> {/exp:gallery:next_entry}

gravatar icon
 

giovanni says:

Hi – i had the gallery on our test site working, or so i thought, but today i noticed that the PREV and NEXT buttons no longer work as clicking on them causes one to go to a different gallery?? any one have a solution for this??

gravatar icon
 

Editor says:

Next and Previous links are now corrected in templates. Thanks for the heads up!

gravatar icon
 

Kevin says:

Hi John, thanks a million for posting this template – it works really well. I have whats probably a stupid question but I’ll ask anyway – is it possible to limit the results displayed by the sql query within the exp:gallery:categories tag? I’ve tried appending the typical LIMIT to the end of the query, but to no effect…

gravatar icon
 

Kevin says:

In case anyone is trying to do something similar, I found a solution on this thread – http://expressionengine.com/forums/viewthread/77293/ – using just the query and not the category tag. You also need to use an empty {paginate} call to trigger the limit.

cheers
Kevin

gravatar icon
 

Andrew A says:

Brilliant code for the photo gallery module.

However, one slight problem:

http://burtonphoto.sigma.titaninternet.co.uk/index.php/portfolio/index/

I can’t seem to stop the medium size images locking to the same height irrespective of whether they are portrait of landscape. I have looked on the EE forum and they mention about changing one of the core files so it locks the width rather than height but this doesn’t seem to have any effect.

Can anyone help?

gravatar icon
 

Andrew Areoff says:

I have set up your Expression Engine Gallery template at:

http://burtonphoto.sigma.titaninternet.co.uk/site/portfolio/category/88/13

Can you tell me what code determines how many thumbnails show per page since I cannot seem to get more than 9 to show on this page? I’ve looked through the code that runs the gallery but can’t see what might be preventing more than 9 thumbnails showing per page.

Any ideas?

gravatar icon
 

Editor says:

Andrew, add a limit parameter to the gallery entries tag and that should sort it.

gravatar icon
 

Steven Hambleton says:

If you can provide a way to relate a gallery to an entry that would be grand!

gravatar icon
 

Editor says:

There are 2 methods you could use the Gallery Category Extension by Robin or Masuga’s Simple Relation Extension, but it looks like you have explored these options already

gravatar icon
 

Andrew Areoff says:

Thanks for that info. I found a note about the limit parameter and this works fine.

However, I’ve noticed that underneath the large image the previous and next links don’t seem to display the next image in the portfolio but seems to display images out of sequence.

Any idea why this might be?

gravatar icon
 

birdie says:

Howiya Vinny,

Thanks for this, i’ve used it to create a lightbox gallery with the album image stationary on the page along with a description and thumbs – it’s worked out really well. Can’t show you in public because it’s a member site but drop me a mail if you’re curious.

I have hit one problem though – I have 5 separate galleries on the site and need to create an ‘index’ page to list the latest gallery from each one, then the user clicks through to the full gallery. I can’t seem to get a limit working on the query to just show the last gallery & it’s Album Image though, any ideas?

Don’t want to break your comments by pasting code in, but I thought this would work: exp:query limit=“1” sql=“SELECT

Cheers, Cormac

gravatar icon
 

steve says:

Great tutorial, I love the way this works. I’m new to EE and this is very close to what I need for my first project. I’ve worked through the tutorial and everything except the album images works.

This is the link to my gallery http://www.vwcamperexpert.co.uk/index.php/vehicle_gallery/index/

You will see the album images don’t display. I realise the problem is likely a simple path issue but can’t put my finger on it.

I’ve set the variables at the top of your index template to the following:

{assign_variable:gallery_name=“vehicles_for_sale”}
{assign_variable:gallery_template=“vehicle_gallery”}
{assign_variable:gallery_folder=“gallery”}
{assign_variable:gallery_id=“1”}
{assign_variable:site_url=“http://www.vwcamperexpert.co.uk”}

Any ideas what I’m doing wrong? Any help would be greatly appreciated.
Thanks,
Steve

gravatar icon
 

Dovla says:

Hello there, I really love this gallery template but there was one issue I had problems with…it doesn’t validate. And it wasn’t a really big issue but I’m sure there are a lot of people out there who want to have a valid gallery. There was actually only one problem with the code and I managed to fix it by googling around. The issue is the drop down menu forum for categories, it's code is: &lt;form name="catmenus" action=""&gt; &lt;select name="selcat"&gt; &lt;option value=""&gt;Choose another album&lt;/option&gt; and since XHTML strict does not allow the name attribute you have to use ids…the valid code for this is as follows: &lt;form id="catmenus" action=""&gt; &lt;select id="selcat"&gt; &lt;option value=""&gt;Choose another album&lt;/option&gt; I suggest that you update your original template…

cheers and thanks for the gallery!

gravatar icon
 

Dovla says:

argh, seems the comment form didn’t parse some of the stuff I wrote in…so anyway here it is again:

instead of
form name=“catmenus”
select name=“selcat”

use
form id=“catmenus”
select id=“selcat”

and instead of
onchange=“location=document.catmenus.selcat.options[document.catmenus.selcat.selectedIndex].value;”

use
onchange=“location=this.options[this.selectedIndex].value”

and now you have a valid xhtml strict gallery smile

gravatar icon
 

Brian says:

http://www.loretoabbeydalkey.com/index.php/photogallery

Any ideas what I might be doing wrong here wound be greatly appreciated. It seems to be repeating the category based on the number of images that have been added. It should show only one category.

gravatar icon
 

Hitch says:

Hi:

I’m having similar problems to Steve, above; not only do the album images not display, but a) one album shows up twice, which is bizarre, and b) the links to the albums themselves don’t work. I think, like Steve, that’s it’s a path problem I’m struggling with, as I seem to get backwards with EE url’s. My url is: http://www.northofcarefree.com/index.php?/gallery/

I know my galleryname and gallerytemplate variables are correct, but I’m assuming that somehow, my path is wonky. The actual path is /northofcarefree.com/images/gallery/ with two sub-folders, one is blog_images and the other is reader submitted. Any thoughts that could help me? I’ve tried /gallery as the path name, /images/gallery and /images. I’m open to suggestions, thanks.

gravatar icon
 

Hitch says:

FWIW, I’ve learned that if your images folder and your images gallery are NOT the same word, then you need to edit this line in the categories template in order to be able to view the images:

@<div class=“catThumbs”> {site_url}/images/{gallery_name}/{cat_folder}/{filename}_medium.jpg

and change {gallery_name} to {gallery_folder} to get your images to display@

Hope that helps some fellow traveler. I struggle with EE naming/url conventions, so after wrestling with it in the Gallery in the first place, I actually found this pretty quickly. Not so sure why the template is displaying my first gallery twice, though….still looking for guidance there…

Hitch

gravatar icon
 

tiffany co says:

Not so sure why the template is displaying my first gallery twice, though¡­.still looking for guidance there¡­

Hitch

gravatar icon
 
 
Commenting is not available in this section entry.