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.

 
Download the EE Code for 26 - Finishing the Photo Gallery

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" />&nbsp;
                        
{/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="{title}">
                        <
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">&nbsp;</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="{title}">
    <
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.


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="{title}">
                            <
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">&nbsp;</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="{title}">
    <
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 Entry   

Next Entry >>

 

Previous Comments

Picture of mes

by mes

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

Mike Boyink

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?

Picture of Mary Ellen

by Mary Ellen

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.

Mike Boyink

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.

Picture of Jdawg2k

by Jdawg2k

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.

Picture of Inge

by Inge

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.

Picture of Forrest

by Forrest

Date: Monday, November 24th, 2008
Comment: #7

Michael,

Excellent tutorial. I really appreciate your work one these.

I have succeeded in getting the index page working perfectly, however, on the category page, when I click on an image the page scrolls down and the full-size image shows up down there instead of in the js popup window.

I would be happy to share the code. Any ideas what I might be missing here?

Mike Boyink

by Mike Boyink (Author)

Date: Monday, November 24th, 2008
Comment: #8

Sounds like the javascript might not be pathed in correctly.

I’d try hard-coding an image in the template with the rel attribute for the javascript and see if it works that way.  If so then baby-step in the EE code as little at a time as is possible.

Picture of Forrest

by Forrest

Date: Monday, November 24th, 2008
Comment: #9

Alas, slippery fingers on the lightbox.css link. I got that fixed and everything is working perfectly. Thanks again for the excellent contribution EE understading.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, November 24th, 2008
Comment: #10

Cool deal - glad you got it!

Picture of parsoncraig

by parsoncraig

Date: Thursday, December 11th, 2008
Comment: #11

Mike,
I can’t see your upload facility on the demo site, so I presume that is a control panel access item.  Is that correct?

I am interested in creating a way for visitors to upload photos themselves. But I need it to be as easy as Facebook or Picasa.  (Indeed, I’d like to do the same for audio and video.)

Is the photo upload in this suitable for the grandma who can’t even setup RSS for herself?  Or is it, in your judgment, too complex for a low-end computer user?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, December 11th, 2008
Comment: #12

This uses the EE Photo Gallery Module that is part of the EE Control Panel, yes.

It’s not going to be as polished as Facebook, and I haven’t used Picasa.  There is no “desktop uploader app” like some online photo gallery tools have.

But I wouldn’t say it’s too complex either. At their core all these tools operate the same way - you create a name for a group of photos, then browse for, select, upload, and describe a photo.

Picture of DHP

by DHP

Date: Friday, January 2nd, 2009
Comment: #13

Hey Mike

Thanks for these series.  Just noticed in your URL edits for the lightbox_css you have a missing slash for the URL that points to the ‘nextlabel’ in-between the closing curly bracket of ‘site_url’ and ‘images’ .

Your work is fantastic.  Thanks for the boost.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 2nd, 2009
Comment: #14

Thanks for the pointer.  Actually the missing slash is correct since the site_url variable includes it.

You’d think either way I could be consistent in two lines of though, wouldn’t ya?

Picture of DHP

by DHP

Date: Friday, January 2nd, 2009
Comment: #15

Hmm… ok,

Intriguing.  I have been having an issue that I cannot solve (and I hoped the slash was the problem).

When I click on an image, the light box script works, but it sends the image WAAAAY down the page to the left of screen, and it’s missing the opaque background and so forth. Is this a CSS issue? Where would i find the style to fix?

Thanks mate

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 2nd, 2009
Comment: #16

Got me on that one—but most issues with this stuff are path-related.  Make sure the rendered pages are getting the correct path to the CSS and js. 

I’d suspect the .js one first based on your symptoms.

Picture of DHP

by DHP

Date: Friday, January 2nd, 2009
Comment: #17

OK! Got it!

Thanks very much, Mike.  There was an issue in my JS and HTML (I changed the name of my photo gallery to another, so I had to sift through the lot to ensure all tags were correct.

Should have just named it ‘photos’ and be done with it..

In fact, I just still may, if I have any other troubles.

Cheers

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 2nd, 2009
Comment: #18

Cool deal - glad to hear it!

Picture of DHP

by DHP

Date: Saturday, January 3rd, 2009
Comment: #19

Mike,

I noticed you have an embed template called ‘edit this link’ or something along those lines…. how do I get hold of that template?

I’m not asking you for your own work (unless you don’t mind passing it over), just maybe a pointer to how I can find it. Have tried the EE docs - used the code - but end up getting a ‘Disallowed Key Characters’ error.

I can’t seem to figure this one out.

Cheers

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, January 3rd, 2009
Comment: #20

The answer is on the wiki. Or is that what you tried?  I basically do the latter approach, but put the link in an embedded template then pass the weblog and entry id in as embed variables for embedded templates.

Picture of DHP

by DHP

Date: Saturday, January 3rd, 2009
Comment: #21

Thanks Mike

I did see this same resource on the wiki.  I always try to ‘help myself’ in finding solutions.  I just thought I’d ask if you had any tricks up your sleeve (sure you do..)  Especially since I am getting an error..

Speaking of tricks:  I am building my family an extranet and working to make it possible to do al weblog/gallery/profile edit and creation from the front end by creating SAEF and linking.  I would like to incorporate photo uploads, forum and even a wiki.

I also am interested in other tricks relating to this endeavor.

Which one of your webcasts would cover this? (if any)
Does the ‘preparing the site for clients’ one have this info?

Would gladly pay for that kind of knowledge.  Your help has been invaluable.  I can’t believe the quality you have poured into these free tutorials.  Fantastic work

Cheers

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, January 3rd, 2009
Comment: #22

Huh..the “alternate approach” on the wiki is pretty plug and play for me.

On the family extranet - no, the client access screencast doesn’t cover the topics you mention.

I’ve built a family extranet for my own family behind boyink.com.  It has blogs for 3 family members and a photo gallery.  I just chose to put people into the EE Control Panel for posting.  You can get a glimpse if it via my portfolio entry.

Everything you mention is certainly do-able through stand-alone entry forms, but it’s quite a bit of work for a family extranet (unless your family is way big..;)

You’ll want to investigate some of the EE add-ons from Solspace - most notably their User Module, File Upload Module, and possibly the Form Helper Plugin.

Were it me I’d probably start simple with out of the box EE, and live with that until EE 2.0 is out—and see if any of the new functionality it holds negates the need for the 3rd party tools.

Picture of Gaurav

by Gaurav

Date: Thursday, April 23rd, 2009
Comment: #23

Mike I am doing a test on the free core versio of EE. I have got this photo album right, but I would like to ask you this.

I have got 15 images in my database. How do I make them appear in a 3x5 matrix? Right now I have given it limit=“3”. But then it only displays 3 images. I want to display 3 images on one row, but would like the 4th one to drop on the next row. How can I do this without the {exp: gallery} in the core version. Here is a snippet of my code:

<table width="542" border="0" align="right" cellpadding="0" cellspacing="0">
<
tr>
{exp:weblog:entries weblog="hangers-details" disable="trackbacks|pagination|member_data" orderby="date" limit="3"}
    
<td align="center" valign="middle" class="productsred">
<
a href="{url_title_path=hangers/details}"><img src="{hangersthumbnail}" border="0" width="155" height="97" alt="{title}" class="hangerimages"><br /></a>
<
span class="productsdark">
{sku}<br />
{title}</span><br />
<
strong>{hangersprice}</strong>
</
td>

{/exp:weblog:entries}
</tr>
</
table
Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 23rd, 2009
Comment: #24

HI Gaurav -

Since you’re using a different approach than my tutorial here the best place to get help will be the EE Forums for the Core version.

Picture of Jenny Thomas

by Jenny Thomas

Date: Wednesday, October 7th, 2009
Comment: #25

First of all, thanks Mike for this wonderful tutorial site. It’s made my life a lot easier, and I don’t think I could have approached my project without it .... seriously.

I followed your Photo Gallery + Lightbox tutorial with no problems. But then I realized I needed slightly different functionality. Instead of having a gallery page with various thumbnails, I wanted just to have one thumbnail image displayed, that when clicked on, would launch the lightbox of images in that category.

As I was working through how to do this (didn’t seem to find any help on the EE forums), I stumbled upon what I think might be a workaround, although with my limited experience, there may be something more obvious that’s already out there.

Anyway, what I did was basically reference 2 gallery:entry tags ... one to place the single thumbnail and reference the first lightbox image, and the other to cycle through the rest of the images. In the process, found that the {row}{/row} variable pair was necessary. Here’s the code:

{exp:gallery:entries gallery=”{gallery_name}” entry_id=“1”}
      ” title=”{title}”] http://www.train-ee.com/images/{url_title}.gif
{/exp:gallery:entries}

{exp:gallery:entries gallery=”{gallery_name}”  orderby=“entry_id” sort=“asc” entry_id_from=“2”}
  {entries}
    {row}
      ” title=”{title}”]
    {/row}
  {/entries}
{/exp:gallery:entries}

It seems to work fine. Just wondering if there’s an easier workaround?

Thanks again,
Jenny

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, October 7th, 2009
Comment: #26

If it works—use it! :)

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, March 18th, 2010
Comment: #27

Via Matthew Boon:

Dear All,

Just thought I’d post a few words for those who are trying this and
jquery at the same time.

I use jquery for Google Analytics, I have the analytics code in the
document ready function:

http://www.carronmedia.com/extend-google-analytics-with-jquery/

http://expressionengine.com/forums/viewreply/603851/

http://expressionengine.com/forums/viewreply/629933/

Problem is that jquery and the aformentioned lightbox script conflict,
so you have to start looking into ways of getting around this:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Instead of going through that I looked into jquery lightbox scripts and
you may find the following useful:

http://leandrovieira.com/projects/jquery/lightbox/

http://themechanism.com/blog/2009/03/11/quest-for-the-right-jquery-lightbox/

http://spoonfedproject.com/jquery/extensive-list-of-jquery-lightbox-modal-plugins/

Some dicussion and the odd recommendation of Slimbox 2:
http://gallery.menalto.com/node/71423

I ended up trying Slimbox 2 and was up and running in 5 mins.

Picture of Mike

by Mike

Date: Friday, May 28th, 2010
Comment: #28

Purportedly, there is a way to have EE parse the variables in javascript.

See:

http://expressionengine.com/forums/viewthread/50805/#247433

I tried using hte {site_url} tag to help point to the lightbox images, but still no luck. Just wound up giving up and hard coding in the end. =P

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>