How To Add Custom Image Sizes To The WordPress Media Library

WordPress media managing capabilities are pretty awesome and always getting more powerful with each new release.

You can upload images, crop them, add alternative text, title, description, and caption text when inserting them into posts and pages, display them to the right, left and center, display them in a gallery, etc.

You also have control over image sizes.

Here’s how.

WordPress Image Size Settings

From the Settings > Media panel in the back-end, users can adjust the maximum width and height of large, medium, and small images.

They can also leave the default image size settings on. These are 1024px x 1024px for large images, 300px x 300px for medium images, and 150px x 150px for small images.

WordPress Media Settings Panel
WordPress Media Settings Panel

These settings ensure that, when users upload an image to their WordPress site, WordPress creates three copies of the size specified in the media settings and saves them together with the original image file.

The upshot is that, when users insert an image into their post by accessing the Media Library, they have the choice of opting for a large, medium, and small image, or for the full size, which is the size of the original image uploaded to the site.

WordPress Media Library on Image Selection
WordPress Media Library on Image Selection

Creating New Image Sizes

If you’re trying your hand at building a custom WordPress theme or customizing an existing one, and you think your design benefits from additional image sizes besides those specified in the Media settings, WordPress makes adding extra image sizes an easy task.

To create additional image sizes for a theme, WordPress has a specific function add_image_size( $name, $width, $height, $crop ).

Let’s see it in action in the Twenty Fourteen theme.

add_image_size( 'twentyfourteen-full-width', 1038, 576, true );		

WordPress identifies this size by the name of twentyfourteen-full-width, the width will be 1038px, the height 576px, and the image will be cropped to these exact measurements.

This function is placed in the functions.php file of your theme. If you look into WordPress default themes, notice that it’s usually incorporated inside a setup function together with other theme setup tasks, and hooked to the after_setup_theme() action hook.

Where Did My New Image Sizes Go?

If you add extra image sizes to your theme, or your child theme if you’re customizing an existing theme, the first thing you notice is this.

The new image sizes don’t appear inside the size dropdown box in the Media Library when inserting an image into your post or page.

But we need that functionality, otherwise users can’t easily select our custom size graphics.

No worries, WordPress has the solution for this too.

How To Take Advantage Of The image_size_names_choose() Filter

WordPress has a great filter, the image_size_names_choose() filter.

Adapting the Codex example, here’s how you can use it in the functions.php file of your theme.

function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'your-custom-size1' => __( 'Your Custom Size 1 Name' ),
    'your-custom-size2' => __( 'Your Custom Size 2 Name' ),
    'your-custom-size3' => __( 'Your Custom Size 3 Name' ),
  ) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

If you replace ‘your-custom-size1’, ‘your-custom-size2’, and ‘your-custom-size3’ with the image size names you created using add_image_size(), and replace the labels with your own text, you should be good to go (The WordPress team also recommends you prefix the name of the function with your theme’s or child theme’s name to make sure this function doesn’t conflict with some other piece of code on your site).

If you have just one new image size instead of three, build your array using that one image size by itself.

I used this little snippet in one of my themes, and this is the result.

Custom Image Sizes Dsiplaying Inside the WP Media Library
Custom Image Sizes Dsiplaying Inside the WP Media Library

To Sum Up

This post has shown how to display new custom image sizes into the WordPress Media Library, so that users can easily pick the right one for the image they select for their post or page.

If you’re customizing an existing theme, or building your own, and your awesome design needs a few extra image sizes besides those already set in the Media Settings, WordPress has you covered.

What’s your experience with the WordPress Media Library? Does your theme use custom image sizes for graphics files? I’d love to hear from you in the comments below.
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s