ExpressionEngine: How to create Gallery Entries

Written by Maleika Esther Attawel
Published in
Tweet Me

When it comes to designing web sites for clients, one of the things we ask ourselves first is how we can develop a required feature in the most simple and intuitive way possible. Some clients have their web sites maintained by professionals while other clients prefer to maintain their web site autonomically. In the latter case, it is crucial that a client can create content in such a way as to not interfere with anything that requires technical know-how. An example is one of my latest clients; the client wants to create and manage photo galleries. The CMS of choice is ExpressionEngine, my favourite CMS. But — and I don't mean the passive kind of "raise yer eyebrow, leave out an enormous sigh to make sure everyone in the room notices, shrug shoulders and move on" kind of "but" ‐ it's the type of "but" that can make and break initial tool decisions.

Of course one cannot expect any CMS to come full-fledged with a "anything-you-want-and-so-much-more-you-really-never-should-have" off-the-shelf feature-set. However, the default EE Gallery Module leaves some things to be desired, particularly when you do not want a client to have to meddle with servers, templates, and create new folders for a gallery each time the client decides to make a new one.

However, as with any top-notch CMS, you have a thriving, agile and smart community that supports the software and goes out of their way to fill these gaps with high-quality third-party add-ons that facilitate and extend features that make every non-programmer occasionally breakout into silly, frenetic outbursts.

That should be the initial reaction with these two methods you can use to create a nifty, usable, and convenient means which which your client can create galleries on the spot without having to resort to technical mumbo-jumbo:

I will focus on the second method.

Requirements for our entry gallery functionality:

The setup:

1. Make sure you have jQuery enabled in your Admin Panel. If you're running a newer installation of ExpressionEngine, you already have that feature.If you don't, then nGen Works' cp-jquery extension will help you out. However, make certain that you're running the latest versions of jQuery to avoid any issues. A convenient method is to simply link to Google's Ajax Libraries for jQuery and jQuery UI. Alternatively, just place a copy of jQuery and jQuery UI somewhere on your server and link to it.

Screenshot displaying the jQuery extension fields

2. Upload and install FieldFrame in your extensions folder and enable the extension in your Extensions Manager.You should now see a new item called Fieldtypes Manager in your Admin Panel under Admin -> Utilities.

3. Upload ImgSizer to your plugins folder.

4. Upload nGen FileField into your fieldtypes folder under /extensions/fieldtypes/.

5. Now you can use the new extension to define the Custom Weblog Field for the weblog where you intend to use entries as galleries. Create a new Custom Weblog Field and name it image_upload (or something else, but I'll use it for this example).
Specify the Field Type and choose FF Matrix as your Field Type. Why FF Matrix? Because I'd like to do more than just upload an image file. I'd like to have multiple fields where I can add information relevant to the image, hence FF Matrix is the sensible choice.

You should see something like this:

Screenshot displaying the Custom Field Setup

6. Now I'd like to have a field where I can explicitly describe the alt attribute. Of course you can create any other fields you deem necessary. Create them as you see fit. For this example, I'll just create two columns, one for the image file and one for the alt attribute.

The first column should hold my image, so I will name it image. Do not forget to specify the File upload location. The second column should hold the content for my alt attribute, so I'll name it alt_descr. The Cell Type for my image is a nGen field, the second column should be plain text.

Screenshot displaying the Field Matrix Setup

7. Save everything and when you publish a new entry, you should see these fields now.

Screenshot displaying Publish Tab

8. I now need to add the HTML to accomodate our new functionality in the templates. I'll leave out the styling and other considerations as that bears no relevance.

Firstly, here's my basic HTML structure for the gallery:

  1. <ul class="my-gallery">
  2. <li><a href="path_to_large_image.jpg"><img src="my_thumbnail.jpg" alt="my thumbnail"><</a></li>
  3. </ul>

Secondly, we'll add our new functions to display the images and alt attributes:

  1. <ul class="my-gallery">
  2. {exp:weblog:entries weblog="photography"}
  3. {image_upload}
  4. <li><a href="{image}"><{exp:imgsizer:size src="{image}" width="55" height="35" alt="{alt_descr}"}</a></li>
  5. {/image_upload}
  6. {/exp:weblog:entries}
  7. </ul>

In human words, I wrap my list items into the custom field variable pair, {image_upload}, the field we just created. I then specify what I want to be displayed, thus using my image field to reference the image path by placing {image} into the href attribute. Next I tell EE that I want to have thumbnails, ergo I use the ImgSizer plugin code that does the work for me. Finally, I add my alt attribute description {alt_descr}.

And that's basically all that is needed to use entries as galleries in ExpressionEngine. Solspace's Gallery Extended module is another method, but I haven't tried it out yet, so cannot compare how it fairs in terms of ease of implementation. It has several more options like creating relationships and delicious whatsits. Knowing Solspace, however, I have no doubt it's a fantastic method as well, so choose whatever fits your requirements best!


Remember my personal information
Notify me of follow-up comments?