Get url of thumbnail from the media uploader

Question

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(); 
    });

Answer 1

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);

Answer 2

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....
    }
});

Answer 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.