May
17th
2007
Using your own thumbs in the gallery, and CSS’ing the gallery entries tag.
I often see people ask how to use their own thumbnail images in the gallery. This is really easy and can probably be done differently than I have here. But, what I did was this. Name all thumbs the same as the original image, but prepend thumb_. So inside the gallery entries tag, you do this:
<a href="{id_path=mementos/flashback}"><img src="/photos/thumb_{filename}" width="100" height="100" alt="{title}" title="{title}" /></a>
Basically building your own URL. Purty easy.
People also often ask me how to put the gallery into CSS and rather tables. Again, this is pretty easy. I used floatutorial as a guide - this is my ExpressionEngine template:
<div id="gallery">
{exp:gallery:entries gallery="gallery" orderby="entry_date" columns="5" rows="3"}
{entries}
{row_start}<div class="gallery_row">{/row_start}
{row}
<div class="thumbnail">
<a href="{id_path=mementos/flashback}"><img src="/photos/thumb_{filename}" width="100" height="100" alt="{title}" title="{title}" /></a><br />{title}
</div>
{/row}
{row_blank}<div class="clear"> :</div>{/row_blank}
{row_end}</div>{/row_end}
{/entries}
{/exp:gallery:entries}
</div>
Voila. =)
RSS
Flickr