collylogic.com - Simon Collison's weblog

EE Image Gallery template design

13th March 2005

Following a large number of requests, I have finally managed to get around to documenting how my ExpressionEngine image galleries (viewable here) are built. There is no brain surgery here, just sensible use of the existing EE tags, combined with some simple Javascript and CSS table-styling.

image

Owing to long code lines, you might wish to view this without the sidebar. 

Before you read on, I should point out that I kind of rushed these templates out, so they do contain a few non-semantic things like bold tags and break tags, although I have made sure that the table tags contain no styling information - that’s all wrapped up in the CSS. Oh, and I have forced quite a few lines of code to break to fit this page, so if you have any issues, check your spacing.

Also, note that my image paths are gallery/index, gallery/category and so on, so if you named your gallery templates differently, be sure to reflect this in your markup.

Declare your gallery

Firstly, declare the gallery variable at the very top of each gallery template. Setting this would mean that for another set of galleries, you could use a copy of these templates, and just adjust this variable for the new set. My gallery is called “main”:

{assign_variable:gallery_name="main"}
Expandy/collapsy wotsit

Next, add the following expand/collapse Javascript to the head of your gallery index template. This will allow you to show/hide the gallery stats table (useful if it starts getting long):

<script type="text/javascript">
function showHide(entryID, htmlObj, linkType) {
extTextDivID = (’extText’ + (entryID));
extLinkDivID = (’extLink’ + (entryID));
if (linkType == ‘close’)
{
document.getElementById(extTextDivID).style.display = “none”;
document.getElementById(extLinkDivID).style.display = “block”;
htmlObj.blur();
}
else
{
document.getElementById(extTextDivID).style.display = “block”;
document.getElementById(extLinkDivID).style.display = “none”;
htmlObj.blur();
}
}
</script>
Smart table use for gallery stats

Tabular data, folks. You give the table the “stats” id so that later you can apply CSS to create a single horizontal seperator under each row. Paste the following code into your main content area to create the collapse/expand gallery stats table:

{exp:gallery:categories gallery="{gallery_name}"}
<div id=’extLink1’ style="display: none; padding:0;"><a href="javascript:void(0);"
name="ext1" onclick="showHide(1,this,’open’);return false;” title="Click to show Photo
Set albums and stats">Click to display Photo Set stats table</a></div>
<div id="extText1" style="display: block; padding:0;"><a href="javascript:void(0);"
name="ext1" onclick="showHide(1,this,’close’);return false;” title="Hide these stats">
Photo Sets albums and stats [click to hide]</a>
<div class="photobox">
<table id="stats">
<tbody>
<th align="left">Album title</th>
<th align="left">Description</th>
<th align="left">Shots</th>
<th align="left">Views</th>
<th align="left">Latest</th>
{category_row}
{row_start}<tr class="even">{/row_start}
{row}
<td class="categories">{subcat_marker}<img src=’{cp_image_dir}cat_marker.gif’
border=’0’ title=’’ /> {/subcat_marker}<strong>
<a href="{category_path=gallery/category}">{category}</a></strong>
</td>
<td class="categories">{category_description}</td>
<td class="categories">{total_files}</td>
<td class="categories">{total_views}</td>
<td class="categories">{recent_entry_date format=’%d/%m/%y"}</td>
{/row}
{row_end}</tr>{/row_end}
{/category_row}
</tbody>
</table>
</div></div>
{/exp:gallery:categories}
Showing image thumbnails to order

For each strip of images, you’ll need a descriptive header box. Use this, or better why not use a hn tag instead of the nasty bold markup:

<div class="photobox">
<strong>Most recent shots</strong>
</div>

Then, for each strip of images, use the following, replacing the orderby parameter each time. I use ”entry_date“, ”random“ and ”most_views“ for my three rows. Note the ”thumb_image“ class which creates the frame around each thumbnail:

<div class="photobox">
{exp:gallery:entries gallery="{gallery_name}"
orderby="entry_date" columns="5" rows="1"}
<table>
{entries}
{row_start}<tr>{/row_start}
{row}
<td align="center">
<a href="{id_path=gallery/image_full}" onclick="window.open(this.href, ‘_blank’, ‘width=700,height=550,location=no,menubar=no,resizable=yes,scrollbars=yes’);
return false;” ><img src="{thumb_url}" class="thumb_image"
width="{thumb_width}" height="{thumb_height}" border="0"
title="{title} ({views})” /></a>
<br /><strong>{title}</strong>
</td>
{/row}
{row_blank}<td class="thumbs"> </td>{/row_blank}
{row_end}</tr>{/row_end}
{/entries}
</table>
{/exp:gallery:entries}
</div>
CSS makes the world go ‘round

All you need to do now is add the following CSS to your stylesheet:

.thumb_image {
border:1px solid #999;padding:3px;background:#E9E3E3;
}
table {
font-size:9px;
width:100%;
border:0;
}
td, th { padding: 0px; margin: 0px; }
#stats tbody tr.even td {
border-top:1px solid #CCC;
}
.photobox {
background:#FAF6F7;
border:1px solid #ddd;
padding:7px;
margin-bottom:7px;
font-size:11px;}
Sort out the category page

Next, you need to deal with the page that shows all the thumbnails from a selected category, usually something like the gallery/category template. Paste in the following code:

<div class="photobox">
<a href="http://www.colly.com/gallery/">Gallery Home</a>  <b>
›</b>  {exp:gallery:category_name}
<strong>{category}</strong>{/exp:gallery:category_name}
</div>
{exp:gallery:entries gallery="{gallery_name}" orderby="date"
sort="desc" columns="4" rows="5" paginate="both"}
<div class="photobox">
<table>
{entries}
{row_start}<tr>{/row_start}
{row}
<td class="thumbs" align="center">
<a href="{id_path=gallery/image_full}" onclick="window.open
(this.href, ‘_blank’, ‘width=700,height=550,location=no,menubar=no,
resizable=yes,scrollbars=yes’);return false;"><img src="{thumb_url}"
class="thumb_image" width="{thumb_width}" height="{thumb_height}"
border="0" title="{title} ({views})” /></a>
<br /><strong>{title}</strong>
</td>
{/row}
{row_blank}<td class="thumbs"> </td>{/row_blank}
{row_end}</tr>{/row_end}
{/entries}
</table>
</div>
{paginate}
<div class="photobox">
<span class="pagecount">Page {current_page} of {total_pages}
pages</span> {pagination_links}
</div>
{/paginate}
{/exp:gallery:entries}
</div>
Create the single image page

Finally, you need to render the gallery/image_full template, used to show the selected image and next/previous links. Just paste in the following code:

{exp:gallery:entries gallery="{gallery_name}" }
<div class="photobox">
<p>
{exp:gallery:next_entry gallery="{gallery_name}"}<b> </b>
<a href="http://www.colly.com/gallery/image_full/">Previous shot</a>
{/exp:gallery:next_entry} |
{exp:gallery:prev_entry gallery="{gallery_name}"}<a href=”
http://www.colly.com/gallery/image_full/">Next shot</a> <b> </b>
{/exp:gallery:prev_entry}
</p>
<p><img src="{image_url}" class="thumb_image" width="{width}"
height="{height}" border="0" title="{title}" /></p>
<p><strong>
{title}
</strong> (viewed {views} times) <br />{caption}</p>
</div>
</div>
{/exp:gallery:entries}
Job done

Hope all that made sense. If you don’t use EE, then I guess it didn’t. I’ll be developing these templates further in time for my May redesign, but for the time-being I hope this tutorial helps those who have emailed for the code. Please leave a comment if you’re stuck, have more questions about the galleries, or made good use of the above.

Simon Collison published this on 13/03/05, at 2:50 PM

Comments

Great write up Colly. Makes me think I really should look at sorting these out for my site - now i’ve got no excuse!

13/03 at 17:09 from Mark Boulton

Brilliant! Thanks for putting this together, just in time for me to add them to my nearly-ready site. Particularly like the CSS for the stats table - thats neat.

14/03 at 00:27 from Mike R

Fine work, thank you. With your gallery templates you have also encouraged template illiterates like me! 8-)

14/03 at 07:38 from Thomas

Excellent!  I’m hoping to implement your javascript to show/hide the category box.  I had already reversed the order on mine, so that the categories/stat box displayed under the random and most recent pictures.  I also really like your “most popular shots” box, and may give it a whirl. Very cool.

14/03 at 14:36 from allgood2

You, my dear sir, are a doll. I’m going to be experimenting with this. :-)

14/03 at 18:38 from Lea

Hi Simon, thanks for taking the time to write such a comprehensive explanation. Looking at all this makes me realize how less I know about EE. I’m still getting used to the idea of using variables, trying to figure out which purpose they have and how to use them ... So there’s still a lot to learn for me ;-) As soon as I start on a project that will have an EE gallery (probably my next blog design) I’ll be visiting this page again.

15/03 at 13:13 from Veerle Pieters

Thank you man, i just made one step to do something with gallery , but this is one more huge huge one. And please can you make tutorial for live preview too :)

22/03 at 20:24 from Bjelovar

I have implemented a heavily modified rendition of these templates on www.patchworkprogression.com. You can the resultant Photo Gallery directly at: http://www.patchworkprogression.com/index/gallery/. There are quite a few errors in the above provided code (i.e., non-relative markup in EE codes and both single and double quotes that are not plain-text, making copy/paste difficult without an external text editor to search/replace), but it appears to have come off without a hitch so far. Love the show/hide albums table.  Eliminating the tables altogether and relying purely on CSS will be the next step.  Thank you for providing the template code, very grateful.

03/05 at 19:29 from Patch

Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

Commenting is not available in this section entry.