25 - Starting the ExpressionEngine Photo Gallery Implementation

With the decision made to move forward with the Photo Gallery module, this chapter covers installation, configuration and getting some content into the Gallery.


Here are the steps I’ll cover in this chapter of the series:

  • Installing the Photo Gallery
  • Configuring Preferences
  • Deleting Some Default Gallery Templates
  • Adding Categories
  • Uploading Photos

Install the Photo Gallery

The basic process is well-covered by the EE Docs: Installation and Configuration of the Photo Gallery.

While installing the Photo Gallery module for the church site, I choose the following settings:

Configure Preferences
I just work through these and set them as appropriate -  you can reference the EE Docs on them for more information if needed.

  • Batch Processing Preferences
    I’m leaving these as-is.
  • Caption Formatting Preferences
    I’m leaving these set to XHTML, but turning off auto-link URLs—there should be no need to put links in photo captions.
  • Image Conversion Preferences
    I’m leaving these as is.
  • Thumbnail preferences
    Here’s where you’ll need to decide how you want this to work - thumbnail linked to medium image linked to full image? I’m going to simplify the interaction here - and just have thumbnails linked to full size images,and I’ll use a lightbox script for the fullsize images, so I’ll turn off the medium image to save processing time and server space.
  • Thumbnail Resizing Preferences
    I’m going to bump up the size of the thumbs to 200px wide.  The rest of these settings I’ll leave as-is.
  • Watermarking Preferences
    I’m not going to implement watermarking on this site, so will leave these as-is.
  • Custom Entry Field Preferences
    I have no need for custom fields on gallery entries so will leave these as-is.
  • Comment Preferences
    Choose what’s appropriate for your site, for my purposes I’m not going to have comments (past experience with photos on a church site was that no one used them anyway), so will turn them off.
  • Comment Notification Preferences
    This is not applicable since I’m not going to implement comments.

Delete Some Gallery Templates
Once set with your configuration go ahead and Submit it.  You should get a “new gallery created” message, and if you return to the Templates tab you should now see a new template group created by the Photo Gallery module.  You should have eight templates in the new group:

  • category
  • comments
  • comment_preview
  • gallery_css
  • image_full
  • image_med
  • index
  • smileys

I’ll only need two of these when done - index and category.  The index template will list all the categories and a few most recent images, the category template will show all the thumbnails for that category, and clicking on a thumbnail will open the full-size image using a Lightbox script. However - I usually use the provided gallery CSS as a starting point, so I’ll keep that for the time being.  I’ll not need most of it however, so will move whatever styles I do use into the master stylesheet.

So I’m going to just delete the comments, comment_preview, image_full, image_med, and smileys templates.

Add Categories
Before I can upload photos I need to add some categories to place them into:

  • While in the Photo Gallery interface, select the Categories tab, then the Add a New Category button
  • Enter a name and description
  • If you want to organize your photos on the server to match the categories, enter a category folder name.
  • You can also assign a default category - probably a good idea for a church situation where it’s likely that this would be done by different people - so an increased risk of someone not assigning a category
  • Submit the new category

I choose the following categories for my site:

  • Facilities
  • Events
  • People

Note that you can sort the categories.  Since this is a church site I want people to come first, so choose a custom sort rather than an alphabetical one.

Upload Photos
With categories established I can now upload some photos.  I want 4-5 in each category so that I can format the category pages (with just one or two images it’s harder to tell if all the formatting with multiple rows etc. looks right).  Uploading is straightforward - from within the Photo Gallery module, first select your gallery (photos in my case) then “New Entry”.  From there browse to your photo, choose a category, and select Submit. 

Note that it’s always a good idea to choose what size you want your full-size images to be, and size them down locally before uploading.  For a church site I’d suggest 800x600 maximum, and even 640x480 if you can get away with it.  I always recommend a Irfanview - it’s a great lightweight little photo tool that has a batch-resize function.  Resizing before uploading will not only conserve server space, but if your photos are too large you’ll bump into some file upload size restrictions.  These issues can manifest themselves by timing out during the upload or causing your browser to just go all-white.

View the Results
With my photos now uploaded I should have working photos/index and photos/category templates.  If I go to the Templates tab and load photos/index, I get this:

Choosing a category returns this view:

Clicking a thumbnail just returns me to the photos/index template—which is correct because I’ve deleted the templates that the links are looking for.

This is a good breaking point. In the next installment I’ll work the Photo Gallery templates into the church site design templates, and hook up the Lightbox script for viewing the full-size images.

Category Navigation

<< Previous Entry   

Next Entry >>


Previous Comments

Picture of bernietheone

by bernietheone

Date: Saturday, October 11th, 2008
Comment: #1

Hi Mike!
Works all as expected. Struggling for an hour or so with my images, adding images to the gallery gave me a blank screen, no data was added to the gallery, but the image was copied. The solution was that my images i want to add was way to big. After conversion to an image size of max 1000 pixels it worked fine. Also setting the path for batch-upload correctly was a bit of a pain, but i get it to work (you omitted this step bcause it’s not needed here). So i’m finally sitting here with around 400 images in my ee-install awaiting your next steps :-). Maybe i try a bit for myself in the meantime. May i ask what Lightbox-Script you plan to use?


Picture of Mike

by Mike

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

Does anyone know if a better solution exists for photo galleries? The stock photo gallery module seems pretty cumbersome for clients to use - especially when you compare it to the ease of other popular things out there, such as facebook.

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...