Add Custom Image Sizes to Media Library Size Selection Drop Down List

I’m not sure why I didn’t hunt this down sooner, but here’s a simple and slick way to add your theme’s custom image sizes to the WordPress media library size selection drop down list. I often create numerous new image sizes because it’s smart to use the optimal size for the content area in which the image appears. Oddly WordPress doesn’t have built-in way to enable the use of your custom image sizes in the media library so here’s how you do it.

First, if you haven’t already, define some custom images sizes in your functions.php file:

// MORE IMAGE SIZES -------------------------- //

add_image_size('square-50',   50,   50,   TRUE);
add_image_size('square-100',  100,  100,  TRUE);
add_image_size('panoramic',   640,  240,  TRUE);

Notice I’ve added three new images sizes, two that are square at 50×50 and 100×100 pixels. The third image is a panoramic at 640×240. You can use the dimensions you’d like and you can also name them anything you’d like. For example, you could name them 50-square, 100-square and pano if you want. The name is your choice. The numbers that follow the name are width and then height.

Next you’ll want to add those new image sizes to the media library image size drop down selector. Use this code to do that.

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );  
function custom_image_sizes_choose( $sizes ) {  
    $custom_sizes = array(  
        'square-50' => 'Square',
        'square-100' => 'Square',
        'panoramic' => 'Panoramic',
    );
    return array_merge( $sizes, $custom_sizes );  
}

Notice in this case that we first specify the name from our original code, for example square-50 and square-100 and panoramic. Those are the keys that WordPress uses to fetch the information about your image sizes. The second bit of information you specify there is a display name. Notice in my case, I used Square for both instances of the square images. That’s because WordPress automatically appends the image dimensions to the name in the drop down menu. It’s redundant to add the dimension in this case.

That’s all you need to do so worst case, copy and paste the code above, into functions.php and then upload a new image and try inserting it into a page or post. You’ll see the new image sizes in the drop down and from there you can tweak the code for your needs.

If you have an existing blog with a long history of image uploads, you’ll probably need to pass through all your images and resize them using your new image size information. There’s a great little plugin designed to do that for you and it’s called AJAX Thumbnail Rebuild. Give that a whirl and you’ll be set.