Giving each WordPress post a thumbnail, and display the thumbnail on the home page
November 21, 2007 – 8:25 pm | by Miriam SchwabYou may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. Here’s an example of this kind of situation: you want to display recent posts from a certain category on your home page, with a thumbnail for each post and maybe the title and an excerpt. Or, I recently had a client that had a box on their homepage for multimedia where they wanted an image to appear that would represent the latest post in the Media category and would link to that post. A link to this site is at the end of this post, so read on.
I found the solution in two amazing WordPress themes: Mimbo and The Morning After. They both use thumbnails on their home page, and they do it by using WordPress’ mysterious Custom Fields feature.
You need to be able to upload images to your server in order to do this. You can do this via FTP, but to make this as easy as possible for clients, I use the Filosofo Old-Style Upload Plugin which creates a link on your nav bar where you select files for uploading. But first you need to configure this plugin and select a folder where all uploads will be saved:
- Upload the plugin and activate it.
- Go to Options > Uploads.
- Enter your destination directory. I think the best is to use your images folder in your theme folder so that any images you upload will be in an easily portable place. So the path could be something like /home/server/public_html/wp-content/themes/themefolder/images. The plugin will suggest a path, and it is usually right.
- Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
- You might as well up your maximum file size. I make it 500 kb.
- Allowed file extensions: jpg, jpeg, gif, png, pdf - I add PDF and other types of files I think clients may want to upload.
- Minimum level to upload: I leave it at 6 since I have no idea what this means.
- Click Update Options.
That’s done. Now for how to create a post with a thumbnail image.
- Create an image for your post with the right width and height. The size of the image depends only on the design of your site and where it is going to appear.
- Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
- Select the file you are uploading, select No Thanks so it won’t create a thumbnail, give it a description (that’s good for Google) and click Upload File.
- Once it’s uploaded it will show you the entire URL of the image. Note particularly the last part of the link where it says the name of your image, especially if there are any capitals in any part of the name. You will have to enter the exact file name in step 8.
- Go to Create Posts. Enter your post and title as you wish. Make sure to select the category you have selected as the one that will appear with the thumbnails. Now scroll all the way down to the bottom of the screen where it says Custom Fields. Click on the plus button to expand it.
- Enter the word Image (with a capital I) in the Key field.
- In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
- Save your post.
Now we need the code that will make this thumbnail appear where you want it to appear. Following is the code for having a thumbnail appear with the title underneath it. This code is adapted from the Mimbo theme, but the code in The Morning After is similar:
<?php
// this is where the Features module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number, which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>” alt=”" /></a>
<p class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark”>
<?php
// this is where title of the Feature gets printed
the_title(); ?></a></p></div>
<?php endwhile; ?>
Wanna see an example? Check out this site, scroll to the bottom and look at the left-most column that is called Media. That image there is a thumbnail that was uploaded and entered in the Custom Field of the post it links to.
Update Nov. 27, 2007: This post got a lot of comments here, and on Weblog Tools Collection who referred to it. Lots of people gave more recommendations on how to manage thumbnails with custom fields and/or plugins, so I collected these tips into one post which you can see here: Images, thumbnails and custom fields in WordPress.
47 Responses to “Giving each WordPress post a thumbnail, and display the thumbnail on the home page”
By Ryan on Nov 23, 2007 | Reply
Useful tip you’ve got there, I didn’t know that was possible. Although I’m assuming you could just upload the image using the default WordPress upload instead of using any fancy route.
“Minimum level to upload: I leave it at 6 since I have no idea what this means.”
I assume that is referring to the WordPress user levels which are ranked from 0 - 10. 10 is an administrator and 0 is a subscriber normally - I think.
By Miriam on Nov 23, 2007 | Reply
The reason I use the upload plugin is because if you just use the standard upload in the create post page, WordPress puts the files in folders that are according to date. This means that all files uploaded in November 2007 will be in something like uploads/2007/november. When you get to December, the images are uploaded in a different folder. So you can’t have one URL listed in the code for where the images can be found.
The other disadvantage is if you have to port your blog to another server or something, you may have trouble getting the images over successfully if they’re outside of your themes folder.
Did I explain myself properly?
By Ryan on Nov 23, 2007 | Reply
Under /wp-admin/options-misc.php you can set your image upload folder to anywhere you like and un-tick the “Organize my uploads into month- and year-based folders” box. Then I’m pretty sure you can set that to be your theme folder if you want.
Unless I’m mistaken (probable), that should avoid the need for the upload plugin.
Ryan,
By Miriam on Nov 23, 2007 | Reply
The problem with that (I think) is that you are making changes to the core files which will be over-written if upgraded or moved. You could theoretically remember to keep that change, but it just makes things more complicated.
By Ryan on Nov 23, 2007 | Reply
Core files? No, not at all. They’re just options in the admin panel, entirely standard and should function fine after any upgrade.
By Ryan on Nov 23, 2007 | Reply
In case my first explanation wasn’t very clear …
(1) Go to your admin panel
(2) Choose “Options” in the main menu
(3) Choose “Miscellaneous” in the sub menu
(4) Enter your upload folder in “Store uploads in this folder:”
(5) Un-tick the “Organize my uploads into month- and year-based folders” box
There is definitely no editing of core files, theme files or anything of the sort for this to work. It’s an out of the box WordPress feature.
By Miriam on Nov 23, 2007 | Reply
I can’t believe I never knew about that! That is so handy. I have to write a post about this at some point, I think.
By bssn on Nov 24, 2007 | Reply
I’m using the custom field for my blog, that’s a amazing function of wp, learnt it from wpdesigner.com.
By Ryan on Nov 24, 2007 | Reply
Does anyone know of a plugin or similar which will let you choose where you want to upload something? Ie: I’d like to have a folder for uploading documents and a separate folder for uploading images. I’m launching a new design for one of my sites and previously I had separate folders for documents and images. But with the default WordPress setup, I’ll need to amalgamate them which I’d rather not do if I can help it.
Worst case scenario, I’ll need to write/borrow a small upload script and shoehorn it into my WordPress admin area. But I’d prefer to use an off the shelf system if one is available.
By Andy on Nov 25, 2007 | Reply
I use custom fields for thumbnails also on my blog. It works out great. I use them to show on the home page for each post and in the archives.
By Aaron on Nov 25, 2007 | Reply
This is something I’ve been doing for a while now. I use the Photopress plugin which allows me to upload all images into a particular folder (without subfolders) but also allows for tagging images into ‘categories’ - so you can arrange them in Photopress, but they’re all kept in the same folder.
Photopress also allows you to set your own thumbnail size and the ability to create square thumbnails (which is what I do). You can even globally recreate thumbnails for images that you haven’t created thumbnails for or for when you want to change the default thumbnail size.
Once I’ve got them uploaded and thumbnailed, I just call the thumbnail via a custom field extractor.
By the way, this isn’t an ad for photopress.
It’s just a plugin I use. You can click on my name for the link to my site to see what I did. It’s just a personal site.
By aNieto2k on Nov 25, 2007 | Reply
A plugin for do it…
http://www.anieto2k.com/plugins-themes/mis-plugins/mia-wordpress-plugin-imagenes-aleatorias-de-tu-blog/
By Miriam on Nov 26, 2007 | Reply
@Andy - that’s a great use of thumbnails, but almost as good are the recipes on your site! Are they your recipes? Do you take the photos? If I had time, I’d do the same thing. I also make some things that are really good, and then forget about them. Or I change something in the recipe that makes it even better, and then I can’t remember what I did.
I like the idea of searching by ingredient, but it didn’t work for me. What’s it supposed to do?
@aNieto2k - I’d love to see what that plugin does, but the explanation is not in English. Do you have any information on it in English, or can you just describe briefly what it does?
By Ryan on Nov 26, 2007 | Reply
Google translator to the rescue … http://www.google.com/translate?u=http%3A%2F%2Fwww.anieto2k.com%2Fplugins-themes%2Fmis-plugins%2Fmia-wordpress-plugin-imagenes-aleatorias-de-tu-blog%2F&langpair=es%7Cen&hl=en&ie=UTF8
By Miriam on Nov 26, 2007 | Reply
@Ryan - I really should start using that more often. But the translation isn’t so clear, so here’s what i think the plugin does, tell me what you think: it displays random images that are saved somewhere in your WordPress blog. If so, where does it pull the images from, i.e. which folder?
By Lonewolf on Nov 26, 2007 | Reply
I used a similar technique on my site to add a clickable list of thumbnails to my post.
I used custom fields so that I can integrate wordpress with the existing backend framework of my site and database structure.
The full tutorial can be viewed on my site: http://lonewolf-online.net/computers/knowledgebase/wordpress-custom-fields/
Another blog of mine uses exactly the same technique to display a thumbnailed image on each post which is again parsed and presented as a link to the full size image using WP Lightbox 2. This forms an image based blog, but I won’t post the link to it here though as its a bit adult orientated.
Hope the above tutorial is of interest to some.
By Miriam on Nov 26, 2007 | Reply
@lonewolf - that’s a great tutorial. I can see that I’m going to have to get to know WP custom fields a lot better. That’s what’s so fun about WP - there’s always something new and amazing to learn about it.
And thanks for the consideration and not posting the link to the other site here. I appreciate it.
By Edward P on Nov 26, 2007 | Reply
I use thumbnails in my posts with this exact method. You can see the results at http://o.rang.es/ — I think the images really add a lot to the posts.
A helpful hint: I have added more custom fields which are helpful if you want to provide attribution to the (CC licensed) photos you use.
By Miriam on Nov 26, 2007 | Reply
Hi Edward P - I love your URL and site! It’s really great. I don’t see where you used the custom fields for providing attribution. Can you give more details?
By Andy on Nov 26, 2007 | Reply
Miriam ,Thanks for the compliments! Most of the recipes are my own , if they are not I include the source of where it came from. I take all of the photos also.
The “Find Recipes by Ingredients” was broken when I upgraded to 2.3 and moved away from the UTW plug-in. I still need to fix it but when it works, you can click on multiple ingredients (to say what items you have on hand) and it shows you what recipes you can make with those ingredients.
By Ted on Nov 27, 2007 | Reply
What do you think about the Post thumb plugin? http://theblemish.com/post-thumbs-plugin/
By Miriam on Nov 27, 2007 | Reply
@Ted - I just posted a follow up post to this one with a collection of thumbnail and image solutions that use custom fields or plugins, and that is one of the solutions I listed. Check out the post here: Images, thumbnails and custom fields in WordPress.
By David on Nov 28, 2007 | Reply
I’ve been using an old WP plugin called Lr2ImageSnag that automates a lot of the thumbnail process. There’s a direct download in one of the comments (its no longer developed)
http://www.cineris.org/blog/2006/05/11/lr2imagesnag/
By Julian Johannesen on Dec 31, 2007 | Reply
thank you so much for this tutorial. it’s been really helpful. i’m not using your method right now, but i’m looking for ways to incorporate it into my family blog.
By Miriam Schwab on Dec 31, 2007 | Reply
You’re very welcome Julian! Stick around and I hope you’ll find more useful stuff here.
By Brady J. Frey on Jan 1, 2008 | Reply
Thank you for the fantastic tutorial - we’re demoing a new rebuild, and I’m integrating your above notes, it’s a great help! To make it easier on my users, I’ve installed http://rhymedcode.net/projects/custom-field-gui so that they get a predefined field without having to mess with the Custom area.
By Miriam Schwab on Jan 1, 2008 | Reply
Brady - that is an amazing plugin that you’ve mentioned! I’m going to have to look into it further.
By Kotsengkuba on Feb 11, 2008 | Reply
my site also uses mimbo theme however, as we all know, we have to manually type the custom fields each time we write a post.
i’m planning to have just one image per category but i wonder of it’s possible to have the main index thumbnail to be based on their categories?
anyone? thanks in advance.
By Tim on May 2, 2008 | Reply
You can get rid of those annoying Custom Field entries AND set default category images for when there are no images to accompany a post with VIVA THUMBS plugins for Wordpress. Check out the live demo at http://www.mediatricks.biz/demo It makes themes like MIMBO and The Morning After really easy to maintain.
Write a post -> Upload an Image _ > Publish
All your homepage and sidebar thubmnails are created on the fly by the plugin.