Erhalten Sie mehrere Bilder in Wordpress Media Selector

Question

Ich habe die folgende jQuery, die den Wordpress Media Selector öffnet und mir die URL der ausgewählten Mediendatei zurück.

Ich habe mehrere auf wahr gesetzt, damit ich mehr als ein Bild auswählen kann.

Meine Frage ist, wie bekomme ich die URL dieses zweiten Bildes. Ich kann nur scheinen, die erste zu bekommen.

Bonus Frage - Gibt es eine Möglichkeit, die Mehrfachauswahl auf nur 2 Bilder zu beschränken?

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

Der beste Weg, dies zu tun, ist die Schaffung 2 Instanzen des Editors Medium, und mit „multiple: false“.

HINWEIS die $(document).ready ist nutzlos, da durch die Syntax jQuery(my_function), my_function auf Dokument fertig ausgeführt wird.

Sie können so etwas wie dieses benötigen:

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

    } 
});