How to Add Custom Image Sizes to WordPress Uploader

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:

 

image_size_names_choose

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

About Jean Galea

Jean Galea is a WordPress developer, podcaster and entrepreneur. He is the founder of WP Mayor and WP RSS Aggregator. His personal blog can be found at jeangalea.com. Check out his podcast focused on doing business with WordPress over at Mastermind.fm.

33 Responses

  1. Denny / initial-blog
    Denny / initial-blog December 19, 2011 at 11:40 | | Reply

    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…

  2. Denny / initial-blog
    Denny / initial-blog December 19, 2011 at 11:47 | | Reply

    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!

  3. Denny / initial-blog
    Denny / initial-blog December 19, 2011 at 11:52 | | Reply

    Anaother question: Can we use this custom image size in gallerie now?

  4. Michele
    Michele February 3, 2012 at 12:46 | | Reply

    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!

  5. Brendan
    Brendan February 9, 2012 at 19:43 | | Reply

    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.

  6. neil
    neil February 15, 2012 at 11:03 | | Reply

    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

  7. Matthew
    Matthew February 21, 2012 at 23:08 | | Reply

    is there a way to add multiple new sizes?

  8. pancho
    pancho August 29, 2012 at 20:06 | | Reply

    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.

  9. Darren
    Darren December 8, 2012 at 00:50 | | Reply

    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

  10. Pedro
    Pedro January 17, 2013 at 03:28 | | Reply

    thanks for the tip!
    this works perfectly for me with WordPress 3.5

  11. Manuel
    Manuel January 19, 2013 at 23:45 | | Reply

    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

  12. pankaj
    pankaj January 24, 2013 at 10:40 | | Reply

    Nice post…. i really learn a lot …..thanks for nice post.

  13. David
    David February 22, 2013 at 18:20 | | Reply

    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!

  14. loi dich
    loi dich April 26, 2013 at 15:36 | | Reply

    This is content of which file ? I can’t find it, so sad

  15. GP
    GP May 16, 2013 at 08:18 | | Reply

    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 ??

  16. Denis
    Denis November 12, 2013 at 07:53 | | Reply

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

  17. Tudor
    Tudor March 10, 2014 at 15:12 | | Reply

    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,

  18. adtheme
    adtheme March 20, 2014 at 03:03 | | Reply

    Hello, take a look to this plugin -> http://demo.ad-theme.com/plugin/imager/

    – it creates unlimited image sizes (cropped and not)
    – it adds sizes on media select field
    – it adds css filtering and animations
    – it can manage watermarks

    Bye

  19. Errors flow
    Errors flow July 20, 2016 at 22:43 | | Reply

    Follow link explains how to add custom size into wordpress media uploader

    http://errorsflow.com/index.php/2016/07/21/custom-image-sizes-not-showing-media-uploader-wordpress/

  20. target mobile codes september 2014

    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.

  21. Amy
    Amy March 13, 2017 at 13:52 | | Reply

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

  22. dominoqq
    dominoqq May 12, 2017 at 09:46 | | Reply

    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!

Leave a Reply

  
Please enter an e-mail address