Display Thumbnail Images In Post Excerpts

Maybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control the images to be displayed and the post the images to be displayed in. Doing it manually lets you have full control on how, where and what images you want to display in your post excerpts.

However, to display thumbnails manually, there will be an added step when you are posting your articles and there will be a line of extra codes to be inserted in your Index php file. First, open your Index php, look for these code:

<?php while (have_posts()) : the_post(); ?>

In between there will be other lines before you see this closing of the loop

<?php endwhile; ?>

Anywhere in between these 2 lines, insert this line:

<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" />

Now you have a call to bring up the Thumbnail. Next, before publishing your post, get ready your Thumbnail Image of your preferred size. Preferably, it should not be too big. 150 pixels by 150 pixels is perfect in my opinion but of course it is up to you. Upload your image. Do not ‘Insert’. Copy the Image Url instead.

After writing your post, scroll down to the “Custom Filed” option. Under, “Add New Custom Filed” click on ‘Enter New’. Type in ‘Thumbnail’ Remember this is case sensitive. You have used a capital “T” in your codes, so the “T” must also be in capital letter here. Inside the ‘Value’ paste the image URL that you have copied just now. Click “Add Custom Field”

One you have done this, you would have created a new “Custom Field” called “Thumbnail” and the next time you want to insert any Thumbnails into any post, you can re-use that “Custom Field” again and again with different images. Publish your post and the Thumbnail Image should appear in your Front Page, but wait, it is not what you have seen in other blogs. They have their text wrapping their images while yours is floating freely on the top of your text excerpt. To overcome this, you have to style your Thumbnail

Open your stylesheet, create a new div class. Let’s simply call it Thumbnail and you have chosen to use 150 pixel images. In your Stylesheet the styling codes will look like this:

.Thumbnail { display: block; width: 150; height: 150px; float: left; margin: 0 5px 0 0; }

Your image will be floating to the left with text wrapping round it. If you want it to float right, just change the word and make the margin to 0 0 0 5px.

Go back to your Index php and wrap the line of codes that you have inserted in the first step within this new ‘class’ like this:

<div class="Thumbnail"><img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" /></div>

Now your Thumbnail images will look much better within your homepage post excerpts