HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 139 posts at DZone. You can read more from them at their website. View Full User Profile

Add Custom Image Sizes Into Media Library

02.16.2013
| 1703 views |
  • submit to reddit

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




Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)