26 - Finishing the Photo Gallery
In this chapter I’ll cover completing the church site Photos section. To do this I’ll get the Lightbox script in place and configured, update the photos templates, and move gallery related styles into the site master stylesheet.
Starting at the End
OK - like a TV cooking show let’s start with the finished product so you can see if it’s something that tempts your tastebuds. Here’s the fully-implemented Church Site Photos Section. On the index page clicking a thumbnail loads the full size image in a Lightbox effect. The Lightbox script provides next and previous navigation, and also loads the photo’s title and caption from ExpressionEngine. Selecting a category link loads a page of thumbnails, and the Lightbox script is used again for viewing full-size images. When completed this approach uses two EE templates, the files necessary for the Lightbox script, and some styles added to the site’s master stylesheet.
If this implementation works for your needs then read on, and I’ll get a fresh one assembled and in the oven before commercial break.
Here’s what I’ll cover in this chapter:
- Downloading the Lightbox script
- Placing and Editing Lightbox Files
- Updating embeds/html header
- Updating photos/index
- Updating photos/category
Download the Lightbox Script
I’m using the Lightbox script found here. Why this one? Well, I spent hours downloading, installing..test…
Uh, no.
I Googled “Lightbox” and this was the first result returned. It looked to do what I wanted so it’s the one I choose.
So download that script and unzip it somewhere locally. The archive has three subdirectories (images, js and css) and an HTML file with basic directions. We’ll need to deal with the contents of each directory.
Images
The Lightbox script uses a number of images. I created a new folder under my master “images” folder named “lightbox” and uploaded all the images there.
Javascript Files
This script needs 5 Javascript files to operate. In EE you can create templates and assign them to be a javascript template, however when using third-party scripts like this I tend to keep the Javascript files outside of EE and just place them on the server like you would on a static website. I’ve just had better luck getting them to work, I don’t tend to edit them once working, and - in this case - the one Javascript file looks to call/include two other files and I wasn’t sure how to re-create that functionality if I put all of them into ExpressionEngine.
I created a new folder off the root folder for my site, and named it “js”. Before uploading these files though I needed to edit the “lightbox.js” as it contains paths to a couple of the images and we need to tell it where the images are now found.
Open the lightbox.js file in a text editor, and scroll down to around lines 49 and 50 under Configuration where it has paths to the file loading bottom nav close image files. I’ve had the best luck specifying full paths (and since we’re outside of EE I can’t use things like the site_url variable) - so here’s what I have in my file:
fileLoadingImage: 'http://church.train-ee.com/images/lightbox/loading.gif',
fileBottomNavCloseImage: 'http://church.train-ee.com/images/lightbox/closelabel.gif',
Note that there are some other configurations you can make as well - opacity, speed, border etc. I just left all of these at the defaults.
I saved my changes and uploaded the five Javascript files to the new folder on the server.
CSS
I had a decision to make here - do I also leave the CSS as an external file, or do I pull it into EE? The Javascript I don’t expect to have to modify, but this one I will - so I pulled it into EE as a new template in the photos template group—named lightbox_css. Once I created the new template and pasted in the CSS provided by the Lightbox script, I had to make a few more pathing changes.
In the CSS file I had to change the paths to the Previous and Next images. Here’s what I put in:
#prevLink:hover, #prevLink:visited:hover { background: url({site_url}/images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url({site_url}images/lightbox/nextlabel.gif) right 15% no-repeat; }
Updating embeds/html_header
With those changes saved, the next step is to make sure the Javascript and CSS files are pulled into the page when visiting the photos section of the site. For that I had to update embeds/html_header.
What I don’t want here is these files being referenced on every page of the site - so I used a simple conditional:
{if segment_1=="photos"}
<script type="text/javascript" src="{site_url}js/prototype.js"></script>
<script type="text/javascript" src="{site_url}js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="{site_url}js/lightbox.js"></script>
<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=photos/lightbox_css}' />
{/if}
Updating ExpressionEngine Templates
With the onions diced, tomatoes cubed, and the hand-rolled crust in place, now the tasty center can be assembled. In order to have the photo gallery fit in with the rest of the church site, I need to update both photos/index and photos/category.
Updating photos/index
What I wanted here was a combination of my page-comps/one-column-content and photos/index with a sprinkling of the Lightbox code thrown in. I usually do this sort of assembly process in Notepad - here’s my workflow:
- Open a blank Notepad document
- Paste in page-comps/one-column-content
- Remove all the content area HTML - this gives me a blank “look and feel envelope”
- Open photos/index and copy out just the content-area ExpressionEngine tags that return the category list and recent/random photos
- Paste that into the content area of the open Notepad document
- Tweak as needed (change the body_id, the main nav location, page title etc)
- Copy/paste the entire Notepad doc back into photos/index
- Load the rendered version from ExpressionEngine
- See what still needs to change
In this case, most of what needed to change was CSS-related. I won’t cover those changes specifically - I’ll just include an updated stylesheets/style template in the companion file archive (and note that once that’s loaded you can delete photos/gallery_css).
However there was one other notable thing I needed to change - the dynamically assigned variable.
Dynamically Assigned Variable
I don’t believe I’ve covered these yet in this series. ExpressionEngine has Dynamically Assigned Variables that are template-level in scope. You can think of these as a text-replacement variable—so you can set a variable once at the top of a template and then re-use it throughout the rest of the template. The photos/index template has a few places where the gallery name is needed, so uses a variable to set the gallery name:
{assign_variable:gallery_name="photos"}
Then the ExpressionEngine tags later in the template use the variable rather than hardcoding the gallery name:
{exp:gallery:categories gallery="{gallery_name}"}
The benefit being if you wanted to copy this template for use with another gallery you could copy it and just change the gallery name in one place rather than 3-4. I’ve gone back and forth on whether I like to use these or not. They can save a bit of time, but also make the code look more complex and less immediately readable.
The Meat
Now we can look at the meat of the template, and then I’ll cover what’s going on. It’s a big template - so I’ll knock it off chunk by chunk. There are three main chunks - the category list, the recent photos, and the random photos. Let’s look at the category list first - which is everything in the first set of table tags.
{exp:gallery:categories gallery="{gallery_name}"}
<table class="tableBorder" cellpadding="6" cellspacing="1" width="100%">
<tr>
<th>Category</th>
<th>Description</th>
<th># Photos</th>
</tr>
{category_row}
{row_start}<tr>{/row_start}
{row}
<td class="categories">
{subcat_marker}
<img src='{cp_image_dir}cat_marker.gif' border='0' title='' alt="None" />
{/subcat_marker}
<strong><a href="{category_path=photos/category}">{category}</a></strong>
</td>
<td class="categories">{category_description}</td>
<td class="total_files">{total_files}</td>
{/row}
{row_end}</tr>{/row_end}
{/category_row}
</table>
{/exp:gallery:categories}
This is pretty much the code that EE generated by installing the Photo Gallery module—all I’ve done with this is simplify it by removing comment-related data and latest update data. I just choose to show the category name, description and number of images in the category.
Next comes the “Most Recent Images” section:
{exp:gallery:entries gallery="{gallery_name}" orderby="entry_date" columns="3" rows="1"}
<table class="tableBorder" cellpadding="6" cellspacing="1" width="100%">
<tr>
<th colspan='3'>Most Recent Images</th>
</tr>
{entries}
{row_start}<tr>{/row_start}
{row}
<td class="thumbs">
<a href="{image_url}" rel="lightbox[recent]" title="{exp:html_strip}{title}: {caption}{/exp:html_strip}">
<img src="{thumb_url}" class="border" width="{thumb_width}" height="{thumb_height}" title="{title}" alt="{title}" />
</a>
<div class="title">{title}</div>
</td>
{/row}
{row_blank}<td class="thumbs"> </td>{/row_blank}
{row_end}</tr>{/row_end}
{/entries}
</table>
{/exp:gallery:entries}
What I want to note here is that I changed the number of columns from 4 to 3—just to fit into the width of my site design. You may have to remove or add columns to get the display to look right.
Let’s drill into the link surrounding the thumbnail -as this is where the Lightbox-specific stuff goes. Here’s the code:
<a href="{image_url}" rel="lightbox[random]" title="{exp:html_strip}{title}: {caption}{/exp:html_strip}">
<img src="{thumb_url}" class="border" width="{thumb_width}" height="{thumb_height}" title="{title}" alt="{title}" />
</a>
A few things to note here:
- The link
image_url is a built-in variable of the gallery:entries tag and returns the full path and file name to the full size version of the image. - The rel attribute
lightbox[random] is required by the Lightbox script - it’s what connects the effect to the fullsize image. The “random” word is one I just made up so that the full-size images get the prev/next links in the Lightbox effect. - The title
I wanted both the photo title and caption to appear in the Lightbox pop-up. However the caption variable returns marked up with paragraph tags which won’t validate. To remove the paragraph tags I used the html_strip plugin.
Next is the “Random Images” section, and it functions exactly like the Most Recent Photos section except that it uses a random parameter on the gallery:entries tag. I also used “recent” on the Lightbox-required rel attribute so that the next and previous links show for these full-size images as well.
{exp:gallery:entries gallery="{gallery_name}" orderby="random" columns="3" rows="1"}
<table class="tableBorder" cellpadding="6" cellspacing="1" width="100%">
<tr>
<th colspan="3">Random Images</th>
</tr>
{entries}
{row_start}<tr>{/row_start}
{row}
<td class="thumbs">
<a href="{image_url}" rel="lightbox[random]" title="{exp:html_strip}{title}: {caption}{/exp:html_strip}">
<img src="{thumb_url}" class="border" width="{thumb_width}" height="{thumb_height}" title="{title}" alt="{title}" />
</a>
<div class="title">{title}</div>
</td>
{/row}
{row_blank}<td class="thumbs"> </td>{/row_blank}
{row_end}</tr>{/row_end}
{/entries}
</table>
{/exp:gallery:entries}
With me? Almost there…
Updating photos/category
Again - I’ll include the entire template below in the Companion Files. For the most part the approach to building this template and the changes required are the same as the index template. The two main differences are the page title and feeding the Lightbox script correctly such that the previous/next links work. Let’s tackle the page title first.
Here’s my code:
{embed="embeds/html_header" my_title="Photos | {exp:gallery:category_name}{category}{/exp:gallery:category_name}"}
This uses the Photo Gallery Category Name tag which pretty much exists for this purpose. Note that this tag is included inside the embed variable for the embedded template, and still all gets passed to embeds/html header as the page loads.
Next up is the Lightbox code for the category template:
<a href="{image_url}" rel="lightbox[{category}]" title="{exp:html_strip}{title}: {caption}{/exp:html_strip}">
<img src="{thumb_url}" class="border" width="{thumb_width}" height="{thumb_height}" title="{title}" alt="{title}" />
</a>
All I did here was use the category variable rather than a fixed word for the “rel” attribute. Now that I think about it - I could have probably just used the fixed word of “category” since we’ll never be loading multiple categories using this template. Either way should work but somehow it seems cooler to be dynamic…
And There You Have It
With the Lightbox files edited and placed, the Lightbox images and CSS accommodated, and the EE Photo templates updated I now have decent little Photo Gallery for my church site. Just a reminder that when completed this site will be auctioned off via eBay with proceeds going to charity. If you know of a church who could use it - start spreading the word!
Next up? We’ll get going on the audio archive.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Tuesday, October 28th, 2008
Comment: #2
Dunno! Try re-uploading the image? And maybe try a different spot/different path?
by
Date: Saturday, November 1st, 2008
Comment: #3
It was of course something stupid that i stared at too long. with all the js files I thought maybe I missed something called from another file.
In any case! I have one other quick question. On the index page of the photos group where the initial table writes the categories. I tried to insert a show_empty="no" parameter and it still displays empty categories. I made the categories in advance for the teachers but they still display even if they are empty. Any ideas why that would not work?
{exp:gallery:categories gallery="{gallery_name}" show_empty="no"}
<table class="tableBorder" cellpadding="6" cellspacing="1" width="100%">
<tr>
<th>Category</th>
<th>Description</th>
<th># Photos</th> ....
The documentation seems to suggest that it would.
by Mike Boyink (Author)
Date: Saturday, November 1st, 2008
Comment: #4
Hey Mary Ellen—
I’m only seeing one parameter on the Gallery Categories tag (the gallery name), so don’t see that you can set it to not show empty categories.
However it looks like you may be able to use the total files variable with a conditional to achieve the same effect.
by
Date: Tuesday, November 18th, 2008
Comment: #5
Hey Mike, great couple of article on the Gallery. You take your time explaining little details and I appreciate that.
I was really hoping EE had this type of functionality. And touched with a little JS, gave it a nice flavor. I’m sure my clients will love this.
by
Date: Wednesday, November 19th, 2008
Comment: #6
thanks for another very helpful post!
nearly there with my first EE website now and your site has really helped me get to grips with expression engine.
by
Date: Tuesday, October 28th, 2008
Comment: #1
Hi Mike,
I got it working but i cant seem to get the “close” image to display. There is a path in the lightbox .js but when I used the same absolute url as in the other 2 paths it still doesnt display. I checked all the css and I cannot find any other path or img call for that image. Any thoughts?
ME