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.

The Minnesota Independent.

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.

WordPress Media Settings.

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.

The only problem is that as of this moment, it doesn’t work with pages, only posts. And if you’re a Wordpress Hacker like we are, that’s a serious bummer. However, word has appeared on the plugin page that a new version is in the pipes and it’ll support Pages! (Ironically, when the plugin is downloaded, the folder is named “fresh page”.) Soon WordPress can be used as a serious CMS.

Of course, using WordPress as a serious CMS leads to a whole series of other questions, but that is a topic for another day.

Well, we’ve still got plenty of work and projects, but we were able to carve out a little time and throw together some images and WordPress code to put together this site. It’s not fancy, but it does let us update our work much more easily and put together an occasional blog post. We don’t plan on posting very often, but we do promise to update the site when we complete new projects. In the meantime, take a look at all the lovely projects we’ve completed that no one ever knew about.

Cheers.