Automatic Thumbnail Image Resizing – The Easy Way

14.07.10 by Jerome in Tutorials

TimThumb is a free open source script that lets you automatically create thumbnails on the fly to a specific size. This script is commonly used by web developers making magazine style WordPress themes. Today I’m going to show you how to implement it into your theme in 5 easy steps.

Step 1

Download the TimThumb  script and save it in the root of  your website files. To keep things organised create a folder called scripts like the example below:

yourdomain.com/scripts/timthumb.php

Step 2

Open the timthumb.php file and around line 556 add your domain name to the list and save the file.

$allowedSites = array(
'flickr.com',
'picasa.com',
'blogger.com',
'wordpress.com',
'img.youtube.com',
'yourdomain.com'
);

Step 3

Under your WordPress theme open your functions.php file and add the code below and specify the size of your thumbnail $first_img.”&h=100&w=100:

//function to show image thumb
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)){ //Defines a default image
    $first_img = "";
  } else {
    $first_img = "<img class=\"postThumb\" src=\"/scripts/timthumb.php?src=".$first_img."&h=100&w=100&zc=1\" alt=\"\">";
  }
  return $first_img;
}

Step 4

Implement your thumbnail in your WordPress theme. Open your index.php file and inside the loop, just before your <?php the_excerpt(); ?> or <?php the_content(); ?> tag, add this code below:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo catch_that_image(); ?></a>

Step 5

Now let’s give it some styling. Open in your theme the style.css file and add the code below:

.postThumb{
    float:right;
    margin:0 0 10px 10px;
    padding:5px;
    background-color:#f2f2f2; 
    border:1px solid #ccc;
}

That’s it. I hope you enjoyed this quick tutorial!

Related posts:

free, resizing, script, thumbnail