Steve Abraham

Using phpThumb() in ExpressionEngine (Part 2)

Posted 13th August 2010 in Blog

Due to a recent new release of phpThumb() and other mentioned software, some of this information is slightly out of date. I’m writing a new blog post which should be available shortly.

For this next step I’m going to explore practical uses for phpThumb() within ExpressionEngine.

Since writing Part 1 of this I’ve added a gallery feature to this site that allows photos or images to be uploaded with each blog post.  These appear as small thumbnails in rows under each post and are integrated with a JS lightbox script so they can be clicked on to view at a larger size. This functionality will form the basis for the following post.

If you want to follow along at home in true Blue Peter fashion, you’ll need the following:

• An ExpressionEngine 2 site
• Pixel and Tonic Maxtrix fieldtype
• Pixel and Tonic Field Pack fieldtypes (Dropdown)
• Colorbox
• Sticky backed plastic (no, not really)

Before continuing I’d like to say that I’m completely open to suggestions for improvements to any of this, and will update in future posts with any suggestions that I feel are worth mentioning.

Setting Up The Custom Fields

The first thing to do is start setting up the custom fields to hold our photos and set some options.

For this I’ve added a custom field to my blog field group called “post_gallery” and set it as a Matrix field type.  In the Matrix field settings I’ve added two columns, the first is a file fieldtype called “image” and the second is a Dropdown fieldtype called “cropping”.

The “cropping” box offers a quick and easy way to tell phpThumb() how to crop the image, e.g. centre, bottom left, right, etc.  In the Dropdown Options field, I’ve added the following:

These options can be changed, of course, to suit your needs, as you may only require a much simpler list.  If you do change these options, remember to change the code below too.

Setting Up Colorbox

At this point it’s wise to go ahead and set up Colorbox.  This is a little beyond the scope of this article, and the documentation over at the official website is excellent (as are the examples).

The Template Code

We’ll start by opening the Matrix field in the usual fashion:

We only want to open the gallery div once and only if at least one image has been uploaded, so we’ll check that with a conditional that triggers only for the first Matrix row:

Then we open a div for each thumbnail, making use of the switch variable if necessary for row end styling. Again, a conditional checks that at least one image has been uploaded:

Now we open the A tag that will wrap the thumbnail.  The HREF for this tag references the larger file that will appear in the Lightbox window (not the thumbnail that’s displayed on the website).  This uses the same code from Part 1, specifying a width and height, and also a REL that enables the Lightbox functionality. I’m also passing the current entry ID to Lightbox so it groups all the attachments for this post together:

After opening the A tag, we can now output the thumbnail image. Firstly, the IMG tag and phpThumb() code to create the thumbnail sized image:

Close the thumbnail DIV and the conditional:

Conditional to check if this is the last row so we can close the gallery DIV:

And finally, we close the Matrix field:

If that all made sense (and I didn’t typo!) you should now have a functioning basic gallery.

Until Next Time

Once again, I hope this has been of some help to someone out there, and if so, please pass it along.  In the next post I intend to continue where Part 1 left off, and cover some of the more advanced parameters for phpThumb() such as watermarking.