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

Related posts:

1. Better Display Of Images In your WordPress Post Excerpts Many Wordpress users have problems displaying images in their WordPress blog if they decide to use post excerpts instead of full post in their home page. There are also many solutions and plugins available to solve this problem. In my previous post where I discussed inserting images in your...
2. Insert Thumbnail Images In Your Homepage Post Excerpts Under normal circumstances, if you are not using a theme that comes with the the Customs Filed functions written in, you cannot insert images to your homepage excerpts. Many bloggers likes to show just a small excerpt of their post in the front page by inserting the “read more” command...
3. Wrapping Text Around Your Thumbnail Images WordPress 2.9 latest feature that lets users post thumbnail images in their post excerpts has certain limitations which makes me refrain from using this feature. This new feature however will be great if you are planning to use your Theme like a magazine style layout with thumbnail images fixed on...
4. WordPress 2.9 Image Thumbnails And New Features Just logged in into my Admin panel and saw that WordPress 2.9 is available for download. Upgraded using the most convenient method, that is via the automatic upgrade. Took less than 5 seconds for the upgrade to complete. Read more on WordPress 2.9 Image Thumbnails And New Features… ...
5. Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...

Tagged as: Blogging, Free WordPress Themes, WordPress Templates, WordPress Theme Modification, Wordpress Themes, Wordpress Tips