web-dev-qa-db-ja.com

複数の画像を取得して表示するようにwp.mediaを変更する方法

私のjQueryスクリプトはwp.mediaアップローダーを開く、単一の画像を選択またはアップロードする、そして画像を表示することと隠し入力を介してその添付ファイルIDを既存のオプション配列に追加すること（プラグイン設定ページ）でうまく働きます。私の目的は、同じ結果を再現することです、ただし、一度に複数の画像に対して。

私の前の多くの人と同じように、私はそのような目的のためにwp.mediaを使用することについてブロックを打ちました。

最初に、完全な実用的なスクリプトを提示します。メディアフレームを開き、画像を選択し、隠し入力用の画像添付IDをキャプチャし（最も重要な機能）、さらにプレビュー画像を表示する前にプレビュー画像を提供します。ページを更新したときに、必要な場所に画像を添付IDで表示するアクションを保存します。その大部分はwp.mediaを使うためのルーチンを研究して書いたことのある人なら誰でもが知っているでしょう、そしてこの特定の用法（私のプラグインのセットアップの特殊性は別にして） 。

ワーキングシングル画像コード

jQuery(document).ready( function($) {

    var myplugin_media_upload;

    $('#myplugin-change-image').click(function(e) {
        e.preventDefault();

    // If the uploader object has already been created, reopen the dialog
        if( myplugin_media_upload ) {
            myplugin_media_upload.open();
            return;
        }

    // Extend the wp.media object
        myplugin_media_upload = wp.media.frames.file_frame = wp.media({
            title: button_text.title,
            button: { text: button_text.button },
            multiple: false
        });

    //When a file is selected, grab the URL and set it as the text field's value
        myplugin_media_upload.on( 'select', function() {
            attachment = myplugin_media_upload.state().get( 
                 'selection' ).first().toJSON();
            console.log(attachment); //irrelevant to functionality but useful
            //adds the ID to the hidden input
            $('#myplugin-featured-image').val( attachment.id );
            //provides the preview image
            $('#myplugin-thumbnail').empty();
            $('#myplugin-thumbnail').append( 
                '<img src="' + attachment.url + 
                '" class="attachment-thumbnail myplugin-preview" />' );
            $('#myplugin-new-global').show();
        });

    //Open the uploader dialog
        myplugin_media_upload.open();
    });

});

ほとんど機能しない複数の画像の検証

あちこちから複数の選択ルーチンの断片を組み合わせることで、私は様々な適応を試みました。そのような試みの次の部分はキーシーケンスに焦点を当てています。私はそれが完全に成功する可能性があるという幽霊を持っていたからではなく、それは部分的に成功していてそしておそらく有用で面白い情報をもたらすからです。

// Extend the wp.media object
    myplugin_media_upload = wp.media.frames.file_frame = wp.media({
        title: button_text.title,
        button: { text: button_text.button },
        multiple: true //get multiple images
    });

//When a file is selected, grab the URL and set it as the text field's value
    myplugin_media_upload.on( 'select', function() {
        var selection = myplugin_media_upload.state().get( 'selection' );
        selection.map( function( attachment ) {
            attachment.toJSON();

            //shows each attachment ID:
            console.log(attachment.id);
            //last is captured for:
            $('#myplugin-featured-image').val( attachment.id );

            //captures code fragment (see notes)
            console.log(attachment.url);

        });

    });

前の例の最後の「attachment-thumbnail」関連のものはまったく機能しないので含まれていませんが、このコードでは選択された画像のうち最後の添付ファイルIDを取得し、それを追加します。隠し入力には "val"が必要です。

コンソールを見ると、選択した多くの画像が実際にはIDごとに収集されていることがわかります。しかしながら、attachment.urlは、wp-includes/js/backbone.min.jsから明らかに機能不全のURL導出コードの断片として登録することが判明しました。たぶん誰かがここで手がかりを見つけるか、少なくともそれを少し面白いと思うでしょう（！？）。

私は、IDが公開されたときにそれらをキャプチャし、それらを配列に組み立て、そしておそらくは増分されたhtml IDを用いてそれらを異なるタイプの画像表示にforeachループすることを望みます。 PHP処理中.

"assemble and access array"部分が処理されたら、最後の2つの部分（displayおよびPHP処理）を処理できると確信していますが、この時点でjQueryを使用する機能は非常に不適切になります。私が本当にIDの配列であるべきだと思う変数にアクセスしようとするとき、それはたくさんの「未定義の」通知と共に、何度もの悪い試行錯誤につながりました。これまでのところ、私が試したことはコンソールを装飾すること以上のことをしたことはなく、せいぜいすでに説明したように1つの有用な値を私に与えてください。

この問題を解決することに加えて、プラグイン、テーマ、および機能で複数の画像を選択して使用するための実用的なテンプレートになる答えを誰かが提供できることを願っています。

PPS：電話を持つ私はほとんど答えがあると思いますが、驚くほど十分です。

本物のjQueryマスターが何を思いついたのか、私はまだ興味がありますが…;）

jquerymedia-library
3
CK MacLeod

だから、これはうまくいきます。私は実装して信用改善をさせていただきます。

/**
 * @Script: WordPress Multiple Image Selection in jQuery
 * @Version: 0.1
 * @Author: CK MacLeod
 * @Author URI: http://ckmacleod.com
 * @License: GPL3
 */

jQuery(document).ready( function( $ ) {

    var myplugin_media_upload;

    $('#myplugin-change-image').click(function(e) {

        e.preventDefault();

        // If the uploader object has already been created, reopen the dialog
        if( myplugin_media_upload ) {

            myplugin_media_upload.open();
            return;

        }

        // Extend the wp.media object
        myplugin_media_upload = wp.media.frames.file_frame = wp.media({

            //button_text set by wp_localize_script()
            title: button_text.title,
            button: { text: button_text.button },
            multiple: true //allowing for multiple image selection

        });

        /**
         *THE KEY BUSINESS
         *When multiple images are selected, get the multiple attachment objects
         *and convert them into a usable array of attachments
         */
        myplugin_media_upload.on( 'select', function(){

            var attachments = myplugin_media_upload.state().get('selection').map( 

                function( attachment ) {

                    attachment.toJSON();
                    return attachment;

            });

            //loop through the array and do things with each attachment

           var i;

           for (i = 0; i < attachments.length; ++i) {

                //sample function 1: add image preview
                $('#myplugin-placeholder').after(
                    '<div class="myplugin-image-preview"><img src="' + 
                    attachments[i].attributes.url + '" ></div>'
                    );

                //sample function 2: add hidden input for each image
                $('#myplugin-placeholder').after(
                    '<input id="myplugin-image-input' +
                    attachments[i].id '" type="hidden" 
                    name="myplugin_attachment_id_array[]"  value="' + 
                    attachments[i].id + '">'
                    );

            }

        });

    myplugin_media_upload.open();

    });

});
5
CK MacLeod