Post Thumbnails via WordPress
Images are more appealing than text alone so, wouldn’t it be nice to upload and place a thumbnail next to the post?
It’s very simple with WordPress 2.9+, all you need is a few lines of code in your functions.php. So, therefore we need to open functions.php as well as index.php.
The Function
In your functions.php place this code and tweak as necessary:
<php add_theme_support( 'post-thumbnails', array( 'post' ) ); //displays thumbnail for only posts set_post_thumbnail_size( 50, 50, true ); //50 pixels wide by 50 pixels long, box resize mode >
Placing the Thumbnail
Wherever you would like the thumbnail to appear place this code:
<php if ( has_post_thumbnail() ) echo the_post_thumbnail(); else { echo '<img src="http://yourdomain.com/default.png" />'; } >
This tells WordPress that if this post has a thumbnail uploaded (we will get to that in a moment), display it; otherwise display the default image.
Uploading the Thumbnail
How do you upload a thumbnail? When adding a new post, under categories look for “Post Thumbnail” and click “Set thumbnail”.
Of course, this can be styled and tweaked to your needs so have fun tweaking and thanks for reading!
Image by by David Reeves
About the author
Phil Splice is a growing designer. After a few years history of C++, he decided to move over to the design side of programming. Phil currently designs with TLR Design and runs his own blog at philocity.com.
Good article, thumbnails are easy in WP2.9 and this shows it. I might also recommend an article Matt Brett did recently on this subject: http://mattbrett.com/2010/01/bulletproof-post-thumbnails-in-wordpress-2-9/
quite a useful trick there! thanks!
Great post Phil! You make it sound too easy!
Yes, you don’t need all of this, it’s much easier in WP 2.9 and why would you be using anything other than the latest?
Excellent thanks!
I love the WP tips, helps out a ton.
.mike
Also, very useful for posting “thumbnails” across your website at various sizes, you can use add_image_size() command.
Something like this:
add_image_size( ‘sidebarimage’, 500, 400, true );
In the string, you give this custom size a name. I’ve called it “sidebarimage”. Then I’ve set the WIDTH and the HEIGHT. Finally, I’ve told this function to automatically crop the image, instead of resizing it dependant on the width or the height. You can not set this, or set it false, and it will resize the image down to the either the maximum width or maximum height… Sometimes it’s useful to set this so the height is 9999 so you can have a flexible height, yet a fixed set width. Up to you how you roll with that one!
You call back the function like you normally would, instead you call back the ‘sidebarimage’ inside the brackets of the_post_thumbnail template tag, like so:
the_post_thumbnail( ‘sidebarimage’ );
You can set up multiple add_image_sizes with different callback names and call it back wherever on the website. Amazing stuff!
More info here: http://codex.wordpress.org/Function_Reference/add_image_size