Holen Sie sich die URL der Miniaturansicht vom Medien-Uploader

Ich möchte ein Bild aus dem WordPress 3.5-Medien-Uploader auswählen. Ich kann die Bild-URL mit dem folgenden Code abrufen, aber es wird das Bild in voller Größe angezeigt. Ich möchte die URL des Miniaturbilds erhalten. Wie kann ich das erhalten?

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

Sie können das Ergebnis des Anhangs debuggen, indem Sie:

console.log(attachment); 

und wenn die Größe der Miniaturbilder verfügbar ist, können Sie sie abrufen mit:

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

Ich habe diese Frage bei meinen eigenen Recherchen gefunden und schließlich eine umfassendere Lösung entwickelt, die ich für wertvoll hielt.

Wenn Sie die URL der vom Benutzer ausgewählten Mediengröße wissen möchten, erledigt der folgende Code (vollständiger jQuery-Code unten) dies für Sie:

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

Sie müssten den Server anrufen, um PHP auszuführen.

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

Wobei $ id die ID des Anhangs ist

Anhang.attributes.id in Ihrer benutzerdefinierten_uploader-Auswahlfunktion gibt Ihnen den Wert. Sie können dies mit einem Ajax-Aufruf zurückschicken und auf diese Weise die Miniaturbild-URL abrufen.