Image Sizes & Post Thumbnails in WordPress

In my last post I briefly touched upon customizing your WordPress sites post thumbnails and images, and I thought it would be useful to expand a little bit in a new post, so here it is!

WordPress has in built featured image support, which when turned on allows you to assign each post a featured image on the ‘Add New Post’ screen. This image can then be used in various ways as I will now demonstrate.

Firstly check whether your current theme has featured images enabled by going to to the ‘add new post’ page and looking down the bottom right hand side of the screen for a box that says ‘featured images’. If it’s there already then great you can skip to the next step, otherwise open your functions.php file, pop this bit of code in and save it.

add_theme_support( 'post-thumbnails' );

A quick glance back at the ‘add new post’ page should now reveal the featured image box.

Now the featured images are enabled, the next step is to set some sizes with the add_image_size() function by adding the code below into functions.php.

// add new image size
add_image_size ('example-image-1','500','160',true); 
//add another new image size 
add_image_size('example-image-2', '400', '400');

‘Example-image-1’ is the name (of the image size), 500 is the image width and 160 is the image height. The final argument ‘true’ denotes that the image is hard-cropped, leave blank for the image to resize.
The second image size is named ‘example-size-2’, and is 400px wide x 400px long and will resize rather than crop.
Substitute my example values for the values you require.

Now we have set up the two image sizes above it’s time to put them to use. There are two main methods for doing this, firstly you can simply enter the code below into functions.php (below the add_image_size functions!) and the image sizes will appear in the ‘Size’ dropdown box on the ‘Add Media’ screen.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'example-size-1' => __('My Example Image Size'),
        'example-size-2' => __('My Second New Image Size'),
    ) );
}

This will add two new options to the Size dropdown box on the ‘Add Media’ screen which relates directly to the two new image sizes we created above.

The other method is to insert the following code into a template page as per this post. Find the correct spot for your image to appear and pop in the following code.

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail('example-size-1');
}

And there we have it.