WordPress: add_image_size (with examples)

WordPress’s `add_image_size` function can be a little tricky to master, especially understanding how the cropping and resizing works. I’ve dedicated a blog entry to explaining how the images are cropped on an image that is larger than the maximum size, and below are the results.

The WordPress documentation for the `add_image_size()` function has the following components:

###Usage###

< ?php add_image_size( $name, $width, $height, $crop ); ?>

###Parameters###

$name
(string) (required) The new image size name.
Default: None

$width
(int) (optional) The post thumbnail width in pixels.
Default: 0

$height
(int) (optional) The post thumbnail height in pixels.
Default: 0

$crop
(boolean) (optional) Crop the image or not. False – Soft proportional crop mode ; True – Hard crop mode.
Default: false

###Original Image (404w x 1587h)###
Next, the original image, which is 404w by 1587h.

###Soft Crop, Very Tall Height###

This results in a proportional image that is 185w by 726h. In this case the image is limited by it’s width, 185px.

add_image_size( ‘feature’, 185, 1200, false );

###Soft Crop, Normal Height###

This results in a proportional image that is 54w by 215h. The image is limited by the height.

add_image_size( ‘feature1’, 185, 215, false );

###Hard Crop, Very Tall Height###

This results in a disproportionate image which is exactly 185 x 1200, but the edges of the image are lost. This works semi-ok here but would not be good if we were uploading a logo, something with text, or a person with important features on the edges of the screen.

add_image_size( ‘feature2’, 185, 1200, true );

###Hard Crop, Normal Height###

This results in a disproportionate image which is exactly 185 x 215, but the edges of the image are lost. This doesn’t work well here at all and would not be good if we were uploading a logo, something with text, or a person with important features on the edges of the screen.

add_image_size( ‘feature3’, 185, 215, true );

###default thumbnail###

For comparison, this is the WordPress default thumbnail (except the size is set to 185 (default is 150). By default the thumbnail setting is to “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”

Related Posts:

• No Related Posts