メディアアップローダーからサムネイルのURLを取得する


8

WordPress 3.5メディアアップローダーから画像を選択したい。次のコードで画像のURLを取得できますが、フルサイズの画像が取得されます。サムネイル画像のURLを取得したいのですが、どうすれば取得できますか?

 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

添付の結果は次の方法でデバッグできます。

console.log(attachment); 

サムネイルサイズが利用可能な場合は、次を使用して取得できます。

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

これは非常に良い解決策ですが、将来読む人のための少しの修正です:URLはattachment.attributes.sizes.thumbnail.urlで見つけることができます。でサイズのような他のオプションもあります媒質medium_largeフルだけでなく、カスタムサイズは。
AncientRo

0

私自身の研究でこの質問を見つけ、価値があると思ったよりリッチなソリューションを開発することになりました。

ユーザーが選択したメディアサイズのURLを知りたい場合は、次のコード(以下の完全なjQueryコード)がそれを行います。

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

-3

PHPを実行するには、サーバーを呼び出す必要があります。

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

$ idは添付ファイルのIDです。

custom_uploader選択関数のattachment.attributes.idは、値を提供します。これをajax呼び出しで投稿し、サムネイルのURLをそのように取得できます。


これは正しくありません。
アンディマーサー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.