Guide to Cropping Thumbnails in WordPress

Thumbnails come in handy in all sorts of places in Wordpress. Here's a guide to the various ways to crop an image within Wordpress.

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 resplults, 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 );

With that, you end up with this for the landscape image:

and this for the portrait image:

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 );

With that, you up with this for the landcape image:

And this for the portrait image:

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. [Here’s more information on that.]

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:

And this is what happens with an image in portrait (vertical) orientation. It just takes the top:

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:

And this is what you get with a portrait image. It takes the top of the image:

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:

And this with a portrait image. It takes the top 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:

And this with a portrait image. It focuses on the middle, making it the same as the default hard crop:

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:

And this with a portrait 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:

And this with a portrait image. It takes the center, which is the same as the default hard crop:

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:

And this with a portrait image. It takes the bottom:

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:

And this with a portrait image. It takes the bottom:

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:

And this with a portrait image. It takes the bottom:

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.

Tips

If you try using multiple crops with the same dimensions you’re going to run into an issue. The filenames for the new thumbnails use the dimensions to differentiate themselves from other sizes of the same image. But they don’t use the crop type. So if you try to add a thumbnail size with a crop of 200×200 with, say, a hard crop and another thumbnail size with an array crop of bottom right also at 200×200, you’re only going to end up with one–whichever is last in the list. That’s because the filename for both will become something like this:

/files/2018/01/photo-200x200.jpg

As you can see, there’s nothing in the filename that specifies which crop mode. When you embed the thumbnail through the Media Library it will insert a bit of code that does specify the crop mode, but that information is basically courtesy information and doesn’t control which actual file is displayed on the page.

If you find that your cropped thumbnails keep cropping off people’s heads, take a look at the face detection plugin My Eyes Are Up Here.

More Tips & Tricks:

View Comments

  • Hi, thanks for the post. I want to change the existing medium sized image array from center to top center rather than add a new image size, how would I do that David? Thanks in advance.

    • Good question, and I don't know the answer. I haven't tried modifying the existing thumbnail parameters, although I'm guessing it could get messy, especially with updates.

      • Managed to get what I needed with this, hope it helps someone.

        add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'wc_child_set_gallery_thumbnail_crop' );

        function wc_child_set_gallery_thumbnail_crop( $size ) {
        $size = array(
        'width' => 300,
        'height' => 300,
        'crop' => array( 'center', 'top' ),
        );
        return $size;
        }

  • Great guide, many thanks!
    I have mixed horizontal and vertical images and tested with Soft Crop in WP media settings (crop unchecked) but I still get square thumbs.
    In your examples under Soft Crop you have 2 thumbs: one horizontal and one vertical.
    Is it possible to get the same in WP or will the thumbs always be square? In such case what's really the difference with Hard Crop?

    • It is possible to get that effect using the soft crop. Not sure why you're not getting that result, but some ideas to try... Are you looking at the actual image files or how they're displayed on a page? The reason I ask is that the theme's CSS might be forcing the square display. And if you're looking through the site's front end, could caching (either server or browser) be showing you the old version? Are you regenerating the thumbnails and replacing the originals? They'd be the first things I'd be checking if I ran into this issue.

  • Is there any way you could provide some examples? I have no idea how or where you are suppose to add these lines to your functions.php

      • I don't know if the rest of this code is correct, I saw this on another website but still having no luck.

        if ( function_exists( 'add_theme_support' ) ) {
        add_theme_support( 'post-thumbnails' );
        add_image_size( 'wordpress-thumbnail', 209, 209, array( 'right', 'bottom' ) );
        }

        I've tried different sizes, like 500 by 100, just to see if it is working, but it only scales it down to the lowest number and has no crop effect at all.

      • Are you sure you pressed save? They aren't showing up for me. I even switched browsers in case it was a cache issue or something.

  • You might want to take a look at WP SmartCrop (http://wpsmartcrop.com). It uses a focus point like My Eyes Are Up Here, but performs the final proportion cropping using CSS and javascript in the front end, so you can have any image styles you want, like width: 100%; height: 200px; and still get a good crop on all devices.

  • Great post, thank you. You were #5 on Google for me when I searched "how does wordpress crop thumbnails" (without the quotes). This is helping me with trying to figure out a default image size for featured images on a WP blog.

  • How i can crop image with strict aspect ratio and additional padding (white default) - if it need.

    Per example:

    • By itself, Wordpress's thumbnail process won't add the padding. A few ways to accomplish it come to mind, but it would depend on your site and how exactly you want it to behave where. The first step is to use Wordpress's soft crop mode, but then you'd need to handle the display with something else. You could put the thumbnails in a wrapping div container and specify the dimensions. You could add padding to the sides with CSS. Or you could upload an image that already has the padding applied. There might also be other ways, but none of them are a simple switch in the thumbnail generation process.

Share