WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

        if (custom_uploader) {

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

share|improve this question

You can debug the result of attachment by :


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

 var thumb = attachment.sizes.thumbnail.url;
share|improve this answer

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() {
        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] );


    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....
share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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