WordPress: Custom Fields & Thickbox / Lightbox

One of the best ways to improve your WordPress blog is to add some dynamic flare to images especially with the popular lightbox effect. This slick installation allows enlarging images and creating galleries in an overlay pop-up using the likes of AJAX and JQuery. Adding the code is a chinch and for most it’s usually for one image in a post.

But what if you wanted to do a little more, say a small gallery at the end of a post? For an example, check out a previous on my trip to Opelika, Alabama back on Memorial Day. Coding each individual image and hyperlink can be a hassle, but using Custom Fields can cut down the code time.

1. Get the Plugin
For the purpose of this tutorial, I will be using Thickbox for all examples, although the same principals can be used for Lightbox as well. First off make sure you have an up-to-date install of WordPress running. Next either download the plugin for Thickbox or Lightbox and activate it.

2. Get Images Ready
Have a set of images ready for posting, for my blog I create a set of four thumbnails at the size of 90px by 90px and the enlargements at a maximum 700px wide or high depending on the orientation. Upload these images to your server’s image folder – I like to breakdown images into their respective post day by folder, ie. “images/posts/2008/09/01”.

There is no need to create a separate thumbnail folder unless that is your preference. I simply like to add “_t” to the end of my images to distinguish the thumbnail version.

3. Edit Your Template
First step is to declare the variables needed for Custom Fields to work properly. Depending on your template setup, you will need to edit single.php and possibly the template for the blog (most likely index.php). In this case there will be two sets of variables, one for the thumbnails and the other for the enlarged pictures.

<?php // setting up mini-photo album
    $image1 = get_post_meta($post->ID, 'image1', $single = true); //image name with file extension
    $image1_t = get_post_meta($post->ID, 'image1_t', $single = true); //image name with file extension
    $image2 = get_post_meta($post->ID, 'image2', $single = true); //image name with file extension
    $image2_t = get_post_meta($post->ID, 'image2_t', $single = true); //image name with file extension
    $image3 = get_post_meta($post->ID, 'image3', $single = true); //image name with file extension
    $image3_t = get_post_meta($post->ID, 'image3_t', $single = true); //image name with file extension
    $image4 = get_post_meta($post->ID, 'image4', $single = true); //image name with file extension
    $image4_t = get_post_meta($post->ID, 'image4_t', $single = true); //image name with file extension
?>

Next its time to create the HTML for the small photo gallery. In order to use Thickbox the class attribute is declared by either using “thickbox”, however with Lightbox is relative attribute is used instead. For creating a gallery, a unique name needs to be used and WordPress’s post ID function proves just fine – Thickbox uses the relative tag solely whereas Lightbox amends it by using brackets. See the examples below.

Also while using Custom Fields its best to setup an if statement checking whether or not the variable has information.

<?php if ($image1 !== '') { ?>
<div class="album">
        <!-- thickbox -->
        <div class="pic"><a href="http://path/to/images/<?php echo $image1; ?>" class="thickbox" rel="<?php the_ID(); ?>"><img src="http://path/to/images/<?php echo $image1_t; ?>" alt="<?php the_title(); ?>" /></a></div>

        <!-- lightbox -->
        <div class="pic"><a href="http://path/to/images/<?php echo $image2; ?>" rel="lightbox[<?php the_ID(); ?>]"><img src="http://path/to/images/<?php echo $image2_t; ?>" alt="<?php the_title(); ?>" /></a></div>
    </div>
<?php } ?>

4. Add Some Style
Since the HTML is all wrapped up, its time to add some styling to photos by editing the CSS style file. In this example I chose to use two classes within the .post class – album and pic.

/* Post Gallery --------------------------------------------*/
#content .post .album {
    margin: 0 0 20px 0;
    padding: 0;
    clear: both;
    overflow: auto;
}

#content .post .album .pic {
    margin: 0 5px 0 0;
    padding: 5px;
    border: 1px solid #EAEAEA;
    background-color: #F6F6F6;
    float: left;
}

5. Write a Post
After updating your CSS style file, its time to write up a new post. In the Custom Field section you need to put in the variables that were declared earlier when editing your template. For this example I chose to use “image1” for the enlarged image and “image1_t” for the thumbnail. Since there are four photos, the numbers will increase by one up to four.

For the value of the Custom Field variable, type in the name of the image with the file extension since the template now includes the URL to the images folder.

6. All Done
Check out the new post and the example of the Opelika pictures using Thickbox. Works like a charm. Now whenever you need to add multiple pictures to a post with style, you won’t spend half your time coding like the old days.

7. Drawbacks
The biggest drawback to adding images to a post using Custom Fields is that they will not be recognized in RSS feeds. Also in the past I have had trouble with Lightbox not working correctly in Firefox and Internet Explorer, each one having different errors regarding placement of the pop-up.

Thickbox also does not have the ability to navigate forward or backward in gallery mode via the left and right arrow keys like Lightbox. These are things to consider when taking the jump using these plugins.