Easy to update thumbnail gallery using Textpattern and Galleriffic

This tutorial assumes that you have a fairly strong understanding of HTML and CSS. I have provided a basic style sheet with all necessary styles to achieve the look of gallery demo, but please feel free to edit the css. We will be building a very simple updateable thumbnail gallery using Textpattern and Galleriffic. There are a few tutorials out there of a similar nature, but I have found this to be the simplest way to integrate Galleriffic with Textpattern.

Below is a screen capture of the final gallery. To see the gallery in action, click here

This tutorial assumes that you have textpattern installed and ready to go.
( Download the latest version of Textpattern here: http://textpattern.com/download)

Galleriffic

This gallery is based on Galleriffic, a jQuery plugin for rendering fast-performing photo galleries. This is adapted from http://www.twospy.com/galleriffic/ to work with textpattern so you (and your clients!) can easily update the gallery. In a nutshell, the gallery works by associating image id #s with a specific article. The article form gallery and article_image_form work together to render the article in the form of all of the associated images (in their thumbnail format) to appear as an unordered list on the left, while the full version of the current image appears on the right. All that is necessary to add or change images, is to change the numbered list appearing in the advanced options on the left of the article containing the images. So easy once implemented, even a client that doesn’t speak nerd can add, subtract or change their own images.

Upload the files

Upload both of the galleriffic files included in the files folder of the download, by uploading them through the Content > Files tab. I modified the jquery.galleriffic.js file so that the pagination does not appear above the thumbnails. Should you wish to further customize the gallery, I do suggest checking out the original Galleriffic demo.

Install the relevant plugins

Install the following plugins (these are included in the Plugins folder in the download):

• upm_image by Mary Fredbord – more powerful image display
• ebl-image-edit by Eric Limegrover – introduces advanced image editing functionality

(I have had technical issues with v.2 of this plugin, so I continue to use v1. Both are included in the plugin folder.)

ebl-image-edit is great for sizing/creating thumbnails on the fly, without having Textpattern automatically centre the thumbnail. It is not essential to this tutorial, but it’s very very handy!

Set up your forms

You can find these forms in the forms folder in the download.

gallery

Create a new form called “gallery” and choose “article” for the type:

<txp:upm_article_image form="article_image_form" wraptag="ul"
class="thumbs noscript" />

article_image_form

Create a new form called “article_image_form” and choose “misc” for the type:

<li><a href="<txp:upm_img_full_url />" title="<txp:upm_img_caption />" class="thumb"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" /></a>

<div>
<div><txp:upm_img_alt /> </div>
<div><txp:upm_img_caption /></div>
</div>
</li>

If you don’t want captions, delete the whole caption div.

Basically we have taken this code from galleriffic:

<ul> <li> <a href="path/to/slide" title="your image title"> <img src="path/to/thumbnail" alt="your image title again for graceful degradation" /> </a> <div> (Any html can go here) </div> </li> ... (repeat for every image in the gallery) </ul>

and modified it so the article forms generate this code from the image numbers that we will associate with the gallery article. We’re basically saying, “take the images associated with this article, put the thumbnail versions of those images on the left with these classes and this formatting, and put the full version of the selected image on the right.” Huh? Just follow along, I promise it will all make sense soon…

Set up your page

In the pages folder I have included a template for this gallery page (gallery.html). Create a new page template in textpattern: Presentation > Pages. At the bottom, “copy page as”, name it gallery, and click “copy.” Make sure whatever section you are using for the gallery is in fact using the gallery page as its template. At the bottom of the page you will notice the galleriffic script. This is where you can make adjustments to sizes, number of thumbnails, etc. In this example I have set a limit of 9 to the thumbnails. At the bottom of the page, near the top of the script, it looks like:

numThumbs: 9,

Set up your style

I have created a master style sheet that incorporates some of the Textpattern defaults as well as galleriffic specific css. Copy the content from the screen.css file provided in the Styles folder and paste it into your default styles tab under Presentation > Style.

Add your images

Go ahead and start uploading some images, and create some thumbnails. Make sure your images are all using the same size of thumbnail. Take note of the image ID numbers, as that is what you will use to call your images into the article. Make sure to add the Alt text and Caption when you upload, as this is what will appear to the left of the main image (unless you opted to delete the captions).

Create a new article called gallery. On the left hand side, click advanced options, and enter the ID numbers of the images you want to appear in the gallery, separated by commas. Make sure you post the article to the gallery section, or whichever section you have set up to display the gallery, and click publish. Your article should look something like this:

View Site. You should notice that the images have been automatically formatted into thumbnails on the left, with the first one appearing in full on the right. That’s it! You have a galleriffic gallery integrated with Textpattern. Play around with the html, settings, scripts and CSS to customize it to suit your own needs.

If you have any questions, suggestions, or requests for future articles, please do not hesitate to leave a comment.

Thanks, and happy coding!