ExpressionEngine photo gallery module

01-11-2010

Though the Expression Engine Photo Gallery Module is great – it can be major overkill for some EE based projects.

When to use the Photo Gallery Module

When your clients want to login to their server via FTP, Upload a bunch of images to a ‘batch’ folder, Go back to the Expression Engine control panel, do lots of stuff, go back to the server and delete the batch folder. (breath)
If they are going to constantly upload tons of images and organize them in different categories.
If they want to recreate Facebook Albums, Flickr or Picasa

When not to use the Photo Gallery Module

When your clients want to add photos to a gallery-ish-thing just like they add content.
If they’re going to upload photos sometimes and maybe organize them into different categories.

FF Matrix + nGen File Field + (insert modal box here)

This alternative is easy and works great for those once in a lifetime moments when you’re not recreating Flickr.

The Goods

All of these plugins/extensions have great documentation on installation so I wont go into that. Once it’s all installed you’re going to need to make a weblog field group for your “gallery”.

Go to Admin/Weblog Administration/Custom Weblog Fields and click the “Create a New Weblog Field Group” button, give it a name (Photo Gallery) and click submit.
Click the “Add/Edit Custom Fields” button next to your new field group and then click the big green “Create a New Custom Field” button.
1. Lets go with photo_gallery for the field name & Photo Gallery for the field label.
2. For field type choose FF Matrix.
  1. Make Cell 1 col name “photo_upload” and col label “Photo Upload”
  2. For cell type choose nGen File Field and select your file upload location.
  3. Make Cell 2 col name “photo_caption” and col label “Photo Caption”
  4. For cell type choose text, and we’re done (click submit)

Now you just need to make your weblog, add some code into you templates and create a new entry.

Create your weblog

I’m not going to get too into this so we’re going to use screenshots.

Make your template

This is how I did it, you can add categories into the mix but I didn’t need to.

Make an entry

You can add rows, delete rows and even move rows around. Go crazy!

Now just add your fancybox in there (I’m not going through that part, it’s easy) and you’re done. Throw in a little CSS3 box-shadow, padding, margins, border, etc. and the Image Sizer plugin and you’ve got yourself a photo gallery.

So that’s it. The semi-lazy-photo-gallery-alternative post. Hope you enjoyed! If you have another way you like to make galleries, if you want to tell me something I did wrong or if you like hotdogs; comment below.

Garrett Winder