Add Thumbnails Automatically with Home Page Excerpt

Adding a thumbnail to the post excerpt in your home page is not the tough one. You can add a thumbnail in your homepage by defining a custom key in the index.php and assigning an image at that key from WordPress admin section. But this is not so handy as it requires you to maintain the custom key for each post.

But there is an automatic way to add first image of each post as thumbnail to the home page excerpt. Let’s see how to automatically grab the first image as post excerpt thumbnail in the home page.

Related topic: How To Build A Custom Archive Page Or Site Map For Your WordPress Blog.

The procedure

We shall describe the procedure in three steps.

1. Defining a function to grab the first image from each post.

Open your theme function.php file with note pad and add the following code:

<?php
// retrieve the first image from the post
function getImage($num) {
global $geek;
$geek = 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; }
else {echo bloginfo('template_url')."/images/default-image.png";}
$geek = 0;
}
?>

Save the function.php. I recommend to keep a backup of your function.php file before editing it. If  any post has no images then it will show an image predefined by you. In this code we defined the default image as template_url/images/default-image.php.

By the above piece of code you’ve successfully arrange the process of grabbing the first image as post thumb nail.

2. Resizing the image retrieved from the post

The image size may vary in post to post. So We shall resize the image to show as thumbnail in the home page. For this purpose we shall use TimThumb script. You can get the code from GoogleCode. Now copy the whole code and paste it in a notepad file. Now save the file as timthumb.php at your theme directory (where the index.php file resides).

3. Adding the script in the index.php file to show the excerpt thumbnail.

Go to your theme folder and open the index.php file. And find out the line

<?php the_excerpt(); ?>

Add the following code before that.

<div class="home_thumb">
<a title="<?php the_title_attribute('before=Permalink para: '); ?>" href="<?php the_permalink(); ?>">
<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1&q=70" alt="" />
</a></div>

Save index.php. You can change the size of the thumbnail to be created by changing the value of &W and &h in the above code. Note:By default, in home page, the excerpt function does not present. So you can add that removing the function like “the_content(__(Read more…))”.

That’s all the coding portion to show the thumbnail automatically with the home page excerpt. Now add some CSS rule in your theme style sheet.

As example:

.home_thumb a:link {display:block; float:left; padding:6px; background:#eee; width:160px; height:160px; margin:6px 6px 0 0;} .home_thumb a:hover{background:#C4C4C4;}

You are done! No more uploading images especially for thumbnails.Thanks Kevin