Get-the-Image, TimThumb, and WordPress 3.0 Blog Networks

Posted by Adam on July 26, 2010 in General, Wordpress | 3 comments

I wanted a way to allow my theme users to create posts, upload an image for the post, and have that image be used all over the place without the user having to specify the image as the post thumbnail or use any other custom fields.

• Justin Tadlock’s Get-the-Image plugin works nicely for digging images out of posts.
• Timthumb.php by McDaniels, Hoyt, and Gillbanks has been the standard in image resizing for a while.

Getting these two scripts to play nice wasn’t too big a challenge thanks to a helpful little post by Morten Skogly over at http://pappmaskin.no, where he shows how get-the-image can be configured to output an array containing the image url you need, then feeding that url into timthumb.

Life was good. Until I tried this method on a 3.0 blog network (mu), and ran head-first into timthumb’s pathing problems with MU formatted urls.

Ben Gillbank’s post on the subject helped me understand the problem, but the fix wasn’t made apparent to me via his fix. Luckily, I stumbled on a post by another wordpress aficionado and Thematic contributor Devin Price, here, that gave me the final piece of the puzzle I needed to put this issue to bed.

First we need a function to rewrite our image url from a relative (mu) path to the absolute path that timthumb can work with. The following is hanging out in my functions.php:

function get_mu_image_path ($img_src) {
    global $blog_id;
  if (isset($blog_id) && $blog_id > 0) {
    $imageParts = explode('/files/', $img_src);
    if (isset($imageParts[1])) {
      $img_src = '/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
    }
  }
  return $img_src;
}

I have shamelessly ripped this from Devin Price, who in turn altered Ben’s original fix to suit his purposes.

Next we need to use get-the-image to, well, get the image, take that image (path) and run it through this function to make it timthumb-able. With that out of the way, we’re free to take our image url (as a variable) and run it through timthumb!

<?php
//first crank up get-the-image, and ask for it's output as an array
if ( function_exists( 'get_the_image' ) )      
$get_the_image_as_array_feature = get_the_image( array( 'image_scan' => true, 
'format' => 'array','default_size' => 'full' ) );
//take what we want, the url, and turn it into a variable we can play with
$the_img_src = $get_the_image_as_array_feature[url];
//scrub the url path
if(!empty($the_img_src)) {
$the_img_src = get_mu_image_path($the_img_src);?>
<div class="postacular"><!--pass our image url through timthumb
<a href="<?php echo $get_the_image_as_array_feature[link]; ?> ">
<img src="<?php bloginfo('stylesheet_directory') ?>
/includes/plugins/timthumb.php?w=480&h=274&zc=1&src=<?php echo $the_img_src; ?> " 
alt="<?php echo $get_the_image_as_array_feature[alt]; ?>"/></a>
</div>
<?php }
?>

Couple things to note:

• this snippet is being used directly in a page template loop inside a child-theme (hence the “stylesheet_directory”)
• I’m using additional get-the-image variables for things like the image alt tag and link url.
• please note the custom path to timthumb.php

This snippet can be turned into a nice content filter for functions.php without much hair-pulling, and i’ll most likely do this too, and I’ll try to remember to post it here.

As a final word, this is unfortunately not a cut-n-paste post. If you arn’t familiar with get-the-image and timthumb, you gotta read their instruction manuals, what I stuck here is a basic example of how to use it, but there’s a few switches and options to play with in order to suit your needs. Consider this “proof-of-concept” for helping to make wordpress posting more accessible for those of us less technically inclined.