Support » Plugins » Hacks » Custom image size in new media uploader

  • I am developing a relatively simple WordPress plugin for a client. It is used to upload/select images which are then saved (as image path) in the option variables and used as full-background images for the website’s different categories/pages/etc..

    Since images are of “wallpapery nature” (i.e. big) I added a custom image size with a maximum width of 1920 pixels (height is set to “auto”, i.e. no image cropping). And that part also works, upon upload, images are being resized to my custom 1920 px width.

    Now, the thing is, for uploading/choosing the background image I’m using the new media uploader and it works except that the chosen image (path) is always for the original uploaded image, for example “my-background-image.jpg”.

    My question is: is there a way to enable users (or make the uploader do it automatically) to select the 1920 px sized version of the original image, for example “my-background-image-1920×1080.jpg”?


Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz


    To make your added image size selectable in the media uploader, hook the ‘image_size_names_choose’ filter and add your image to the passed array. The name as added is the key and the value is the string shown in the drop down selection. I believe if you add your size so that it is first in the array, it will be the default selection, but I’ve never tried it myself.

    Hello and thank you for the great answer!

    I did manage to find one more resolution for my specific problem/plugin.

    I played around with the jquery code for media uploader and changed the “original” code that gets the attachment (image) url from:
    $(‘.’ + formfieldID).val(attachment.url);

    $(‘.’ + formfieldID).val(attachment.sizes.thumbnail.url);

    This gets the url for the thumbnail size of the selected/uploaded image. If you want/need to, you can also use your own custom image size like this:
    $(‘.’ + formfieldID).val(attachment.sizes.mysize.url);

    Since I use my plugin to get the exact custom image size, this is very simple and practical way to get the url for the exact resized version of the uploaded image.

    >>P.S. I ran into one stupid but very time-consuming problem: DO NOT give your custom image size a name that is separated by a minus sign, like “background-image”; because while WordPress part of it will work (the new image size will be visible and usable) the jquery for media uploader won’t work with it.

    If you need a separator, use underscore instead, e.g. “background_image” and it will work normally! This could be a beginner’s error on my part, but I thought it could save someone some time! 🙂

    Moderator bcworkz


    I’m glad you found a simple answer that works for you. However, changing core files is never advisable. When that file gets updated, you will lose your changes and need to reapply them. If that is what you choose to do, so be it, it is your site and your decision. The issue escalates when people forgo updates to avoid losing customizations, which can possibly leave them open to security vulnerabilities that are patched in the latest code. A previously unknown vulnerability that is now known to the entire hacker community.

    I’m not saying you must do anything differently, though exploring sustainable alternatives would be a good idea. My intention is mainly ensuring anyone following along is fully informed of possible ramifications of your approach. Regardless, thank you for sharing.

    Maybe I didn’t explain myself or my conclusion well enough. 🙂

    I didn’t change the media uploader in the source of WordPress. I know changing core files is bad practice because of all the reasons you listed and I personally would never use a solution that includes changing the core files.

    What I meant is… When you want to use media uploader in your own plugin or theme, you need to enqueue some files to make it work. In my case, my starting point was this tutorial:

    One of the things you enqueue is the jquery code that loads the media uploader (for example, you enqueue my-plugin.js file). In that code you can modify the look and features of the uploader (for example remove the sidebar).

    So, my solution/code was meant for that specific custom jquery code/file that is loaded by the custom made plugin.

    Moderator bcworkz


    Thank you for the additional explanation. I feel better now 🙂

    Hehe, no problem, thank you for the reply and advice! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom image size in new media uploader’ is closed to new replies.