Thumbnail images on wordpress is one of the essential design style nowadays, specially for those Photo Gallery or Magazine Blogs. Many wordpress theme uses complex methods to generate resized or cropped thumbnail images on the fly, like phpThumb or TimThumb. They are good, but, sometimes returns error message or blank images if not configured properly.
From WordPress 2.9, theme authors can easily enable Post Thumbnail selection UI and call those image using simple template tags. This is the most reliable, simple and user friendly way of generating thumbnails in wordpress blog. As it’s a inhouse solution for wordpress installation, it might get updated with the release of new version of wordpress.
I’ll discuss here the basic methods of styling a wordpress theme with thumbnails. We’ll use a single image to show up on Index, Single Post and Archive in three different sizes.
First, we need to enable the User Interface (UI) in the wordpress admin.
To do, we need to declare that our theme supports this feature in functions.php
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 150, 150 ); // Index Page Thumbnail Size add_image_size( 'single-post-thumbnail', 400, 300 ); // Single Post Thumbnail Size add_image_size( 'archive-thumbnail', 75, 75 ); // Archive Post Thumbnail Size
That’ll enable the UI in the admin panel and will show up on the right sidebar when you create or edit a post or a page. This method will resize the image only. For example, if you have a 450×300 image, the image will be shrunk to 150×100 for index page and leave the rest of the height blank. To solve this, you can enable hard cropping the images. The image will cropped to match the target aspect ratio, and is then shrunk to fit in the specified dimensions exactly. The benefit is that you get what you ask for. If you ask for a 50×50 thumbnail, you get a 50×50 thumbnail. The downside is that your image will be cropped (either from the sides, or from the top and bottom) to fit the target aspect ratio, and that part of the image won’t show up in the thumbnail.
You can enable hard cropping by setting the hard crop argument to true.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 150, 150, true ); // Index Page Thumbnail Size add_image_size( 'single-post-thumbnail', 400, 300, true ); // Single Post Thumbnail Size add_image_size( 'archive-thumbnail', 75, 75, true ); // Archive Post Thumbnail Size
Now, let’s add the Thumbnails in the posts..
We now use the_post_thumbnail() in the loop to output the thumbnail if that exists for that posts.
Open the index.php of your theme and put the code anywhere in the loop. If you want to show it before the content, find <?php the_content(); ?> and put it before that.
<?php the_post_thumbnail(); ?>
You can show the thumbnail anywhere using CSS and a separate div.
Simply, for single posts or archive page, using the related piece of code in the loop will show the resized or cropped thumbnail image.
For Single Posts or Pages
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>;
For Archive Pages
<?php the_post_thumbnail( 'archive-thumbnail' ); ?>