Recently, a client asked us to do some upgrade work on their sites, upgrading their WordPress installations. One of the things that had been keeping them from upgrading had been their use of the post-thumb plug-in that no longer worked properly in WordPress 2.7. (Note: following that link will lead you to a site that has been labeled full of Malware by Google!)

This particular plugin attempted to find the first image in any post, and generate a thumbnail for use on an index or archive page. If you’re running an online news site, this is a pretty handy way to kee your homepage graphical: Plop an image in the post, and it appears magically on the front page. The editors definitely wanted to retain the ease of workflow, so implementing a process to manually select a thumbnail was not an option. Instead, we came up with a relatively simple solution that got built right into the site theme.

Here is the function, with some explanation below:

/*
replacement function for the_thumb, as found in the post-thumb plugin
searches a pots for images, gets the image id, then retrives info about it, displays the thumb

args:
$size, should be "thumbnail" or "medium"
*/
function cim_the_thumb($size="thumbnail"){
	global $post;
	preg_match('/<img(.*?)src=["'."']".'(.*?)["'."']".'(.*?)\/\>/i', $post->post_content, $matches);  //get all the images

	if (!$matches)  //if no images
		return null;

	ereg('wp-image-([0-9]+)',$matches[0],$regs);  //find the string "wp-image-nnn" in the image, where nnn is the image id

	if (!$regs){
		echo "<!-- there was an error getting an image for this post -->\n";
		return null;
	}

	if (is_numeric($regs[1])){  //check to make sure the ID we got is numeric (it should be!)

		//add classes specifically for the CIM sites
		if ($size =="medium"){
			$imgClass="img-holder";
		} elseif ($size == "thumbnail"){
			$imgClass = "smallthumb";
		}

		$image = wp_get_attachment_image_src($regs[1], $size, false);  //get image sizes
		if ( $image ) {
			list($src, $width, $height) = $image;
			echo '<a href="'.get_permalink($post->ID).'" title="'.get_the_title($post->ID).'">';
			echo '<img src="'.attribute_escape($src).'" class="'.$imgClass.' attachment-'.attribute_escape($size).'" alt="'.get_the_title($post->ID).'" />';
			echo "</a>\n";
		}
	} else {
		echo "<!-- there was an error getting an image for this post -->\n";
		return null;
	}
}

Here’s how this works:
This function should be called in the loop wherever an image is needed, such as an an index or archive page. A regular expression searches the body of the post for the first occurrence of an image (line 10) and gets the CSS ID of that image that WordPress applies. The author of the post must have uploaded the image through WordPress for this to work. The function then uses the image ID to get the appropriate image details using the wp_get_attachment_image_src function. We then spit out a link and img tag for the post.

In order for this to work, WordPress must be configured to have appropriate media sizes set up. You will want the thumbnail size set to be the size of the thumbnail your theme uses and the medium size set to match a larger size, if necessary. In the case of our work for the CIM sites, their themes had established sizes of 106 px and 273px, so we used 150px and 300px, respectively, and let the CSS classes applied to each size shrink the image.

An added benefit of our upgrades to the CIM sites was a substantial decrease in the bandwidth used on the pages. Using the post-thumb plug-in, the full-size image was being served, either due to being broken or misconfigured. Using our new setup, we serve an appropriate sized image. Typical bandwidth used on the home page dropped from around 2mb to around 600k.

Post a Comment

2 Comments