Display Thumbnail Images In Post Excerpts

Written by Costa on October 26, 2009 - 15 Comments
Categories: Theme Modification Tips

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

Advertisements

a67af940ec4a66a4bf7c78d200f240b4

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 557 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.

Users who found this page were searching for:

wordpress theme display thumbnail on front page
wordpress thumb excerpt -plugin
wordpress post float thumbnail no wrap text
how to manually do excerpts and thumbnails
display post image next to excerpt
hot to get thumbnail images to show in Wordpress

15 Responses to “Display Thumbnail Images In Post Excerpts”

Comments

Read below or add a comment...

Sushine

October 27, 2009 at 7:42 am

Hi Costa,

I’m following along with your tips quite nicely. Considering I don’t have a programming bone to speak of:)

I was wondering if you might be able to provide a little direction with respect to Court’s keyword sniper theme.

I would like to accomplish two things in particular.

1. Change the header color from all black to a color of my choice.

2. Change the color of the header text from blue to a color of my choice.

Any help you can provide would be so greatly appreciated. When I get my 2nd google adsense check next month, I’d be glad to send some love your way.

Kindly,

Sunshine

Reply
- Costa
  
  October 27, 2009 at 8:45 am
  
  Hi Sunshine,
  
  Please refer to an old post of mine where I discussed this issue.
  
  http://blogigs.com/a-dateless-wordpress-theme-for-niche-blogging/
  
  Reply
lakshya

December 9, 2009 at 2:12 pm

Hi,
could you pls tell what is meant by image url ?Iam struggling to have the images seen on homepage,I am struck up at this point.

Reply
Italo

January 24, 2010 at 4:30 am

Hi. Any idea hot to make the thumbnail clickable to go to the post (just like the title)?

Thanks

Reply
Italo

January 24, 2010 at 5:55 am

Sorry I meant “HOW to make”

Reply
- Costa
  
  January 24, 2010 at 8:31 am
  
  Manually, just replace the image link with your post link.
  
  There are some plugins to do that automatically but you have to look it up yourself. I never bothered because I don’t see the need for it.
  
  Some Themes like the Thesis, does this by default.
  
  Reply
bsteck

February 23, 2010 at 1:32 am

hey there,
im using this on pages and i implemented it as you instructed but my images aren’t thumbnails they’re always full sized..

another thing is, on sites that have no custom fields with images in them, theres a broken pic icon showing.. any way to work arround that?

tia bsteck

Reply
- Costa
  
  February 23, 2010 at 9:04 am
  
  First, I am confused when you say you are using it in pages. Do you mean you have a homepage that display all your pages as excerpts? Else why do you need thumbnails for pages?
  
  Frankly, I have never taught of nor have I learned how to display pages as excerpts in the homepage. That would be quite cool of we are using our blog as a CMS where we have individual pages displaying different information.
  
  Under normal circumstances, we only display excerpts to our posts in our front page and the thumbnails will be displayed with the excerpts to make it more attractive.
  
  If you do that, then the thumbnails have to be re-sized manually and uploaded individually as a different image.
  
  Anyway, this tip is already out-dated with the release of WP 2.9. You can now post thumbnails automatically of your Theme is fully 2.9 compatible.
  
  Your second question, I am also confused but I assume you mean on post pages and not sites. If you do not want any images, do not fill in the custom field when you post. If the custom filed is empty, then there should not be any images appearing.
  
  Reply
menj

February 23, 2010 at 11:09 pm

This is a useful post, thank you Costa!

Reply