Using WordPress Featured Images

The possibilities for using post thumbnails are endless, try to think outside of simply having a litttle image attached to each post. We have already used them to great effect on our very own site. The  image sliders on the homepage  showing our latest work are populated with post thumbnails.

Or how about the People section on the Admiral PR site we built? Each team member is stored as a custom post type with the gallery populated with the featured images from those posts.

We also used the featured image to great effect on the Experience section of the Pelican PR site. The sliding boxes with rollover effects are again pulling in the thumbnails from custom posts.

Setting up Post Thumbnails

Post thumbnails must be activated by a theme before they can be used, otherwise the add thumbnail dialogue would appear in themes that don’t support it., not good for usability! All you need to do is add the following code to your themes functions.php file.

add_theme_support('post-thumbnails');

However it’s good practice to make your theme backwards compatible with older versions of WordPress so lets check that post thumbnails are supported.

if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
}

The above code will show the post thumbnail dialogue for both pages and posts, but you can specify one or the other.

add_theme_support( 'post-thumbnails', array( 'post' ) );  // For posts

add_theme_support( 'post-thumbnails', array( 'page' ) );  // For pages

Of course we also need to tell WordPress how big we want our thumbnails to be.

if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(200, 150, true);
}

The first two arguments are the width and the height of the thumbnail, the third refers to image cropping. Set to false, the image will be shrunk to fit the entire image while maintaining it’s original proportions. Set to true, the image will be shrunk and cropped to fill the entire thumbnail size. The illustration below shows how a square image would be turned into our rectangular thumbnail using the two methods.

You’re not just restricted to one size though, you can add as many as you like and these can be called by name in your theme. Lets add a larger size to use within the post itself, we’ll name it post-image, this time with cropping disabled.

if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(200, 150, true);
add_image_size( ‘post-image’, 400, 300 );
}

Using the Post Thumbnail in Your Theme

Now we have our thumbnails defined, we can insert them into our theme very simply.

<?php the_post_thumbnail(); ?>

But again, we should make our theme bulletproof and add a conditional statement to give an alternative if there is no thumbnail set.

<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="generic-image.jpg">
<?php endif; ?>

The basic tag returns the standard post thumbnail size we defined, we can add parameters to access the other sizes.

the_post_thumbnail('post-image');         // The named image size we defined in the functions.php

the_post_thumbnail('medium');            // Medium size as defined in the WordPress settings

the_post_thumbnail('large');             // Large size as defined in the WordPress settings

the_post_thumbnail('full');             // The full size image as uploaded

Or we can resize the image as required, though things can go a bit screwy if you don’t respect the aspect ratio of the set thumbnail size.

the_post_thumbnail( array(100,75) );

Styling the Post Thumbnail

By default the_post_thumbnail returns an image tag given the class “attachment-thumbnail” and will also include the title and alt defined in the media library. But these can be overridden if necessary. For example, the following will return a medium sized thumbnail with the class of  “alignleft” and the alt text of “Thumbnail Image”.

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'Thumbnail Image')); ?>

While this is sufficient for most purposes, there may be occasions when you just need the url of the post thumbnail. This is possible using a little PHP trickery.

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0];
?>

<?php echo $image_url;?>

Have a play with this incredibly powerful feature and let us know if you have used post thumbnails in an interesting and creative way on your site.

<?php

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id,'large');

$image_url = $image_url[0];

?>

<?php echo $image_url;?>