Nhận url của hình thu nhỏ từ trình tải lên phương tiện truyền thông

Tôi muốn chọn hình ảnh từ trình tải lên phương tiện WordPress 3.5. Tôi có thể lấy URL hình ảnh với mã sau đây, nhưng nó có được hình ảnh kích thước đầy đủ. Tôi muốn lấy url hình ảnh thu nhỏ, làm thế nào tôi có thể có được điều đó?

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

Bạn có thể gỡ lỗi kết quả của tệp đính kèm bằng cách:

console.log(attachment); 

và nếu kích thước hình thu nhỏ có sẵn, bạn có thể truy xuất nó bằng cách sử dụng:

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

Tìm thấy câu hỏi này làm nghiên cứu của riêng tôi, và cuối cùng đã phát triển một giải pháp phong phú hơn mà tôi nghĩ có thể có giá trị.

Nếu bạn muốn biết url của kích thước phương tiện được người dùng chọn, thì đoạn mã sau (mã jQuery đầy đủ bên dưới) sẽ làm điều đó cho bạn:

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

Bạn sẽ phải thực hiện một cuộc gọi đến máy chủ để chạy một số PHP.

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

Trong đó $ id là id của tệp đính kèm

tệp đính kèm.attribut.id trong hàm chọn custom_uploader của bạn sẽ cung cấp cho bạn giá trị. Bạn có thể đăng lại bằng một cuộc gọi ajax và nhận url hình thu nhỏ theo cách đó.