How to Add Custom Image Sizes to WordPress Uploader

Written by Jean Galea
Written by Jean Galea

Last updated on 10 Mar 2014

WordPress 3.3 is finally out, and features a host of new improvements in the UI, along with other novelties. A new feature I'm digging is the image_size_names_choose filter, which enables us to add new image sizes to the media upload/insert interface.

WP Mayor is supported by its audience. If you purchase through a link on our site, we may earn a commission. Here’s why you can trust us.

Table Of Contents

Table of Contents

Introduction

See the updated and more complete post about image sizes in WordPress

WordPress 3.3 is finally out, and features a host of new improvements in the UI, along with other novelties.

A new feature I’m digging is the image_size_names_choose filter, which enables us to add new image sizes to the media upload/insert interface.

Check out the code below and the resulting screen:

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size', 300, 100, true ); //(cropped)
}

add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

image_size_names_choose

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

<span style="font-weight: 400">Written by: </span>Jean Galea
Written by: Jean Galea

Jean Galea is an investor, entrepreneur, and blogger.

He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast.

His personal blog can be found at jeangalea.com.

Supported by our trusted partners

Quick Links

Did you find this article helpful?

Share Your Discovery

38 Responses

  1. hello sir, how would you make so the size is width:100% and height is auto? thank you hope to hear from you soon

  2. My coder is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a number of
    websites for about a year and am concerned about switching to another platform.
    I have heard excellent things about blogengine.net. Is there a way
    I can transfer all my wordpress posts into it? Any help would be really appreciated!

  3. Truly no matter if someone doesn’t know after that its up to other visitors
    that they will assist, so here it occurs.

  4. Predator X which has now been recognised as a species of Pliosaurus is actually bigger than the Dunkleosteus and with its
    30 cm lengthy enamel and massive jaw would have been a formidable opponent for Large Daddy to should kill.

  5. Hello Jean! First I want to thank you for this post, it’s working perfectly but I just can’t figure out how you can add multiple sizes. I need two, for landscape and portrait pictures and now I have set it up only for the landscape ones,

  6. hello sir, how would you make so the size is width:100% and height is auto? thank you hope to hear from you soon

  7. hi
    I have put this code im my page. I want to apply this in plugins but I cannot select new size.
    what is the problem with this. any idea ??

  8. Hi Jean,
    I am very much interested in learning more about the update on this post. So I tried going to the link: http://wp.me/p26VLu-7DH that you added in the above post but its sending me to a 404 page. Can you please fix it? I really want to read about the update you have on this. Thanks much!

  9. I have a problem:
    add_theme_support(‘post-thumbnails’);
    if (function_exists( ‘add_image_size’ ) ) {
    add_image_size(‘Imagen_slider’, 960, 400, true);
    add_image_size(‘Imagen_entrada’, 120, 120, true);
    add_image_size(‘Imagen_Item_Area’, 150, 95, true);
    }
    }
    add_filter(‘image_size_names_choose’, ‘size_mejorada_custom’);
    function size_mejorada_custom($sizes) {
    $addsizes = array(
    ‘Imagen_slider’ => __( ‘Versión grande para usarla en la portada’),
    ‘Imagen_entrada’ => __(‘Pequeña para los resúmenes.’),
    ‘Imagen_Item_Area’ => __(‘Icono para las entradas de Areas’)
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
    }

    When i tried to upload a picture with size 117 * 115
    In the uploader i can select only

    Miniatura
    Medio
    Grande
    Tamaño completo (117 × 115)
    Versión grande para usarla en la portada
    Pequeña para los resúmenes.
    Icono para las entradas de Areas (117 × 95)

    Only i can select: Tamaño completo and Icono para las entradas de Areas. But it have not my custom size,

    I use in the code:
    the_post_thumbnail(‘Imagen_Item_Area’);

    I think that i am using well the instructions.
    Thanks for your help

  10. I have a custom image size ‘slider’ defined. 950px X 300 px. In the wp_options table ‘slider_w’ = 950 and ‘slider_h’ = 300. When trying to insert an image to a post the size for ‘Slider’ is shown as 590×186. Any thoughts on why this may be happening?

    Thanks

  11. Hi,

    I tried but don´t work completely. I see the new size in the Media Edit but can select the new size and also doesn´ display the width and height, any idea ?

    Thanx.

  12. I tried the code and it generates the image in the upload folder but i don’t see the new option in the media upload screen. I’m using 3.3.1 this would be really useful for my client to able to choose image size based on location rather than dimension ie ‘main post’, ‘recent post’

    many thanks

    neil

  13. This is fantastic, great article.
    One thing, is there a way to have these custom image sizes show up in the “edit image” editor as well? So if I go to edit the photo in the uploader, when I go to crop it and apply, it only shows the wordpress defaults.

  14. Hi.
    i have created my new image size 300 x 100 like your example but if i upload an image with the same width and height i’m not able to select New Size but only Full Size.
    Any help is appreciated!

    1. It should work as if it was a normal default wordpress size, so it should be usable in galleries too. There is also a great plugin called ‘Regenerate thumbnails’ which can be useful in combination with the code above.

  15. So, if the image was already uploaded, it seems to be KO, but if i upload a new image, it’s OK.

    Thx for your help, it will be usefull!

  16. Hi, Thx for the tip, but, it doesn’t work on my website.

    i pasted your code in my function file and when i want to insert a pic, i can see my new size without dimension, but i can’t select it…

    1. Try saving the post first and then see if you can select it. Or else try uploading one first image through the media gallery. It should work from then onwards. It just needs to be initialised that first time. Let me know if you still have problems after having tried that.

Leave a Reply

Your email address will not be published. Required fields are marked *

 Discover more tips and tools. 
Join 5000+ designers, developers, and website builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email every week.
WP Mayor Newsletter

2023 Reader Survey

What would make this article better for you?

 Discover more tips and tools. 
Join 5000+ designers, developers, and website builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email every week.
WP Mayor Newsletter

Our latest discoveries...

What's missing?