it-swarm.com.de

Rufen Sie die URL des Miniaturbilds vom Medien-Uploader ab

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 Thumbnail-Bild-URL erhalten. Wie kann ich das erreichen?

 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
Jay

Sie können das Ergebnis des Anhangs wie folgt debuggen:

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

Fand diese Frage in meiner eigenen Recherche und entwickelte schließlich eine reichhaltigere Lösung, die ich für wertvoll hielt.

Wenn Sie die URL des vom Benutzer ausgewählten Medienformats kennen möchten, wird der folgende Code (vollständiger jQuery-Code unten) dies für Sie tun:

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