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
| April 14, 2015 @ 07:08:48 | Current Revision | ||
|---|---|---|---|
| Content | |||
| Unchanged: Originally seen here: <a href="http:// havecamerawilltravel.com/ photographer/ wordpress-thumbnail-crop" target="_blank" >http://havecamerawilltravel.com/ photographer/ wordpress-thumbnail-crop</a> | Unchanged: Originally seen here: <a href="http:// havecamerawilltravel.com/ photographer/ wordpress-thumbnail-crop" target="_blank" >http://havecamerawilltravel.com/ photographer/ wordpress-thumbnail-crop</a> | ||
| Unchanged: 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. <a href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">Here’s a guide to doing that.</a> | Unchanged: 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. <a href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">Here’s a guide to doing that.</a> | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Deleted: <img class="aligncenter size-medium wp-image-9475" src="http:// | Added: <img class="aligncenter size-medium wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 678x397.jpg" alt="thumbnail-example" width="678" height="397" data-lazy-loaded="true" /> | ||
| Deleted: <img class="aligncenter size-full wp-image-9485" src="http:// | Added: <img class="aligncenter size-full wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical.jpg" alt="thumbnail- example-vertical" width="397" height="678" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Soft Crop</h3> | Unchanged: <h3>Soft Crop</h3> | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: 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: | Unchanged: 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: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );</code> | ||
| Unchanged: With that, you end up with this for the landscape image: | Unchanged: With that, you end up with this for the landscape image: | ||
| Deleted: <img class="aligncenter size-test-false wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-false wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 199x117.jpg" alt="thumbnail-example" width="199" height="117" data-lazy-loaded="true" /> | ||
| Unchanged: and this for the portrait image: | Unchanged: and this for the portrait image: | ||
| Deleted: <img class="aligncenter size-test-false wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-false wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-117x199.jpg" alt="thumbnail- example-vertical" width="117" height="199" data-lazy-loaded="true" /> | ||
| Unchanged: 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 <a title="How to Resize WordPress Thumbnails" href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">How to Resize WordPress Thumbnails</a>. | Unchanged: 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 <a title="How to Resize WordPress Thumbnails" href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">How to Resize WordPress Thumbnails</a>. | ||
| Unchanged: <h3>Hard Crop</h3> | Unchanged: <h3>Hard Crop</h3> | ||
| Unchanged: 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 <a href="http:// havecamerawilltravel.com/ photographer/">my homepage</a>. It has the virtue of making sure all the thumbnails are the same shape, which I prefer for its tidiness. | Unchanged: 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 <a href="http:// havecamerawilltravel.com/ photographer/">my homepage</a>. It has the virtue of making sure all the thumbnails are the same shape, which I prefer for its tidiness. | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: If you’re specifying it in functions.php, it looks something like this: | Unchanged: If you’re specifying it in functions.php, it looks something like this: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );</code> | ||
| Unchanged: With that, you up with this for the landcape image: | Unchanged: With that, you up with this for the landcape image: | ||
| Deleted: <img class="aligncenter size-test-true wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-true wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 198x198.jpg" alt="thumbnail-example" width="198" height="198" data-lazy-loaded="true" /> | ||
| Unchanged: And this for the portrait image: | Unchanged: And this for the portrait image: | ||
| Deleted: <img class="aligncenter size-test-true wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-true wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-198x198.jpg" alt="thumbnail- example-vertical" width="198" height="198" data-lazy-loaded="true" /> | ||
| Unchanged: <h2>Using Array Crops</h2> | Unchanged: <h2>Using Array Crops</h2> | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: 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. | Unchanged: 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. | ||
| Unchanged: To illustrate, I’ve included what happens in both orientations below. | Unchanged: To illustrate, I’ve included what happens in both orientations below. | ||
| Unchanged: 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. [<a title="How to Resize WordPress Thumbnails" href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">Here’s more information</a> on that.] | Unchanged: 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. [<a title="How to Resize WordPress Thumbnails" href="http:// havecamerawilltravel.com/ photographer/ wordpress-resize- thumbnails">Here’s more information</a> on that.] | ||
| Unchanged: <h3>Top Left</h3> | Unchanged: <h3>Top Left</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the top left: | Unchanged: This is how you’d focus the hard crop on the top left: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );</code> | ||
| Unchanged: 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: | Unchanged: 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: | ||
| Deleted: <img class="aligncenter size-test-array-top-left wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array-top-left wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 201x201.jpg" alt="thumbnail-example" width="201" height="201" data-lazy-loaded="true" /> | ||
| Unchanged: And this is what happens with an image in portrait (vertical) orientation. It just takes the top: | Unchanged: And this is what happens with an image in portrait (vertical) orientation. It just takes the top: | ||
| Deleted: <img class="aligncenter size-test-array-top-left wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array-top-left wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-201x201.jpg" alt="thumbnail- example-vertical" width="201" height="201" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Top Center</h3> | Unchanged: <h3>Top Center</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the top center: | Unchanged: This is how you’d focus the hard crop on the top center: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'top' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'top' ) );</code> | ||
| Unchanged: 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: | Unchanged: 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: | ||
| Deleted: <img class="aligncenter size-test-array-top-center wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array-top-center wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 202x202.jpg" alt="thumbnail-example" width="202" height="202" data-lazy-loaded="true" /> | ||
| Unchanged: And this is what you get with a portrait image. It takes the top of the image: | Unchanged: And this is what you get with a portrait image. It takes the top of the image: | ||
| Deleted: <img class="aligncenter size-test-array-top-center wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array-top-center wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-202x202.jpg" alt="thumbnail- example-vertical" width="202" height="202" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Top Right</h3> | Unchanged: <h3>Top Right</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the top right: | Unchanged: This is how you’d focus the hard crop on the top right: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'top' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'top' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It takes the right side of the image: | Unchanged: This is what you get with a landscape image. It takes the right side of the image: | ||
| Deleted: <img class="aligncenter size-test-array-top-right wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array-top-right wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 203x203.jpg" alt="thumbnail-example" width="203" height="203" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It takes the top of the image: | Unchanged: And this with a portrait image. It takes the top of the image: | ||
| Deleted: <img class="aligncenter size-test-array-top-right wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array-top-right wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-203x203.jpg" alt="thumbnail- example-vertical" width="203" height="203" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Center Left</h3> | Unchanged: <h3>Center Left</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the center left: | Unchanged: This is how you’d focus the hard crop on the center left: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'center' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'center' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It takes the left side: | Unchanged: This is what you get with a landscape image. It takes the left side: | ||
| Deleted: <img class="aligncenter size-test-array-center-left wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array-center-left wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 204x204.jpg" alt="thumbnail-example" width="204" height="204" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It focuses on the middle, making it the same as the default hard crop: | Unchanged: And this with a portrait image. It focuses on the middle, making it the same as the default hard crop: | ||
| Deleted: <img class="aligncenter size-test-array-center-left wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array-center-left wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-204x204.jpg" alt="thumbnail- example-vertical" width="204" height="204" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Center</h3> | Unchanged: <h3>Center</h3> | ||
| Unchanged: This would focus on the absolute center. In reality, it’s redundant because it’s exactly the same as the default hard crop above. | Unchanged: This would focus on the absolute center. In reality, it’s redundant because it’s exactly the same as the default hard crop above. | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'center' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'center' ) );</code> | ||
| Unchanged: This is what you get with a landscape image: | Unchanged: This is what you get with a landscape image: | ||
| Deleted: <img class="aligncenter size-test-array- center-center wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array- center-center wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 205x205.jpg" alt="thumbnail-example" width="205" height="205" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image: | Unchanged: And this with a portrait image: | ||
| Deleted: <img class="aligncenter size-test-array- center-center wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array- center-center wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-205x205.jpg" alt="thumbnail- example-vertical" width="205" height="205" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Center Right</h3> | Unchanged: <h3>Center Right</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the center right: | Unchanged: This is how you’d focus the hard crop on the center right: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'center' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'center' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It takes the right side: | Unchanged: This is what you get with a landscape image. It takes the right side: | ||
| Deleted: <img class="aligncenter size-test-array- center-right wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array- center-right wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 206x206.jpg" alt="thumbnail-example" width="206" height="206" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It takes the center, which is the same as the default hard crop: | Unchanged: And this with a portrait image. It takes the center, which is the same as the default hard crop: | ||
| Deleted: <img class="aligncenter size-test-array- center-right wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array- center-right wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-206x206.jpg" alt="thumbnail- example-vertical" width="206" height="206" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Bottom Left</h3> | Unchanged: <h3>Bottom Left</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the bottom left: | Unchanged: This is how you’d focus the hard crop on the bottom left: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'bottom' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'bottom' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It takes the left: | Unchanged: This is what you get with a landscape image. It takes the left: | ||
| Deleted: <img class="aligncenter size-test-array-bottom-left wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array-bottom-left wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 207x207.jpg" alt="thumbnail-example" width="207" height="207" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It takes the bottom: | Unchanged: And this with a portrait image. It takes the bottom: | ||
| Deleted: <img class="aligncenter size-test-array-bottom-left wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array-bottom-left wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-207x207.jpg" alt="thumbnail- example-vertical" width="207" height="207" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Bottom Center</h3> | Unchanged: <h3>Bottom Center</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the bottom center: | Unchanged: This is how you’d focus the hard crop on the bottom center: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'bottom' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'bottom' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It focuses on the center, which is the same as the default hard crop: | Unchanged: This is what you get with a landscape image. It focuses on the center, which is the same as the default hard crop: | ||
| Deleted: <img class="aligncenter size-test-array- bottom-center wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array- bottom-center wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 208x208.jpg" alt="thumbnail-example" width="208" height="208" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It takes the bottom: | Unchanged: And this with a portrait image. It takes the bottom: | ||
| Deleted: <img class="aligncenter size-test-array- bottom-center wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array- bottom-center wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-208x208.jpg" alt="thumbnail- example-vertical" width="208" height="208" data-lazy-loaded="true" /> | ||
| Unchanged: <h3>Bottom Right</h3> | Unchanged: <h3>Bottom Right</h3> | ||
| Unchanged: This is how you’d focus the hard crop on the bottom right: | Unchanged: This is how you’d focus the hard crop on the bottom right: | ||
| Unchanged: <code>add_image_size( 'wordpress-thumbnail', 209, 209, array( 'right', 'bottom' ) );</code> | Unchanged: <code>add_image_size( 'wordpress-thumbnail', 209, 209, array( 'right', 'bottom' ) );</code> | ||
| Unchanged: This is what you get with a landscape image. It takes the right: | Unchanged: This is what you get with a landscape image. It takes the right: | ||
| Deleted: <img class="aligncenter size-test-array- bottom-right wp-image-9475" src="http:// | Added: <img class="aligncenter size-test-array- bottom-right wp-image-9475" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- 209x209.jpg" alt="thumbnail-example" width="209" height="209" data-lazy-loaded="true" /> | ||
| Unchanged: And this with a portrait image. It takes the bottom: | Unchanged: And this with a portrait image. It takes the bottom: | ||
| Deleted: <img class="aligncenter size-test-array- bottom-right wp-image-9485" src="http:// | Added: <img class="aligncenter size-test-array- bottom-right wp-image-9485" src="http://wiki.pixelpress.com.au/ files/2015/04/ thumbnail-example- vertical-209x209.jpg" alt="thumbnail- example-vertical" width="209" height="209" data-lazy-loaded="true" /> | ||
| Unchanged: <h2>Tips</h2> | Unchanged: <h2>Tips</h2> | ||
| Unchanged: 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: | Unchanged: 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: | ||
| Unchanged: <code>/files/ 2015/01/photo- 200x200.jpg</code> | Unchanged: <code>/files/ 2015/01/photo- 200x200.jpg</code> | ||
| Unchanged: 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. | Unchanged: 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. | ||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.