Most of us want a way to call the first image of a post, regardless if our site hosts the image or not, and set it as a thumbnail, yes?

There are actually plugins that do this job if you hate sifting through the code such as Thumbnails for Excerpts and Special Recent Posts.

TFE displays the first image as thumbnail regardless of whether you host it or not, the problem is the way it handles the size, wherein it resizes it to a proportion mainly based on either width or height. The result of which is a set of thumbnails without uniformity.

SRP, on the other hand, simply pulls out only the images you host and crops it to the size you specify.

Both have the option to set a default image but lack a couple of things. In this case, we mainly wanted something that:

1. Calls a featured image as thumbnail if set,
2. Calls the first image (even external) if no featured image is set, and
3. Displays it cropped in whatever size we want creating uniformity

TimThumb does this.

First off, download the TimThumb script here and save it in a folder in your theme’s folder.

Please note that there have been security vulnerabilities and flaws of the old TimThumb script. The link I just gave you is an updated version – TimThumb2.0. TimThumbv1 had some vulnerabilities and Mark Maunder, after finding the flaws, decided to write an improved version of it known as WordThumb, which later became TimThumb2.0.

Next, paste this code in your functions.php

add_image_size( 'featured-thumbnail', 240, 100, true );

// Figure out which image to be shown
function featured_image_thumb() {
global $post, $posts;
// If a featured image has been set, use the
// featured-thumbnail size that was set above with the
// class of 'optional_img_class'
if (has_post_thumbnail() ) {
the_post_thumbnail('featured-thumbnail',
array('class' => 'optional_img_class') );
}
// If a featured image is not set, get the first image in
// the post content
else {
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// Define a default fallback image in case a featured image
// is not set and there are no images in the post content
if(empty($first_img)){
$first_img = get_bloginfo("template_url").'/images/default.jpg';
}

// Generate the HTML code to display the image and resize
// the image with timthumb.php
return '<img class="optional_img_class" src="'. get_bloginfo("template_url") . '/folder/timthumb.php?src=' . $first_img .'&w=240&h=100" alt="" />';
}
}

This utilizes the script you just downloaded and does its algorithm and logic to call the featured image, or the first image if there’s none and uses that image as the thumbnail.

Note 240 and 100, which are set as the width and height respectively at the begining of the code and just at the end. Be sure to change the “/folder/timthumb.php” to the proper path. Those are probably the only thing you need to change in this one.

Finally, go to your index.php and place this code where you want the thumbnail placed, probably somewhere above the_excerpt or the_content

This calls the the function via featured_image_thumb() and displays the thumbnail respectively.

Now I encountered a simple problem, wherein TimThumb works on my local server (xampp) but not when I uploaded it online. Turns out you have to CHMOD 755 the folder where TimThumb is placed. Others suggest create 2 folders named cache and temp which should be CHMODed to 755 as well.

Also, make sure you have added in your functions.php the ability to post the featured thumbnail. To check if you have this feature available, go to any post in your wordpress admin panel. Check the lower right hand of the page.

It should have a function which goes “Set featured image.” If you don’t see one, add this line in functions.php

add_theme_support( 'post-thumbnails' );

As a security measure, you may want to download this TimThumb Vulnerability Scanner plugin which simply scans other plugins which may be using timthumb, and if they’re up to date. From there, you can update them with a single click.

Finally, be sure to make a default image appropriately named as default.jpg in your images folder should your post have no image on it.

Be safe guys! If you have wordpress hacking problems or vulnerability issues, I suggest you visit Mark Maunder’s blog, he offers free insights and assessments.

Good luck!

Credits: Mark Maunder, Ben Gillbanks, BlogJunkie