Over a million developers have joined DZone.

Add Custom Image Sizes Into Media Library

DZone's Guide to

Add Custom Image Sizes Into Media Library

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In a previous code snippet we found about how you can define new custom images sizes to use on your WordPress theme.

This will use the WordPress built in function called add_image_size().

add_image_size( 'custom-image-size1', 300, 900, true );

This function takes 4 parameters:

  • Image Size Name
  • Width in pixels
  • Height in pixels
  • Crop the image to the size.

Add this function into your functions.php file and everytime WordPress uploads a new image it will resize it to be the size you defined in this function.

The way you can use this in your theme is by passing the image size name into the_post_thumbnail() function, like this.

the_post_thumbnail( 'custom-image-size1' );

Editor Adding Image Sizes

The problem with custom images sizes is that the only way to use them is for the theme developer to insert them in the code. But what if you want the content editor to use these custom image sizes?

The most common option to use custom image sizes is to edit the dimensions of the default image sizes in the Settings -> Media menu page.

Media Settings

But this will override the default sizes and will allow the editor to choose the image sizes, the sizes they use might not be the correct size to fit theme. This is why it's better for the theme developer to choose the sizes of images you can upload.

We want the content editor to be able to select these new sizes when adding an image into the post, by default when using add_image_size() these custom image sizes won't appear when inserting into the post.

For this we need to use the filter image_size_name_choose and make sure we add the custom image sizes into the size array. The values we return from this function will be used to select new sizes when adding images into your posts. Adding the new custom image sizes into this array will make sure that the editor can pick these new sizes and will make sure that the images will still fit the design of the theme.

Add the following into your functions.php file to allow the editors to choose these new sizes.

function display_custom_image_sizes( $sizes ) {
  global $_wp_additional_image_sizes;
  if ( empty($_wp_additional_image_sizes) )
    return $sizes;
  foreach ( $_wp_additional_image_sizes as $id => $data ) {
    if ( !isset($sizes[$id]) )
      $sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
  return $sizes;
add_filter( 'image_size_names_choose', 'display_custom_image_sizes' );

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}