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:
- Photo Gallery Name: Photos
- Photo Gallery Short Name: photos
- Photo Gallery URL: http://church.train-ee.com/index.php/photos/
- Image Folder Name: gallery
- Server Path to Image Folder: I’m not going to post mine for security reasons - for me EE found the image folder and built this path automatically.
- URL to Image Folder: http://church.train-ee.com/church/images/gallery/
- Template Group Name: photos
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:
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.
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:
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.
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.