In this tutorial, we will discuss the different methods to generate thumbnails and display them elegantly alongside your posts. This tutorial is meant to be used for the WordPress Blogging Platform. We will do it in the timthumb, custom field and in the WordPress Way

Usning the Timthumb thumbnail Generator

Timthumb is a thumbnail Generator script written in PHP and it requires the GD library. You can get the timthumb script from Darren Hoyt at Google Code . First of all lets thank Darren for this magical script.

How Stuff Works?

For a neat look, we would be displaying post thumbnails along with post summarieson your wordpress home page and other archive pages. Goto the DEMO PAGE and see how it looks on WordPress’s default Kubrick Theme.Now lets see how this works.We have two methods for selecting the image used for generating the post thumbnail.

1. Specifying the Image from which the thumbnail should be generated(We have to do it for each post by using a WordPress Custom Field)

2. By automatically using the first image in the post for generating the post thumbnail(thumbnail will be generated automatically from the first image in the post)

Our Plan

Here we will use a combination of the above two methods. If the post has a Custom Image field value then we will use that specified image for generating the thumbnail .If it doesn’t have any image url specified in the custom field, then we will use the first image in the post, and if the post doesn’t have any images and it doesn’t have an image URL in the custom field, then we wont use the post thumbnail.This is a very simple Code. So everyone would be able to figure out how it works. First of all we have to get the timthumb script on your server.Create a folder named thumbnails in your wp-content folder . Upload the timthumb.php script into this folder. Make a subfolder named cache within the wp-content/thumbnails folder and change the permissions of this cache folder to 777.

Before  we start lets get familiar with some WordPress Template tags.

Template Tags

1.<?php the_content();  ?> – This template tag outputs the entire wordpress post.

2.<?php the_excerpt(); ?> – This template tag outputs the post summary.If you haven’t manually added  a post excerpt,then wordpress will automatically generate one for you.So this template tag can be used to display the post summary.

Ok lets do it.

We will start with the WordPress home page. So edit your theme’s index.php file. You would probably see something similar to

<?php the_content();  ?>

. We will have to replace this with

<?php the_excerpt(); ?> .

Now we are half way through. Your wordpress home page will now be displaying post summaries instead of showing the entire post.Now we have to display the thumbnails alongside the post summary.For this you will have to add the thumbnail generation(+display) code just above

<?php the_excerpt(); ?>

Code For Thumbnail Generation + Display

  <?php  $custom_values = get_post_custom_values("thumb_source");
   if (isset($custom_values[0]))  $image_source= $custom_values[0];
  else
  {$id =$post->ID;
  $the_content =$wpdb->get_var("SELECT post_content FROM   $wpdb->posts WHERE ID = $id");
  $pattern = '!<img.*?src="(.*?)"!';
  preg_match_all($pattern, $the_content, $matches);
  $image_source = $matches['1'][0];
  }if (isset($image_source))
  {?>
  <a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="http://www.yourblog.com/wp-content/thumbnails/timthumb.php?src=<?php echo $image_source;?>&w=180&h=180&zc=1&q=85"  alt="<?php the_title();?>"></a>
  <?php }?>

Ok what does this Code do?

It tries to fetch the custom image field ,  thumb_source (you can use any custom field name.In this tutorial we will use thumb_source as our custom field name) . If you have added a custom field thumb_source with the image URL, then the code will use that particular  image for thumbnail generation.If it is unable to find the custom field, then it will scan the post to see if it has any images.If it has got any images, then it will use the first image in the post for generating the thumbnail.If the post doesn’t have any image and it doesn’t have a custom field image, then the script wont do anything.In the code you should replace http://www.yourblog.com with your wordpress blog’s URL. You can also alter the highlighted values in the code.

w=180 the width of the generated thumbnail

h=180 the height of the thumbnail

zc=1 this will crop the image.if you set it to 0, it will resize instead.

q=85 this determines the quality of the generated thumbnail. maximum value is 100

Now you should see the thumbnail image and the post summary on the WordPress home page. The thumbnail image is not styled properly.This is our next task.

Styling the The Thumbnail Image

Now we have to edit our theme’s stylesheet file(style.css) and add the following styles there

.cute-post-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

You can surely alter the styles and make it even more beautiful and appealing .

Now we are finished with the wordpress home page.Now repeat the same process for the wordpress archive pages(tag,category search and other archives) by editing archives.php,search.php etc  in a similar manner.

Extra Notes

1.Timthumb can generate thumbnails of internal images only.So if you are using images hosted on some other sites,then timthumb wont be able to generate a thumbnail for you.

2.If you don’t want to use timthumb, you can make thumbnails by your own and then upload it somewhere and add the image URL as custom field.In this case you will have to modify the thumbnail code to

<?php  $custom_values = get_post_custom_values("thumb_source");
if (isset($custom_values[0]))  {$image_source= $custom_values[0];?>
<a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="<?php echo $image_source;?>"  alt="<?php the_title();?>"></a>
<?php }?>

Doing it in the WordPress Way

As krembo99 has suggested in the comment,we can make use of the default wordpress functions to grab the thumbnails.To do this First of all goto your Wodpress Admin Panel > Settings > Media and set the thumbnail size to the size that you want.

Now use this Thumbnail generation Code instead

<?php
  $attachments = get_children( array('post_parent'  => get_the_ID(),
                'post_type'      => 'attachment',
                'numberposts'    => 1, // show all -1
                'post_status'    => 'inherit',
                'post_mime_type' => 'image',
                'order'          => 'ASC',
                'orderby'        => 'menu_order ASC'
                ) );

if($attachments)
{foreach ( $attachments as $attachment_id => $attachment ) {?>
    <a href="<?php the_permalink();?>"><?php echo wp_get_attachment_image( $attachment_id,'thumbnail' );?></a>;
<?php }}?>

Now here the image is assigned a class attachment-thumbnail . So we will have to alter the styles to

.attachment-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

This method will use the thumbnail version of the first image in your post.

Doing in on the New Beta Version Of WordPress using WordPress Template Tags

Wordprerss 2.9, which is now in beta comes with some additional template tags.So the code becomes lighter

<?php if ( has_post_image() ) : ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_image('thumbnail'); ?></a>
<?php endif; ?>

If you require help with the following code, post a comment and I will respond to your inquiry .