Custom image size in new media uploader

1 Views

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.

Read More

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

Thanks!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I managed to sort out my problem, a bit differently than I first approached it – but it is a solution I’m even more pleased.

    So, when you use the new media uploader, you have a jquery code that looks something like this:
    jQuery(document).ready(function($){
    var custom_uploader;
    $(‘.upload_image_button’).unbind(‘click’).click(function(e) {
    e.preventDefault();
    formfieldID=jQuery(this).prev().attr(“id”);

        //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
            text: 'Choose Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.' + formfieldID).val(attachment.url);
    });

    //Open the uploader dialog
    custom_uploader.open();
});
});

    Now, note the part of the code that gets the selected file’s url:
    $(‘.’ + formfieldID).val(attachment.url);

    This gets the ORIGINAL attachment’s (image) url. So, to get some other image size, like thumbnail, large, etc. you use this:
    $(‘.’ + formfieldID).val(attachment.sizes.thumbnail.url);

    AND in the end, you can even use your own custom image size like this:
    $(‘.’ + formfieldID).val(attachment.sizes.mysize.url);

    BUT… 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! 🙂