How To Add Custom Image Sizes In WordPress Media Manager

How To Add Custom Image Sizes In WordPress Media Manager

Add Custom Image Sizes In WordPress Media Manager

In case you run a website where you need the snapshots to be a particular length, including an e-commerce size in which you want the pictures to be a selected size for uniformity, these defaults won’t fit your wishes.

For today’s Weekend WordPress mission, I’m going to reveal you a way to add a custom image length to the media library.

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

Description

Cropping behavior for the image size is dependent on the value of $crop:

If false (default), images will be scaled, not cropped.
If an array in the form of array( x_crop_position, y_crop_position ):
x_crop_position accepts ‘left’ ‘center,’ or ‘right.’
y_crop_position allows ‘top,’ ‘center,’ or ‘bottom.’ Images will be cropped to the specified dimensions within the defined crop area.
If true, images will be cropped to the specified dimensions using center positions.

Parameters

$name
(string) (Required) Image size identifier.

$width
(int) (Required) Image width in pixels.
$height
(int) (Required) Image height in pixels.

$crop
(bool|array) (Optional) Whether to crop images to specified width and height or resize. An array can specify the positioning of the crop area.

Default value: false
Top ↑
Source File: wp-includes/media.php

277
278
279
280
281
282
283
284
285
function add_image_size( $name, $width = 0, $height = 0, $crop = false ) {
global $_wp_additional_image_sizes;

$_wp_additional_image_sizes[ $name ] = array(
‘width’ => absint( $width ),
‘height’ => absint( $height ),
‘crop’ => $crop,
);
}
View on Trac

Top ↑

Changelog

Changelog
Version Description
2.9.0 Introduced.
Top ↑
More Information

See also  How to Recover Deleted Photos, Files, and Text Messages on iPhone?

Top ↑
Reserved Image Size Names

‘thumb,’ ‘thumbnail,’ ‘medium,’ ‘large,’ ‘post-thumbnail.’

The names “thumb” & “thumbnail” are just aliases- they are the same.

For a detailed explanation and “why ” read further inside the image_downsize() article.

However, if needed, you can always set the options yourself:

1
2
3
update_option( ‘thumbnail_size_w’, 160 );
update_option( ‘thumbnail_size_h’, 160 );
update_option( ‘thumbnail_crop’, 1 );
Top ↑

Crop Mode

Set the image size by resizing the image proportionally (without distorting it):

1
add_image_size( ‘custom-size’, 220, 180 ); // 220 pixels wide by 180 pixels tall, soft proportional crop mode
Set the image size by cropping the image (not showing part of it):

1
add_image_size( ‘custom-size’, 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode
Set the image size by cropping the image and defining a crop position:

1
add_image_size( ‘custom-size’, 220, 220, array( ‘left’, ‘top’ ) ); // Hard crop left top

When setting a crop position, the first value in the array is the x axis crop position, the second is the y axis crop position.

x_crop_position accepts ‘left’ ‘center’, or ‘right’.
y_crop_position accepts ‘top’, ‘center’, or ‘bottom’.

By default, these values default to ‘center’ when using hard crop mode.

Top ↑

Using the New Image Sizes:

Now that you’ve defined some custom image sizes, there are a variety of ways that you can use them.
For Featured Images

To use your custom image sizes for a post’s featured image, you can use the_post_thumbnail() in the appropriate theme template file…

Note: To enable featured images the current theme must include add_theme_support( ‘post-thumbnails’ ); in its functions.php file. See also Post Thumbnails.

See also  How to Recover Deleted Photos, Files, and Text Messages on iPhone?

1
2
3
if ( has_post_thumbnail() ) {
the_post_thumbnail( ‘your-custom-size’ );
}
Top ↑

For Media Library Images (Admin)

You can also make your custom sizes selectable from your WordPress admin. To do so, you have to use the image_size_names_choose hook to assign them a normal, human-readable name…

1
2
3
4
5
6
7
add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ );

function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
‘your-custom-size’ => __( ‘Your Custom Size Name’ ),
) );
}
Top ↑

For General Media (PHP/Templates)

You can output images (by size) directly from the WordPress Media Library using PHP as well. To do this, simply use wp_get_attachment_image().

1
2
// Assuming your Media Library image has a post id of 42…
echo wp_get_attachment_image( 42, ‘your-custom-size’ );
Note: If you just want the image URL instead of a pre-built tag, you can use wp_get_attachment_image_src() instead.

Top ↑

Other Notes:

Using the ‘false’ setting will fail to produce a new image in the upload directory if one of the image dimensions of the uploaded image is equal to the new image size.

If a registered image size is removed from functions.php, then any image uploaded before that point and then deleted from the media library afterward, does not have those auto-generated sizes deleted too. Only image sizes that exist in functions.php are deleted.

Although height and width are not required parameters, their default values (0) will lead to unwanted behavior, so bear in mind that you should always define them. As mentioned before, use a value of 9999 to define the other dimension as the one to be considered when image resize is executed.

SOURCE: WORDPRESS

Trickbugs: Get the latest Trick and Tips
Logo
Enable registration in settings - general