8

I want to select image from the WordPress 3.5 media uploader. I can get the image URL with the following code, but it gets the full size image. I want to get the thumbnail image url,how can I get that?

 var custom_uploader;
 $('.upload-image').click(function(e) {
        e.preventDefault();

        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        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
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            var abc = attachment.url;    //this is full image url. 
            alert (abc);
        });

        custom_uploader.open(); 
    });
8

You can debug the result of attachment by :

console.log(attachment); 

and if the thumbnail size available you can retrieve it using :

 var thumb = attachment.sizes.thumbnail.url;
 alert(thumb);
  • This is a very good solution but a little correction for people reading in the future: the url can be found at attachment.attributes.sizes.thumbnail.url. In sizes there are also available other options such as medium, medium_large and full as well as custom sizes. – AncientRo Jun 16 '17 at 15:00
0

Found this question doing my own research, and ended up developing a richer solution that I thought might be valuable.

If you want to know the url of the media size selected by the user, then the following code (full jQuery code below) will do that for you:

jQuery(function($) {
    // Bind to my upload butto
    $(document).on('click', 'a.custom-media-upload', function() {
        customUpload($(this));
        return false;
    });

    function customUpload(el) {
        formfield = $(el);
        custom_media = true;
        var _orig_send_attachment = wp.media.editor.send.attachment;
        wp.media.editor.send.attachment = function(props, attachment) {
            if ( custom_media ) {
                formfield = renderUpload(formfield, attachment, props);
            } else {
                return _orig_send_attachment.apply( this, [props, attachment] );
            }
        }

        wp.media.editor.open(1);
    }

    function renderUpload(field, attachment, props) {
        // This gets the full-sized image url
        var src = attachment.url;

        // Get the size selected by the user
        var size = props.size;

        // Or, if you'd rather, you can set the size you want to get:
        // var size = 'thumbnail'; // or 'full' or 'medium' or 'large'...

        // If the media supports the selected size, get it
        if (attachment.sizes[size]) {
            src = attachment.sizes[size].url;
        }

        // Do what you want with src here....
    }
});
-3

You'd have to make a call to the server to run some PHP.

$thumb_src = wp_get_attachment_image_src( $id, 'thumbnail' );

Where $id is the id of the attachment

attachment.attributes.id in your custom_uploader select function will give you the value. You could post that back with an ajax call and get the thumbnail url that way.

  • This is just incorrect. – Andy Mercer Jul 25 '18 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.