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:
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/2015/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.Revisions
- September 2, 2015 @ 14:27:11 [Current Revision] by PeterLugg
- September 2, 2015 @ 14:27:11 by PeterLugg
- September 2, 2015 @ 14:25:39 by PeterLugg
- April 14, 2015 @ 07:08:48 by PeterLugg
Revision Differences
There are no differences between the September 2, 2015 @ 14:27:11 revision and the current revision. (Maybe only post meta information was changed.)
No comments yet.