Use TimThumb to Add Thumbnail Images Using the First Image in the Post

I have been a fan of the TimThumb script for some time now. It can be used as an alternative to using WordPress Featured Images to display and automatically resize images.

Recently there has been quite a lot of activity in TimThumbville. A security vulnerability was discovered which allowed third parties to upload and execute PHP code in the TimThumb cache directory.

Following the news of the vulnerability, the current TimThumb developer, Ben Gillbanks has been working to update it via the Google Code Project.

Enter WordThumb

Another development since the vulnerability was discovered is that the developer who discovered it, Mark Maunder, did a complete rewrite of the script and named it WordThumb.

The Saga Continues

While I was actually writing this post, I discovered that The WordThumb project has now become TimThumb version 2.0, which makes more sense to me. We don’t need two scripts out there that do the exact same thing. So I would guess that the new 2.0 version of TimThumb has all the latest and greatest security enhancements and more.

How to Use TimThumb to add Thumbnails to Your Posts

What I like about the script is that is will resize images without having to re-upload the image, which is the case with WordPress Featured Images. I actually like both methods, but it depends on the site you’re working on as to which you will use.

If you have many posts with images, and you decide to add thumbnails to the posts on your home page, or maybe in the sidebar, then having to re-upload the images if you’re using WordPress Featured Images can be a problem.

So, what I’ve done in cases like this is to grab the first image in the post, then use TimThumb to resize the image and place it where I want.

How to Use the First Image in Your Posts with TimThumb

One little spin on using TimThumb is to have it automatically use the first image in your post. Now, keep in mind that TimThumb doesn’t have anything to do with this script I’m going to use to grab the first image, I’m just using it in conjunction with TimThumb for this purpose.

So, let’s say you want to add thumbnail images to the posts on your home page and you want to automatically resize them, and also use the first image in your post. I’m going to use some code I first discovered on the wprecipes.com blog which will grab the first image. Visit that site and grab the code, then paste it in your custom-functions.php file.

Now that we have the first image, let’s use TimThumb to display it at the desired size.

You will need to make sure you have installed TimThumb correctly. It’s really easy and there are instructions over on the TimThumb Project Homepage.

I will just add that you should save the file in a folder called “scripts” inside your Thesis custom folder. You should also create the two additional folders as explained in the instructions, called “cache” and “temp” and be sure you place them in the same folder as timthumb.php.

Now that you have it installed, paste this into your custom-functions.php file:

function thumb_images() {
global $post;
$img = '<img class="alignleft" src="' . THESIS_CUSTOM_FOLDER .'/scripts/timthumb.php?src='.catch_that_image($post).'&h=150&w=150&zc=1" alt="">';
echo $img; 
}

add_action('thesis_hook_before_headline','thumb_images');

Here’s what’s happening, and some points to note:

1. We are using the standard TimThumb syntax in the URL to resize and display the image, but we’re using the script that grabs the first image in the post and then passing that information to the TimThumb URL parameters.
2. You can change the width (w) and height (h) values to anything you want. Keep in mind too that in this code, the timthumb.php file is saved in a folder called “scripts” inside the Thesis custom folder.
3. I’m using the Thesis hook thesis_hook_before_headline to insert the image before the post headline.
4. You can use other Thesis hooks to place the image wherever you want.
5. I added the css class of alignleft which is already built into Thesis and which will float the image to the left. Again, you can change this class to anything you want.
6. Please note that this code is written to work with Thesis, but you can adapt it to work in your non-Thesis based WordPress site.

What’s really nice about TimThumb is that let’s say you decide to change the size of the thumbnails, then all you do it update the width and height values, re-upload your custom-functions.php file, and kablammo, the images are resized.

So that does it. You now have it set up so your images are getting automatically resized by TimThumb and it’s using the first image in your post.

I’ve provided some links below for additional reading.

• Grab the first image from the post
• TimThumb Project Homepage
• TimThumb on Google Code
• TimThumb Security Vulnerability Discovered.
• WordThumb Project Merges with TimThumb.

Tagged as: Images, thesis tips, web design