How to Insert Post Thumbnails for Your Posts

def-thumbIf 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. »

  1. 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.

  2. I can tell alot of work went into the designing of this template. Great JOB!

  3. 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

  4. 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

  5. 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

  6. 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!!

  7. 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.

  8. 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?

  9. 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?

  10. 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

  11. Can you please help me… I’m trying to remove “Announcements” in the Feature Articles on Home Page Template? Thank you again. George

  12. 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

  13. 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

  14. 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.

  15. 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

  16. 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?

  17. 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!

  18. 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

  19. 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.

  20. I love the Theme but can anyone show me how to show more post on my Home page? Only Three show up. Thanks!

  21. 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?

  22. 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

  23. @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.

  24. I wonder if it would be easier to use phpthumb to resize & cache the photos rather than having to physically resize all the photos?

  25. I had to try this gravatar thingy …

  26. 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

  27. >>>>> 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

  28. 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

  29. Lewis, It’s changeable with a plugin….

    See Here

    It’s a little technical but you can figure it out.

  30. 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.

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

  32. 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

  33. >>>>> 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 } ?>

  34. >>>>> 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

  35. 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

  36. 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.

  37. I figured it out. I think I was using the wrong “home” page.

  38. 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

  39. [...] 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 [...]

  40. 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 ?

  41. 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.

  42. 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.

  43. 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.

  44. Alistair, that’s perfect !! Imageextractor do what I need !

  45. 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.

  46. 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.