thumbnail-preview

Let’s say you want to show thumbnails in your blog’s front page. A lot of blogs do that now and it’s a good way of making the page look more alive.

The only problem though is that using custom fields can be complicated and time-wasting. This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.

This trick is done by mixing some wordpress hacks and a php script. The PHP script is Darren Hoyt’s timthumb.php, the hack is WpRecipe’s how to get the first post image.

Together, they’ll grab your image and resize it for you! Let’s get started.

1 – Get the TimThumb.php Script

Get the timthumb.php script and place it on your theme directory. You can either download it, or create a blank timthumb.php file on your theme directory, open the script here, copy, paste it into your timthumb.php file, then save it.

2 – Edit Functions.php

Open your theme’s functions.php file (Or create a file with that name if it doesn’t have one), then paste the code below into it. This will retrieve the URL for the first image in your post. The code written here is based on WpRecipe’s original post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

3 – The Thumbnail Code

This is the thumbnail code. This code has to be written inside the_loop. Since the most common use of thumbnail is to be shown beside the excerpt, in this tutorial we’ll paste this code above the_excerpt(); or the_content(); in index.php or home.php file.

1
2
3
4
5
<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1">
</a>
</div>

The code above will create a 150×150 pixel thumbnail. If you want to change the size of the thumbnail, just change the ‘w’ and ‘h’ parameters. For more info, read the timthumb post here.

4 – Add some CSS Rules

You can style the thumbnail in any way you like, for example, you might add the following to your style.css file:

1
2
.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

And the result would be something like this:

thumbnail-result

No more custom fields, no more uploading images purely for the thumbnails, no more pain. What do you think? Is the time saved worth it, or do you prefer to craft your thumbnails more carefully?

Enjoy this post? You should follow me on Twitter!