Using Nextgen Gallery Plugin with Timthumb for Thumbnails

The WordPress theme (Mimbo free edition) used on this site is configured to use Timthumb for easy thumbnail generation. Despite the security issues a while back, I think Timthumb is an awesome utility for automatically creating homepage and category thumbnails. I also really like the photo gallery functionality that the Nextgen plugin provides – no other plugin seems to be as feature packed, yet simple to use while also generating search engine friendly code. The problem? These two plugins aren't by default set up to talk to each other so, for example, generating a thumbnail for a post with a gallery isn't something you can do without some code tweaking.

Fortunately, I know just enough PHP to hack away at problems and get things to work the way I want them to. In this case, I wanted to adjust my theme to do the following… As the post excerpts are being pulled together on the home page and category pages, do the following:

1. Does the post have a Nextgen gallery?
2. If yes, does the gallery have a preview image selected?
   1. If yes, use Timthumb to display the preview image as a thumbnail.
   2. If no, use Timthumb to display the first image as a thumbnail.
3. If no, use Timthumb to display the post image as a thumbail (default behavior for the Mimbo theme).

As with many problems these days, a few searches on Google got me most of the way, but I needed to cobble together different pieces for the solution I was looking for.

Step 1 – Modify Posts

Add a custom field to all posts with a gallery. I called this field gallery_id. The value associated with this custom field is the Nextgen gallery ID. Going back to old posts and typing this information in is inelegant and annoying, but at least it'll be quick and easy on future posts. Note that if you can't or are unwilling to do this, you might as well skip the rest of the steps. Unfortunately, the Nextgen plugin doesn't expose any functionality to look up a gallery ID using a post ID so you can't determine the gallery ID in a theme template.

Step 2 – Modify Functions.php

Add this function to your theme's functions.php file. What this does is look for the preview image for a particular gallery and then return the path to this image. If there isn't a preview image set, then this function grabs the path to the first image in the gallery.

function getFirstImageFromNextgen($galleryID=false) {
if (!$galleryID) {
return "";
} else {
global $wpdb;

if(!empty($results[0]['path']) && !empty($results[0]['filename'])) {
$imgpath = $results[0]['path'].'/'.$results[0]['filename'];
return $imgpath;
} else {
$imageDetails = $wpdb->get_results("SELECT wp_ngg_gallery.path,wp_ngg_pictures.filename FROM wp_ngg_gallery, wp_ngg_pictures WHERE wp_ngg_gallery.gid = {$galleryID} AND wp_ngg_pictures.galleryid = wp_ngg_gallery.gid LIMIT 0, 1");
return get_bloginfo("wpurl") . "/". $imageDetails[0]->path ."/". $imageDetails[0]->filename;
}
}
}

Step 3 – Modify Index.php and Archive.php

Wherever you want to display thumbnails for your posts, add the below code – likely within the WordPress Loop. What this will do is grab the gallery ID you associated with each post. If a gallery ID is found, it will be used to call the function from step 2. If no gallery ID is found, it will default to using the normal Timthumb behavior. Note: The line that includes the call to Timthumb may need to be tweaked for your particular theme. What I'm showing is the line as it existed in the Mimbo theme.

$gallery_id = get_post_meta( $post->ID, 'gallery_id', true);
if( is_numeric($gallery_id) ){
$post_image = get_bloginfo('template_url') . '/scripts/timthumb.php?zc=1&w=90&h=90&src=' . getFirstImageFromNextgen($gallery_id);
$post_image = '<img alt="" src="' . $post_image . '" />';
} else {
$post_image = get_post_image (get_the_id(), '', '', '' . get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=90&h=90&src=');
}

And there you have it! Timthumb and Nextgen gallery integration in 5 minutes!