Automatic Thumbnail Image Resizing – The Easy Way

Close up of lights
Photo by spemone on Pexels

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:

Step 2

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

$allowedSites = array(

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 = '';
  $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:

    margin:0 0 10px 10px;
    border:1px solid #ccc;

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


Please enter your comment!
Please enter your name here