Making custom thumbnail size in WordPress CMS406

Wordpress Thumbnail
Author: InfoBeep - September 26, 2017 | subject to copyright

Thumbnails come in handy in all sorts of places in WordPress. The most obvious is on the homepage with a list of blog posts. You can also use them in the content of a post. And depending on your theme, they can also be used on category listings, tag listings, search results, or even widgets. WordPress gives you some basic options baked into the admin dashboard, but you can also specify extra thumbnail image sizes. Here’s a guide to doing that.

When you’re setting the thumbnail sizes you have a choice of how you want your thumbnails cropped. Perhaps you want to fit into a specific part of your page. Perhaps you want squares or very wide but narrow thumbnails. Or maybe you want to make sure that the entire image always shows up. So here’s a guide to the different crop modes for thumbnails available in WordPress.

For this example I’m going to use this simple graphic so that you can easily see which portions of the image are being cropped with the various crop modes. Because landscape (horizontal) and portrait (vertical) images are not always handled the same way with the same function, I’ve included both here. These are the original files uploaded. Both were uploaded as 1024px by 600px jpg images.

Soft Crop

The Soft Crop in WordPress is the same as what’s commonly known as a Fit crop and is what we’d normally think of as a pure resize. It’s proportional, so the entire area of the image is retained. The entire image will be fit in a box of the dimensions you specify without cutting any of the image. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space.

There are two ways you can specify hard crop. One of them is in the WordPress dashboard under Settings > Media. When you set the thumbnail size on that page you have a checkbox for “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”. Keeping that unchecked is setting a soft crop.

If you’ve added extra image sizes through your functions.php file with the add_image_size function, you specify the soft crop with the FALSE attribute, like this:

add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );

In this example (and the ones below), you’d change the name, width, and height to whatever you want. If you’re after more information how to use add_image_size in functions.php, check out my post on How to Resize WordPress Thumbnails.

Hard Crop

The hard crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that don’t fit in that box. If you want to create square thumbnails from rectangular images, make the width and height the same. You can see different types of square and rectangular hard crops available on my homepage. It has the virtue of making sure all the thumbnails are the same shape, which I prefer for its tidiness.

There are two ways you can specify hard crop. One of them is in the WordPress dashboard under Settings > Media. When you set the thumbnail size on that page you have a checkbox for “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”. Checking that is setting a hard crop.

If you’re specifying it in functions.php, it looks something like this:

add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );

Using Array Crops

The hard crop and soft crop are the most common types of crop used for WordPress thumbnails. By default, the hard crop focuses on the middle of the image and cuts equally from each side for an image in landscape (horizontal) image or equally from top and bottom for an image in portrait (vertical) orientation.

But what if you want to focus on a different part of the image? That’s where the array crop modes come in. With these, you specify the x-axis (left, center, right) and y-axis (top, center, bottom). These are different flavors of hard crops.

From those, it sounds like the image should be divided up into 9 pieces (eg. top left corner, bottom right corner, etc). But that’s not how it works in practice. Because of the way WordPress handles cropping and tries to fill at least one dimension, not all of these x-axis and y-axis instructions are relevant to all images. That is, the relevant instructions for a landscape (horizontal) image are different than for a portrait (vertical) image. While it sounds like ‘top left’ should be just a corner, for example, it doesn’t work that way. In practice, instead of 9 pieces, the image is divided up into 3 pieces. Whether the x- or y-axis instructions are relevant depends on whether the image is in landscape or portrait orientation.

To illustrate, I’ve included what happens in both orientations below.

Array crops aren’t available through the regular WordPress dashboard. To use them you specify them in your functions.php file using the add_image_size function. 

Top Left

This is how you’d focus the hard crop on the top left:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );

This is what happens with an image in landscape (horizontal) orientation. As you can see, it’s the functional equivalent of just using the left side:

Top Center

This is how you’d focus the hard crop on the top center:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'top' ) );

This is what you get with a landscape image. It takes the middle of the image, which is the same as the default hard crop:

Top Right

This is how you’d focus the hard crop on the top right:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'top' ) );

This is what you get with a landscape image. It takes the right side of the image:

Center Left

This is how you’d focus the hard crop on the center left:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'center' ) );

This is what you get with a landscape image. It takes the left side:

Center

This would focus on the absolute center. In reality, it’s redundant because it’s exactly the same as the default hard crop above.

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'center' ) );

This is what you get with a landscape image:

Center Right

This is how you’d focus the hard crop on the center right:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'center' ) );

This is what you get with a landscape image. It takes the right side:

Bottom Left

This is how you’d focus the hard crop on the bottom left:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'bottom' ) );

This is what you get with a landscape image. It takes the left:

Bottom Center

This is how you’d focus the hard crop on the bottom center:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'bottom' ) );

This is what you get with a landscape image. It focuses on the center, which is the same as the default hard crop:

Bottom Right

This is how you’d focus the hard crop on the bottom right:

add_image_size( 'wordpress-thumbnail', 209, 209, array( 'right', 'bottom' ) );

This is what you get with a landscape image. It takes the right:

Adding to your Functions.php File

These commands go in your functions.php file, which will be in your theme’s directory. Below is some example code, but first some words of caution.

If you mess up your functions.php editing you can end up with a blank white screen that makes your site inaccessible. For that reason, I’m hesitant to recommend doing it if you’re not already comfortable with it.

So always, always save a backup copy that you can restore if need be. Simply replace the new, faulty version with the old, working version and the site should pop back up as normal. If you’re having trouble getting code snippets to work, here are some great tips to help you troubleshoot. First, check that you’re using straight quotes and not curly quotes–that’s a common problem.

It usually makes sense to add these snippets towards the end of the file in case the theme developer has some functions already added. But the very last characters in a functions.php file should be “?>”, so make sure the code snippet goes before them.

Another option if you’d prefer not to mess with editing the functions.php file directly is to use a plugin. Here’s an example of one that adds that functionality.

Sample:

//* Add new image sizes
add_image_size( 'after-post', 160, 160, TRUE );
add_image_size( 'home-bottom', 200, 200, TRUE );

Also, it’s worth bearing in mind that the functions.php file is part of your theme, so if you change themes these alterations you’ve made will no longer work unless you copy them into your new theme’s functions.php file.