Table of Contents
- Requirements
- Templates
- Gallery Index Page
- Gallery Album Page
- Gallery Image Page
- CSS
- Note and Copyright
- Live Example
Requirements
Each gallery need custom_field_one setup as a dropdown with options “no”, and “yes”. When Uploading images use this custom field to choose the image that will be displayed as the Category/Album Cover.
We chose to create a new folder for each gallery under /images/gallery/. so It would come out like:
/images/gallery/gallery_short_name/
Templates
The Gallery Module will create a new template group upon the creation of a new gallery. Just give it a random name as we are not going to use this template group. You can delete it later.
We will use the Gallery Entries Tag on our template of choice, so if you do have a section of your website that you want the gallery displayed, create the templates there, otherwise create a template group and add these three templates:
* photos
* albums
* image
Gallery Index Page
Inspired by this post this code will generate a list of categories, with a “chosen” image, a shortened category description, and pagination.
We chose a template_group name that matches the gallery_short_name, this way we can use {segment_1} whenever we need the name of the gallery.
Note: I enabled php on this template so I could Capitalize {segment_1} for the breadcrumbs. You don’t have to do it this way. Alternatively, you can hard code the gallery name or use a plugin such as php_functions to do that.
Add the following code to the photos template
<div id="gallery-wrapper" class="clearfix">
<div class="g-breadcrumb">
<?=ucwords(str_replace('-', ' ', "{segment_1}"))?> Photos ››
</div>
{exp:query limit="10" sql="SELECT g.*, c.*, e.*
FROM exp_galleries AS g, exp_gallery_categories AS c, exp_gallery_entries AS e
WHERE g.gallery_short_name = '{segment_1}'
AND c.gallery_id = g.gallery_id
AND e.cat_id = c.cat_id
AND custom_field_one = 'yes'
AND c.total_files > 0
ORDER BY c.cat_order ASC"}
<div class="g-entry clearfix">
<div class="g-thumb">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td class="g-imgthumb" align="center" valign="middle">
<a href="{path={segment_1}/album}{cat_id}" title="{cat_name}"><img src="http://www.domain.com/images/gallery/{segment_1}/{cat_folder}/{filename}_thumb.jpg" alt="{category}" /></a>
</td></tr>
</table>
</div>
<h2><a href="{path={group}/album}{cat_id}">{cat_name}</a></h2>
<p>{exp:char_limit total="200"}{cat_description}{/exp:char_limit}</p>
<p>{total_files} {if total_images == 1}image{if:else}images{/if}</p>
</div>
{paginate}
<p class="bb-pagination-links">{pagination_links}</p>
{/paginate}
{if no_results}
<div class="bb-message">There are no galleries yet. Please come back soon.</div>
{/if}
{/exp:query}
</div>
In the above example, we use the Query Module to manually select the categories and the “chosen cover image”, which has custom_field_one = yes.
Also note the use of a table around the Image. This is a hack. The gallery module doesn’t do a good job cropping the images square, so I use this table to center the image in a square while putting a background color (black for example). Think of the table as a canvas. Use CSS styles to customize the look of the canvas. You don’t have to do it this way. You can customize the markup anyway you want it. The only required markup is the actual EspressionEngine Tags.
Gallery Album Page
Note: I enabled php on this template so I could Capitalize {segment_1} for the breadcrumbs. You don’t have to do it this way. Alternatively, you can hard code the gallery name or use a plugin such as php_functions to do that.
Add the following code to the album template:
<div id="gallery-wrapper" class="clearfix">
<div class="g-breadcrumb">
<a href="{path={segment_1}/photos}"><?=ucwords(str_replace('-', ' ', "{segment_1}"))?> Photos</a> ››
</div>
{exp:gallery:entries gallery="{segment_1}" category="{segment_3}" show_future_entries="no" limit="15" orderby="date" sort="asc" paginate="bottom" dynamic="off"}
<div class="g-title">{category}</div>
<div class="g-cat-desc">{category_description}</div>
<div class="g-album-wrap clearfix">
{entries}
{row}
<div class="g-thumb">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td class="g-imgthumb" align="center" valign="middle">
<a href="{id_path={segment_1}/image}" title="{title}"><img src="{thumb_url}" border="0" alt="{title}" /></a>
</td></tr>
</table>
</div>
{/row}
{/entries}
</div>
{paginate}
<p class="pagination-links">{pagination_links}</p>
{/paginate}
{/exp:gallery:entries}
</div>
Again we use the “canvas” table to create a square and center the image in it. In this layout you can float all thumbs left and add even padding. You may end up with 5 rows of 3 thumbs.
Gallery Image Page
Add the following code to the image template:
Note: I enabled php on this template so I could Capitalize {segment_1} for the breadcrumbs. You don’t have to do it this way. Alternatively, you can hard code the gallery name or use a plugin such as php_functions to do that.
<div id="gallery-wrapper" class="clearfix">
<div class="g-breadcrumb">
<a href="{path={segment_1}/photos}"><?=ucwords(str_replace('-', ' ', "{segment_1}"))?> Photos</a> ››
{exp:gallery:entries gallery="{segment_1}" limit="1" log_views="off"}
<a href="{path={segment_1}/album}{cat_id}">{category}</a> ››
{/exp:gallery:entries}
</div>
<div class="g-title">{exp:gallery:entries gallery="{segment_1}"}{title}{/exp:gallery:entries}</div>
<div class="g-nav clearfix">
<div class="g-prevnext">
{exp:gallery:prev_entry gallery="{segment_1}"}<a href="{path={segment_1}/image}">Previous</a>{/exp:gallery:prev_entry}
{exp:gallery:next_entry gallery="{segment_1}"}| <a href="{path={segment_1}/image}">Next</a>{/exp:gallery:next_entry}
</div>
<div class="g-viewall">
{exp:gallery:entries gallery="{segment_1}" limit="1" log_views="off"}
<a href="{path={segment_1}/album}{cat_id}">View All</a>
{/exp:gallery:entries}
</div>
</div>
{exp:gallery:entries gallery="{segment_1}"}
<div class="g-image">
<div class="paddedborder">
<a href="{image_url}"><img src="{medium_url}" class="border" width="{medium_width}" height="{medium_height}" border="0" title="{title}" /></a>
<div class="g-caption">
{caption}
</div>
</div>
</div>
<!-- only use the following code if you have Solspace Tags Module. Foloow Solspace instructions on how to setup a tags page. -->
<div class="posted entry-footer clearfix">
<div class="entry-tags">
<span class="entry-tags-tag">Tags:</span>
{exp:tag:tags entry_id="{entry_id}" backspace="1" type="gallery" orderby="clicks" sort="desc" limit="10"}
<a href="{path=tags/photos/tag}{websafe_tag}" title="{tag_name}">{tag}</a>,
{/exp:tag:tags}
</div>
</div>
<!-- End Tags -->
{/exp:gallery:entries}
{exp:gallery:entries gallery="{segment_1}"}<h3 class="comment-hdr">Comments ({total_comments})</h3>{/exp:gallery:entries}
<div class="user-comments">
{exp:gallery:entries gallery="{segment_1}"}
{if total_comments == 0}
<p>Be the first comment!</p>
{/if}
{/exp:gallery:entries}
{exp:gallery:comments gallery="{segment_1}" limit="25"}
<div class="{switch="resultRowOne|resultRowTwo"}">
<h4 class="comment-author-data">Posted by {name} on {comment_date format='%F %d, %Y, %h:%i%a'}</h4>
<div class="review-text">
{comment}
</div>
</div>
{/exp:gallery:comments}
</div>
<div class="bb-comment-form">
<h3 class="bb-comment-form-hdr">Leave Your Comment</h3>
{if logged_out}
To comment this photo, please <a href="{path=member/login}">Login</a>. If you are not a member, <a class="red" href="{path=member/register}">register</a>. </p>
{if:else}
{exp:gallery:comment_form preview="gallery/comment_preview"}
<p>
<textarea name="comment" class="bb-comment-textarea" cols="50" rows="9">{comment}</textarea>
</p>
<p><input type="checkbox" name="notify_me" value="yes" {notify_me} /> Notify me of follow-up comments?</p>
<input class="btn-red-form" type="submit" name="submit" value="Submit Comment" />
{/exp:gallery:comment_form}
{/if}
</div>
</div>
CSS
#gallery-wrapper {
clear: both;
}
div.g-breadcrumb {
font-family: Georgia,Arial,Helvetica,Geneva,Sans-Serif;
font-size: 14px;
color: #333;
margin: 0 0 10px 0;
}
div.g-breadcrumb img {
margin: 0 0 -2px 0;
}
div.g-entry {
margin: 0 0 10px 0;
padding: 10px;
border: solid 1px #ccc;
background: transparent url('/images/ui/bg-stripes.gif');
}
div.g-entry h2 {
margin: 0 0 10px 0;
}
div.g-entry .bbg-thumb {
float: left;
margin: 0 10px 0 0;
padding: 0;
}
div.g-title {
font-family: Georgia,Arial,Helvetica,Geneva,Sans-Serif;
font-size: 20px;
color: #333;
margin: 20px 0 10px 0;
}
div.g-cat-desc {
margin: 0 0 10px 0;
}
div.g-album-wrap {
margin: 0;
padding: 0 0 22px 0;
border: solid 1px #ccc;
background: transparent url('/images/ui/bg-stripes.gif');
}
div.g-thumb {
float: left;
padding: 22px 22px 0 22px;
}
td.g-imgthumb {
width: 115px;
height: 115px;
background: #000;
}
div.g-nav {
border-bottom: solid 1px #ccc;
font-size: 10px;
line-height: 10px;
margin: 20px 0 10px 0;
}
div.g-nav a:link, div.g-nav a:visited {
color: #666;
font-weight: bold;
}
div.g-nav .g-prevnext {
float: left;
padding: 5px;
border: solid 1px #ccc;
margin: 0 0 10px 0;
background: #fafafa;
}
div.g-nav .g-viewall {
float: right;
padding: 5px;
border: solid 1px #ccc;
margin: 0 0 10px 0;
background: #fafafa;
}
div.g-image {
text-align: center;
}
div.g-image .paddedborder {
}
div.g-image .paddedborder .g-caption {
text-align: left;
padding: 5px 0px;
margin: 0 0 10px 0;
}
#gallery-wrapper p.pagination-links {
padding: 10px 0 0 0;
}
Note and Copyright
This code is offered here as a sample to help you understand how you can build a flexible, yet simple, gallery with ExpressionEngine’s Gallery Module. Please modify this code at your will but don’t use it exact as is.
I offer no support or responsibility for this code. If you have any questions you can create a discussion and I’ll gladly help.
Live Example
You can view this code in action at:
http://www.blackbookmag.com/fashion/photos
http://www.blackbookmag.com/nightlife/photos
http://www.blackbookmag.com/restaurants/photos
http://www.blackbookmag.com/pop-culture/photos