How to Insert Post Thumbnails for Your Posts

December 1st, 2007 • Related • Filed Under

If you look on the home page, archive pages and search results page of this site, you’ll notice that all the posts have a thumbnail image next to the post excerpt. By default, the theme will display the photo you see to the right as the post thumbnail. If you’d like to use a different default post thumbnail, just choose a photo in .gif format, cut it to 100px by 100px, name it def-thumb.gif and upload it to the theme’s images folder.

If you’d like to add your own post thumbnails for any or all of your posts, which I recommend, the process is quite simple.

Step 1 – Select a Photo and Cut it to the Proper Size

Ideally, the post thumbnail image should be 100px by 100px. If it is a different size, I added a style element to the photo that will automatically convert it to 100×100. If that happens, however, it may negatively impact the image’s quality, so your should try to make your post thumbnails exactly 100px by 100px .

Step 2 – Upload Your Photo

You can either upload your photo via FTP or via the standard Wordpress image upload function on the Write Post page; just below your Publish button. Once your photo is uploaded, you’ll need the file path for the photo’s location.

For example, if you upload your photo to a subdirectory (of your Wordpress site) named “images” … the file path would be something like: http://www.mysite.com/images/filename.jpg.

If you upload your photo via the Write Post image uploader, the file path will be something like: http://www.mysite.com/wp-content/uploads/2007/12/filename.jpg. To get the actual file path, just go ahead and send the image to your post editor. When you do that, Wordpress will produce an image tag that looks something like this: <img src='http://mysite.com/wp-content/uploads/2007/11/filename.jpg' alt='feature1.gif' />

In this case, the only part of that tag you need is: http://mysite.com/wp-content/uploads/2007/11/filename.jpg

Once you have the image path, just be sure to delete the image tag from your post editor box.

Step 3 – Create a Custom Field for Your Thumbnail Image

If you scroll to the bottom of your Write Post page, you’ll see an area near the bottom called “Custom Fields.” (You may have to click on the white + sign to the far right to expand the custom fields area).

In the field marked “Key,” you’ll need to enter: post_thumbnail. In the field marked “Value,” you’ll need to enter the file path for your image. Then just click the “Add Custom Field” button. Finally, continue with your post, and when you’re ready, click the Publish button.

As I said above, your thumbnail image will appear on each page that the post appears, except the single post page.

Popularity: 37% [?]

There Are 46 Responses So Far. »

Comment by Blaine Moore on 3 December 2007:

Another option for getting the image URL if you upload it through the WordPress admin screens is to click on “browse” or “browse all” (in the uploads box), click on the image that you want to use as a thumbnail, click on the edit button, and then copy and paste what it says in the URL box.

That method might be a little easier and more intuitive for somebody that isn’t as comfortable with HTML.
Comment by David on 4 December 2007:

I can tell alot of work went into the designing of this template. Great JOB!
Comment by David S on 8 December 2007:

If you wanted to change things so the post thumbnails on the home page were rectangles instead of squares. Still consistently sized/portrait orientation. Would that be problematic?
A real beauty here, I keep coming back to look at it and figure out how to put it to use.
Thanks
Comment by Mig on 11 December 2007:

Hello there. Customizing mine now. Great job. Wondering if there is an easy way to associate thumbnails by category instead of per single post. Would be nice for each post from a certain category to automatically display the thumbnail associated with that category.

Saludos, Mig

http://theotherrussia.org
Comment by Steven Aitchison on 22 December 2007:

Michael

I absolutely love this theme. It is extremely intuitive, it’s easy to get around and has a host of features.

My site was cracked a few days ago so I had to install a new version of Wordpress and look around for another theme as the old one was not compatible with the latest version of Wordpress. all I can say is, thank you to the hacker: I uploaded a newer, more stable version of Wordpress, and found this fantastic theme.

Thank You

Steve
Comment by Darrell on 11 January 2008:

This has to be the easiest out-of-the-box theme that I have ever worked with! When I had a question, there is a tutorial to back it up. My hat is off to you Michael, a FABULOUS job well done and the theme is beyond affordable To handcode a custom website with the same features would have easily ran over a grand.
Thanks!!
Comment by Quest on 15 January 2008:

Hey Michael,

I was wondering how to post my own customized images instead of just the post thumbnails? Any help you could provide would be excellent. Thanks so much.
Comment by Erickson on 16 January 2008:

Is there a way to add pics within the articles that are not categorized featured. I know how to create the thumbnails for the front page, but I’m looking for an image to be included in the post.

I upload a pic and go to align it (right, left, center and so on) then add border (or not) and vertical horizontal space and when I go to insert it the photo disappears in the Visual editor, but I can still see the code in the Code editor….

Does this make sense?
Comment by cb on 15 February 2008:

I would actually like to know how to remove the default image all together, yet let articles that actually have a photo show up. Any thoughts?
Comment by Chris on 18 February 2008:

Hi,
I am using WP-o-Matic to automatically pull news facts from sites such as CNN on my site. Those posts get published in separate categories. Is there a way to automatically insert a post thumbnail in those posts?

Thanks,
Chris
Comment by George on 6 March 2008:

Can you please help me… I’m trying to remove “Announcements” in the Feature Articles on Home Page Template? Thank you again. George
Comment by jim on 6 March 2008:

Hi, I am using this as a family blog, can I fix it so that each of the six family members has a different thumbnail on their posts.

Thanks in anticipation
Comment by nick on 9 March 2008:

Hello.. woderful website, great template! Thanks for all your help!

That being said, I have another question. Everybody that signs up is an author. When he or she writes an article/story, how can I make it so their post thumbnail is automatically appointed to his or her gravatar? Any ideas, folks?

Thanks!
Nick
Comment by Allen on 14 March 2008:

I do not like the way the images are resized. It seems troublesome for me to make my image 100 by 100 and then load up the same image for a picture to appear in my post. I do reviews so I need the full size image in my post.

I found an interesting tool here http://shiftingpixel.com/2008/03/03/smart-image-resizer/

It is creative commons and free to use. I wonder if Michael could incorperate this into his wordpress themes. Maybe it would work and maybe it would not. The nice thing about it is it caches the pictures which seems like a great idea.
Comment by Michael Pollock on 15 March 2008:

Hi Allen:

Thanks for the suggestion. For various reasons, I don’t like incorporating third-party scripts into my themes. You’re welocme to incorporate it yourself, however.

Best – Michael D. Pollock
—————————————
Solostream Web Studio
http://www.solostream.com
Comment by Adam on 17 March 2008:

hey,

I have a problem with my site. the posts on the front page don’t quite look right!

site is: http://www.euro-muslim.net/English

any help?
Comment by Nick on 20 March 2008:

Hmmm… I did exactly that and no luck. Picture is in /images/ directory and I call for it, it’s the right filename and 100px by 100px.. nothing is showing up. Any ideas?

Thanks,
Nick!
Comment by Alex on 31 March 2008:

Hi Michael, I have exactly the same issue as Nick. I’m running WP2.5, and the thumbnails are not showing.

I have followed the tutorial correctly, adding “post_thumbnail” to “Key” and added the file path to the image to “value” but the thumbnails are not loading.

Thanks
Alex
Comment by Chris Baskind on 3 April 2008:

I haven’t experimented with it yet, but WP 2.5 new image capabilities include the creation of small and medium thumbnails of a given size. My guess is this could be used to automatically create your thumb and feature images, should you not want to do this manually.

The new media library makes it easy to grab an image’s URL without crudely pasting it into a text field. This really speeds the handling of Michael’s template.

Not sure what’s up with the thumbnail problems reported here — unless, of course, your MySQL tables were somehow damaged upgrading from 2.3 to 2.5. My thumbs seem to be working OK. Same with the gravatars.
Comment by Al on 8 April 2008:

I love the Theme but can anyone show me how to show more post on my Home page? Only Three show up. Thanks!
Comment by Dave on 11 April 2008:

Michael, thank you for the other information, now a new question. I wanted to use FeedFlare from Feedburner to post a subscribe to RSS feed at the bottom of my posts but using their WP instructions was unable to figure how to do it. They suggested pasting their script into the Main Index Template above the line .
Any suggestions?
Comment by Danny Graham on 13 April 2008:

Hi Michael.
Just want to say what a great Theme!! Recently bought the single license and im slowly adapting for my needs.. here blog.solorecordsibiza.com

1 question is there a way that i can add the Thumbnails via my editor.. Im using Windows Live Writer, just think it will save me time if possible.
Thanks
Danny
Comment by Going Like Sixty on 23 April 2008:

@Chris (and Mike): WordPress 2.5 will accomplish the creation of thumbnails. The procedure is kind clunky, but it is still easier than having to deal with using another app to resize them.
Comment by Karl K on 24 April 2008:

I wonder if it would be easier to use phpthumb to resize & cache the photos rather than having to physically resize all the photos?
Comment by Gunter on 2 May 2008:

I had to try this gravatar thingy …
Comment by Antonio Altamirano on 5 May 2008:

Hi Michael,

Thanks for all your previous replies to my questions.

Can you tell me how to add a caption to the image in the post? I need to give credits for the images but don’t know how to add a caption at the bottom to do that.

Thanks,
Antonio
Comment by Michael Pollock on 5 May 2008:

>>>>> Can you tell me how to add a caption to the image in the post? I need to give credits for the images but don’t know how to add a caption at the bottom to do that.

Antonio:

First of all, your site looks great. Secondly, there’s no real easy way of doing captions aside from a plugin, such as this one: http://wordpress.org/extend/plugins/image-caption/

Best – Michael
Comment by Lewis on 30 May 2008:

Hey Micheal!

Where can I go to edit the length of the extract shown on the homepage? I want most or all of the post showing instead of just a small extract. And I’m lost as to how to do it!

Thanks Michael

Lewis
Comment by Pete on 30 June 2008:

Lewis, It’s changeable with a plugin….

See Here

It’s a little technical but you can figure it out.
Comment by Lewis on 2 July 2008:

Just to let everyone know (and thanks Pete!) that to change the extract shown on the homepage to show the entire blog post instead, just go to the index.php file you’re using for your homepage and change every where you see the word ‘excerpt’ to ‘content’. It should be there twice.

Michael replied to my comment in an email, but I thought I’d put it here in case anyone else wanted to know.

Also, where Pete is linking to above seems like a good option too.
Comment by Chris Denham on 31 July 2008:

Is it possible to have different default thumbnails designated for each category?
Comment by Hans on 2 August 2008:

Hi Michael,

Just purchased your excellent theme. Have a couple of questions.

Is it possible to remove or not use the post thumbnails?

Somewhere here I spotted a means of preventing ‘Features’ from showing up on the menu bar, can this be done for additional categories as well?

Thanks
Hans

Comment by Michael Pollock on 4 August 2008:

>>>>> Is it possible to have different default thumbnails designated for each category?

i assume you want to replace the built-in post thumbnails … well chris, just about anything is possible. is it simple though? not really. there is a plugin out there that simplifies it a bit.

see here:
http://www.category-icons.com/2008/03/how-to-display-icons-in-posts/

if you need help placing the code in the template, you’d want to replace this block of code in the Main Index Template, Archive template and Search Results template:

<?php if (get_post_meta($post->ID, post_thumbnail)) { ?>
       <a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent
Link to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID,
post_thumbnail, true); ?>" class="post-thum" alt="post thumbnail" /></a>
<?php } else { ?>
       <a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent
Link to <?php the_title(); ?>"><img src="<?php
bloginfo('stylesheet_directory'); ?>/images/def-thumb.gif" class="post-thum"
alt="post thumbnail" /></a>
<?php } ?>

Comment by Michael Pollock on 4 August 2008:

>>>>> Is it possible to remove or not use the post thumbnails?

Thanks for the purchase Hans.

To remove post thumbnails, Open your Main Index, Archives and Search Results templates and remove the following:

<?php if (get_post_meta($post->ID, post_thumbnail)) { ?>
       <a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, post_thumbnail, true); ?>" class="post-thum" alt="post thumbnail" /></a>
<?php } else { ?>
       <a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/def-thumb.gif" class="post-thum" alt="post thumbnail" /></a>
<?php } ?>

>>>>> Somewhere here I spotted a means of preventing ‘Features’ from showing up on the menu bar, can this be done for additional categories as well?

see here:
http://www.wp-magazine.com/2007/12/how-to-insert-photos-for-your-featured-articles/#comment-878

to remove multiple categories, the code would be

Comment by Dave on 19 September 2008:

Same problem as Nick and I have not seen a resolution. I have followed the tutorial step by step and cannot get thumbnails to show up for my posts (wp 2.5).

any ideas?

love the theme though.

thanks,

Dave
Comment by Alistair Barnett on 20 September 2008:

Hi Dave,

I looked at your site (http://shortsaleblogger.com) and see different thumbnails for the posts. Is there another site where they aren’t showing up? If so, please let me know the URL.

Thanks.
Comment by Dave on 20 September 2008:

I figured it out. I think I was using the wrong “home” page.
Comment by Alistair Barnett on 11 October 2008:

Hi everyone,

If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

If this doesn’t apply to you, feel free to comment!

Alistair
Pingback by diary.febdian.net » Blog Archive » BlueSky theme, what happen to you? on 16 October 2008:

[...] Setelah mencoba berbagai macam saran dari situs-situs tersebut (favorit saya dari saran wp-magazine.com dan memasang thumbnailforexpert plugin), namun tetap tidak berhasil. Karena itu kecurigaan saya ada [...]
Comment by Rockford on 20 October 2008:

Hey all,
A web agency plan to use WP-Magazine theme for my blog, and I’m very happy of that .
My wife is writing posts for the blog, and she’s not technical at all, she’s using Windows Live Writer to post.
I would like a trick to use thumbnail automaticaly if the post is in a specific catefory ?
Comment by mikedurkin on 20 October 2008:

Can you clarify what you mean automatically? As of now, you are free to include a thumbnail with any post that requires an image by using the upload capability on the posting screen.
Comment by Rockford on 21 October 2008:

Tks Mike,
Example: if the post is in category xx, then display thumbnail yyy.
As my wife is not using web admin but Windows Live Writer, she doesn’t have access to upload capability.
Comment by Alistair Barnett on 24 October 2008:

Hi Rockford,

Although I haven’t tested it myself, it looks like the Top Cat plugin may work. The main feature is that it will allow you to specify a main category for your posts:

http://www.thunderguy.com/semicolon/wordpress/top-cat-wordpress-plugin/

When you view the comment by Domiziano Galia you will see that they were also able to use Image Extractor and configure it to show a preset image according to its top category:

http://www.thunderguy.com/semicolon/wordpress/top-cat-wordpress-plugin/#comment-60802

Hopefully this plugin works well for your wife. Please let me know if you have any questions.
Comment by Rockford on 24 October 2008:

Alistair, that’s perfect !! Imageextractor do what I need !
Comment by community blogger on 20 January 2009:

Hello,thanks for this super cool theme.The best thing i like about is that you provide nice support and tutorials for the theme which others lack.
Comment by AS on 26 February 2009:

I was trying for ages to get these thumbnails to work then figured if you change the address line from :

http://mysite.com/wp-content/uploads/2007/11/filename.jpg‘ alt=’feature1.gif

To
wp-content/uploads/2007/11/filename.jpg’ alt=’feature1.gif

This should work though this might seem obvious for some, i did not figure this out until i played with it for a while, for some reason my computer and firefox seems to be like this, (Wordpress 2.7.0) Hope this helps!

Post a Response

Please do not post a comment for support here. We provide all support through our forum at www.solostream.com/forum. This is the best and fastest way for you to get the answers to your questions. Plus signup is free.

WordPress Magazine Theme

How to Insert Post Thumbnails for Your Posts