Working With Featured Image in WordPress

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!

32 Replies to “Working With Featured Image in WordPress”

  1. What a great explanation about featured images! It explains everything on one place, while other websites explained just parts of it and I couldn’t make sense of it. Thanks for sharing this. I can now understand the Featured images very well and sure will be using them soon..

    1. Thank you very much for the kind comment! I’m happy I could help you get going with the featured images!! Enjoy, and feel free to ask if you have any further questions about them which I haven’t answered here!

  2. There is a problem in all this.

    Actually wordpress maintain aspect ratio from images, so when you resize them you won’t get what you asked. To be exact:

    add_image_size( ‘title-image’, 50, 27 );

    wont provide you with 50 x 27 image, it would be something x 27px, depending on original image size.

    It’ll resize it to smaller value provided in add_image_size command.

    One way to solve this is to use your bigger value for eg. 50×100 and clip with CSS
    .something:{clip:rect(0, 50px, 27px, 0;position:absolute;)}

    But it’s not that good solution as I expected.

    Still figuring this out, if I find something I’ll report back.

    p.s. I was using timthumb for thumbnails but for some reason it won’t work on all servers out there, so figuring some new way to deal with this.

    Danko Dubajic

    1. That’s one of the problems with the featured image. It’s not very flexible for image sizes. I believe if you add true to the image size parameters it will use the hard crop method, which will get the image to your desired size.

      add_image_size( ‘title-image’, 50, 27, true );
      1. Yup I know that, but in real word that doesn’t work for some reason.

        It cuts some part of image but you don’t end up with exact size you entered.

        Picture gets smaller and centered ok, but there is still some difference in size. I have no clue why is that, and why would you add 2 commands that are doing almost the same thing.

        Maybe post a bug report to wp… I’ll think about that too, maybe I was doing something wrong.

        1. I haven’t messed around with the 2 crop options in a while now. It would be really nice to have more control over the crop. Being able to properly get the required dimensions, etc. The featured image is a cool feature, but it’s be nice if there was a bit more control with using it.

  3. Thank you very much for this article it has helped a lot.
    I do have a question. Can I link the featured image to any file?
    I am using the vox box light box and the JW player to show images and video. I need to have the featured image link to a video file for it to display video. I have been able to link the featured image to the larger image and this works well for stills but have not found a way to link it to my video files. should i be using a custom field for this and if so how would that work?

    1. Sorry for the delay, I have been on vacation. I’m not entirely sure what info you need to include to link to your video. Is it simply to a url? Custom fields wouold definitely be a simple way to link to a url. It would basically use the above example for linking, but rather than using the_permalink you would link to the_post_meta for your custom field. If you need further info, let me know exactly how you call your videos, whether it’s a simple URL or what, and we can go from there.

  4. Hi Mr. voodoo,

    I am having one problem. In the backend (wp-admin) the featured image is resized as if i where using twenty ten theme (…x198).

    I have a child theme with different image sizes, mostly squared. How can i use these image size show up as the featured image and not the “twenty ten” size?

    Regards

    1. Where do you mean the featured image shows up as though it were twenty ten? ON the post screen when you upload the image?

      The main thumbnail size is set in 2010’s functions.php right here:

      	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
      	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );
      
      	// We'll be using post thumbnails for custom header images on posts and pages.
      	// We want them to be 940 pixels wide by 198 pixels tall.
      	// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
      	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
      

      so the main thumbnail is set to be 940×198. Within your child theme, you can add as many image sizes as you like, and use them throughout your theme as you seem to be doing… by calling the_post_thumbnail( ‘$name’ );
      Is that not working for you? Or are you just specifically talking about the displayed image in the back end?

  5. Hi, thanks for this. I have a rather complicated question that perhaps you can help with. It’s in regards to your trick of adding a lightbox rel attribute to images.

    I know it’s strange – go to to http://www.distractionent.com/musically-inclined/ and look at the upper left thumbnail, 12inch Pimps. When you click the magnifying glass, it opens prettyPhoto, a lightbox clone. When you click forward through the slideshow, you will see that it is “1/24” and instead of going to more pictures of the 12inch Pimps, it goes to the next artist on http://www.distractionent.com/musically-inclined/ (in this case, Adrian Camacho). The pictures it should cycle through can be seen at http://www.distractionent.com/12inchpimps. In essence, here is what is happening: The theme is pulling the featured image of the 12inch Pimps post and using that as the hexagonal thumbnail. It has somehow assigned it, as well as every featured image thumbnail on http://www.distractionent.com/musically-inclined/ a rel attribute of “prettyPhoto[pretty_photo_gallery]” which is the default. What I need is a way to attach different rel attributes like “prettyPhoto[pretty_photo_12inchpimps]” to featured images and the additional images in that set. That way, prettyPhoto can differentiate and we can have unique galleries pop up for each artist.

    Obviously, I can do it with HTML, but I don’t want to leave raw HTML sitting out for the client to mangle by accidentally using the WYSIWYG editor. Any thoughts?

    Thanks in advance.

  6. Hi There I read the article, learned a lot all here thank you for that!

    searched for hours and this is the 3thrd time i ran into this blog:-)

    So kindly if you have any suggestion how to do;

    give a featured image a link to certain page, and in such a way the editor can easy manage that.

    or what would be better to make that featured image have hotspots?

    I love to have this , it would make a lot users happy to i gues:-)

    Any suggestions which road to take?

    Thanks for posting the article, will follow this blog !

  7. wow i nice article, helps me get in the right direction finally

    did not knew this would take me 10 hours…

    how do i ad a url to the featured image and how do i ad that option to the back-end for the editor?

    Is there a plugin for that to use or can there be a image with hotspots there?

    Any suggestions who can help me further?

    Amazing blog, thanks for posting this article!

  8. Hello. I want to replace the default image on the home page for post that have no images. And not have featured image show on the blog page. Help.

  9. hey man -I practically drooled over every forum-just to get my slimbox2 working on my featured image. your a life saver!! very useful post!

    1. hi mr. voodoo the slimbox got to work but it always shows the href as caption -I want the image title to be shown as caption -so I tried changing some settings on slimbox but it doesn’t work -tried removing & uploading tagging images both it still doesn’t show image title as caption -any ideas?

  10. Hi, thanks for this tutorial! I am struggling as to me it doesnt work! I have featured images in posts and it looks huge! Even if the size is 75×75 it looks big and blurred

    It looks like it is forced to be in a bigger space even on 75×75! Is there in the wp somewhere how to modify the size of the featured images space ?

    I hope you can help! Thank you in advance!

    1. To be more precise : On “Inspect Element” I see : “<img width=​"75" height=​"75" but on mouseover the URL of the image I see: "608 x 608 pixels (natural 75 x 75 pixels)" Where can I change 608 x 608 ?

Leave a Reply