Obtenez l'URL de la vignette de l'uploader multimédia

Je souhaite sélectionner une image dans le programme de téléchargement de médias WordPress 3.5. Je peux obtenir l'URL de l'image avec le code suivant, mais il obtient l'image en taille réelle. Je veux obtenir l'URL de l'image miniature, comment puis-je l'obtenir?

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

Vous pouvez déboguer le résultat de la pièce jointe en:

console.log(attachment); 

et si la taille de vignette disponible, vous pouvez la récupérer en utilisant:

 var thumb = attachment.sizes.thumbnail.url;
 alert(thumb);

J'ai trouvé cette question en faisant mes propres recherches et j'ai fini par développer une solution plus riche que je pensais être utile.

Si vous souhaitez connaître l'url de la taille de média sélectionnée par l'utilisateur, le code suivant (code jQuery complet ci-dessous) le fera pour vous:

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

Vous devez appeler le serveur pour exécuter du PHP.

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

Où $ id est l'id de la pièce jointe

attachment.attributes.id dans votre fonction de sélection custom_uploader vous donnera la valeur. Vous pouvez poster ce retour avec un appel ajax et obtenir l'URL de la miniature de cette façon.