How to Insert Post Thumbnails for Your Posts
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.
Hi Doug:
It's a bit tricky, but I think this will work.
1. You probably added this to the About section on ...
Hi Michael,
how can I get the theme to use the new Identicons instead of the gravatar picture, which it currently ...
Hi Michael, Thanks for a great theme. Its fantastic and yor mods are always explained perfectly.
I've set up including adding ...
Hi Michael,
Thank you for the great instructions. They worked perfectly!
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: 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.