ワードプレスのメディアセレクタで複数の画像を取得

Question

私は次のjQueryを使用して、wordpressメディアセレクタを開き、選択したメディアファイルのURLを返します。

複数のイメージを選択できるように、複数をtrueに設定しました。

私の質問は、その2番目の画像のURLを取得する方法です。私は最初のものしか手に入れられないようです。

ボーナスに関する質問 - 複数の選択肢を2つの画像に限定する方法はありますか？

jQuery(function($) { 
     $(document).ready(function(){ 
       $('#insert-my-media').click(open_media_window); 
      }); 

      function open_media_window() { 
       if (this.window === undefined) { 
        this.window = wp.media({ 
          title: 'Select a Before and After image', 
          library: {type: 'image'}, 
          multiple: true, 
          button: {text: 'Insert'} 
         }); 

        var self = this; // Needed to retrieve our variable in the anonymous function below 
        this.window.on('select', function() { 
          var first = self.window.state().get('selection').first().toJSON(); 
          wp.media.editor.insert('[banda before="' + first.url + ' after="' + second.url + '"]'); 
         }); 
       } 

       this.window.open(); 
       return false; 
      } 
    }); 

Answer 1

これを行うための最善の方法は、メディアエディタ、 の2つのインスタンスを作成し、使用している「複数：偽」。

NOTE構文jQuery(my_function)を使用することにより、my_functionのは、文書準備で実行されているので$(document).readyが、無用です。

jQuery(function ($) { 
    var mediaPopup; 
    var placeholders = { 
     before: "@BandaBefore@", 
     after: "@BandaAfter@" 
    }; 
    var attrs = { 
     before: "before=", 
     after: "after=" 
    }; 
    var editorText = "[banda before='" + placeholders.before + 
     "' after='" + placeholders.after + "']"; 
    $("#choseBeforeMedia").on("click", function() { 
     openMediaPopup("before"); 
    }); 
    $("#choseAfterMedia").on("click", function() { 
     openMediaPopup("after"); 
    }); 

    var currentValues = { 
     before: function() { 
      var idx1 = editorText.indexOf(attrs.before) + attrs.before.length + 1; 
      var idx2 = editorText.indexOf(attrs.after) - 2; 
      return editorText.substring(idx1, idx2); 
     }, 
     after: function() { 
      var idx1 = editorText.indexOf(attrs.after) + attrs.after.length + 1; 
      var tmp = editorText.substring(idx1); 
      var idx2 = tmp.indexOf("'"); 
      return tmp.substring(0, idx2); 
     } 
    }; 

    function openMediaPopup(label) { 
     if (mediaPopup === undefined) { 
      mediaPopup = wp.media({ 
       title: "Select the " + label + " image", 
       library: {type: "image"}, 
       multiple: true, 
       button: {text: "Insert"} 
      }); 

      mediaPopup.on("select", function() { 
       var img = self.window.state().get("selection").toJSON(); 
       if (editorText.indexOf(placeholders[label]) > -1) { 
        editorText = editorText.replace(placeholders[label], img.url); 
       } 
       else { 
        editorText = editorText.replace(currentValues[label](), img.url); 
       } 
       wp.media.editor.insert(editorText); 
      }); 
     } 

     mediaPopup.open(); 

    } 
}); 

：

あなたはこのようなものが必要な場合があります