I had a request from a reader here on VoodooPress to look into featured image sizes. Recently we had a series of posts on here about posting from the front end, and allowing users to upload their own picture. We even showed you how to set the user uploaded picture as a featured image. Let’s take a deeper look at using the featured images. Maybe assign different sizes to different templates. You don’t have to use this just for user uploaded photos of course. This information is useful for the featured image in general, whether you let users upload them, or you set them in the back end.
You can see an example of this in action on my blog, www.rvoodoo.com. On standard format posts, I use the featured image in a variety of ways. Once it is set, it is used as a small icon next to the post title. It is also used as a larger thumbnail in the body of the post. And if you click through to the single post view, we use a much larger featured image in the post. So let’s go over a variety of things that can be done with the thumbnails.
One thing to note, you may notice when I talk about the featured image, I sometimes also call it just the thumbnail. Please don’t get confused. When the feature was first added to WordPress in version 2.9, it was called the thumbnail. The code for the image refers to it as the thumbnail. Later on the name was changed to featured image. So I am really referring to the same thing. Featured image/thumbnail, whatever you call it, let’s do some work.
If you haven’t read this excellent article, give it a read. It pretty much covers everything I’m going to cover here. That is the article I used to learn how to work with the featured images.
Anyway, the first thing to know is how to turn them on. Featured images don’t just work out of the box on WordPress, the theme must support them. Hopefully by now, pretty much every theme has them. But if yours doesn’t here’s how to fix that:
add_theme_support( 'post-thumbnails' );
That’s it. Add that line to functions.php, and you have thumbnail support! Easy right? Now let’s look at adding the default size. This is the size that will be used if you just call the_post_thumbnail (we’ll get into that in a moment) with no image name.
set_post_thumbnail_size( 75, 75, true );
That right there defines my default thumbnail size as 75 x 75 pixels. The true refers to the crop mode. It can basically be set to true, or left off (which makes it false). To understand the cropping mode a bit better, you can check out what Mark Jaquith has to say on this post, another excellent resource for using featured images.
So now we have turned on the featured image, and we’ve set the default thumbnail size. What if we want more image sizes? Let’s add one:
add_image_size( 'title-image', 50, 27 );
That’s all you need to do. You are now able to call that image size by ‘title-image’ in your theme. You can repeat that as much as you need with different names to add a variety of image sizes to use all over your theme. Here’s what I have over on www.rvoodoo.com for featured images:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 75, 75, true ); // default post thumbnails
add_image_size( 'index-post-thumb', 75, 75 );
add_image_size( 'single-post-thumbnail', 150, 150, true ); // Permalink thumbnail size
add_image_size( 'title-image', 50, 27 ); // Title mini photo
add_image_size( 'shop-single-image', 700, 999 ); //Shop Single Product Image
add_image_size( 'member-thumb', 205, 100, true ); // Member Page Image
You can see I have the featured images turned on. I set the default at 75 x 75. I then added on five additional image sizes to use all over my theme. Pretty handy I say!
Now, for a lot of my VoodooPress readers, you are probably using a child theme of twentyten. What then? Featured images are already turned on, and the default image size is set, and being used for a header. What if you want to add more image sizes to a child theme? Well I just add them onto theme setup. If you recall this post, we made our own function called voodoochild_setup which runs on after setup theme. If you have that function, you can drop your add image size in there. That’s how I’ve done it on VoodooPress. If you didn’t follow that, here’s a function for your twentyten child theme that will add image sizes.
// VOODOOCHILD FUNCTION FOR ADDING IMAGE SIZES
function voodoochild_image_sizes(){
add_image_size ( 'admin-thumb', 100, 60, true );
add_image_size( 'single-post-thumbnail', 150, 150, true ); // Permalink thumbnail size
add_image_size( 'title-image', 50, 27 ); // Title mini photo
}
add_action( 'after_setup_theme', 'voodoochild_image_sizes' );
And you just keep on adding whatever sizes you need to that. OK, there’s all the info you should need for adding image sizes. If you followed along earlier and are allowing user uploaded images, now when an image is uploaded, all the sizes you define in functions.php are available for use throughout your theme. Same thing even if you aren’t allowing user uploads. You can set a featured image in the backend, and all the sizes you define are available. Let’s take a look at how to use the images now to actually display them.
The most basic code is this:
<?php the_post_thumbnail(); ?>
How easy is that? That bit of code will call your default thumbnail size. So if you added your own thumbnail support, it’s whatever is defined here:
set_post_thumbnail_size( 75, 75, true );
OK, that’s the default size, lets use our other sizes. You simply drop in whatever you named the image in your add image size code above. So if we have:
add_image_size( 'archive-image', 150, 150, true );
then to display that image size we use:
<?php the_post_thumbnail( 'archive-image' ); ?>
And we just do that over and over for any image size. The code works in pairs. You use add_image_size in functions.php with an image name to define the image size, and then in your template where you want to use the image, you use the_post_thumbnail with the same image name. Pretty simple right? You can use a variety of sizes all over the place now. Just define them in your functions.php, and the call them in your templates.
Let’s look at a few more tricks just for fun.
Maybe we want to display a default image if no thumbnail is set. We can use a conditional for that. Here’s a sample:
<?php if( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php bloginfo( 'stylesheet_directory' );?>/images/sample.jpg" alt="Default Icon" title="Default Icon" />
<?php endif; ?>
That says if there is a thumbnail, use it. If not display the image named sample.jpg in the images directory of my theme.
What if we want the image to link to the article? I use this on any thumbnail I have on my index.php to link to the article.
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
</a>
You can also add classes to the image of course for styling and whatnot:
<!-- DISPLAY IMAGE WITH CLASS AND ALT -->
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'class', 'alt' => 'Title' ) ); ?>
And here is another neat trick, good for single.php. I use a lightbox plugin, which needs the rel=”lightbox” added to my images to be able to display them. And I need to link the image to it’s large version. This code does both:
<a rel="lightbox" href="<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large', true);
echo $image_url[0]; ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
Even if you don’t use a light box plugin, you may want the image linked to a certain version of the original image. Line 2 here, where I have ‘large’ is the size of the link target image you want the link to go to. Line 4 is the displayed featured image size, you could swap out ‘thumbnail’ for whatever image size you want to use which you have defined in your functions.php with add_image_size.
So that’s a whole bunch of information about working with the_post_thumbnail. I hope this helps some of you. If I forgot anything, or you want to know even more, I’m always open to comments!
