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.

add_image_size

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

add_image_size

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

add_image_size

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

add_image_size

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

add_image_size

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

add_image_size

add_image_size

Related Posts:

  • No Related Posts
This entry was posted in Tech Tips, Web Development and tagged , , , , . Bookmark the permalink.

4 Responses to WordPress: add_image_size (with examples)

  1. Pingback: interiete.net: Die Sache mit den Bild-Uploads

  2. W says:

    @SlotsMarvel – that is a pretty basic PHP syntax:

    $image_size_name = “my_thumb”; $custom_width = 200; $custom_height = 400; $hardcrop = true; add_image_size( $image_size_name, $custom_width, $custom_height, $hardcrop );

  3. SlotsMarvel says:

    very helpful, thanks for this. Any chance that you know how to set the dimensions dynamically using a variable?

    Something like this

    add_image_size( ‘mythumb’, $custom_width, $custom_height, true );

    above doesn’t want to work, only if I enter the exact pixels values width numbers.

  4. VM says:

    Nice post. but I am wondering why most of premium themes developer uses true setting as it cuts uploaded image. Mostly I just change it to false manually though.

Leave a Reply

Your email address will not be published. Required fields are marked *