Holen Sie sich mehrere Bilder in der WordPress-Medienauswahl

Lesezeit: 2 Minuten

Ich habe die folgende jQuery, die die WordPress-Medienauswahl öffnet und mir die URL der ausgewählten Mediendatei zurückgibt.

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

Meine Frage ist, wie bekomme ich die URL dieses zweiten Bildes. Ich kann nur scheinbar den ersten bekommen.

Bonusfrage – 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;
            }
    });

Der beste Weg, dies zu tun, besteht darin, zwei Instanzen des Medieneditors zu erstellen und “multiple: false” zu verwenden.

HINWEIS das $(document).ready ist nutzlos, da durch die Verwendung der Syntax jQuery(my_function), meine_funktion wird ausgeführt, wenn das Dokument fertig ist.

Möglicherweise benötigen Sie so etwas:

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

    }
});

Versuchen Sie diese Lösung unten. Es funktioniert für mich gut. Genießen!

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

                    //WHEN THE MAGIC STARTS
                    this.window.on('select', function() {

                        var attachments = self.state().get('selection').map( 
                           function( attachment ) {
                               attachment.toJSON();
                               return attachment;
                          });


                        var first = attachments[0]; //you can also iterate them with $.each(attachments, function( index, attachement ) {}
                        var second = attachments[1];

                        wp.media.editor.insert('[banda before="' + first.attributes.url + ' after="' + second.attributes.url + '"]');
                    });
                    //WHEN THE MAGIC ENDS
                }

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

1226450cookie-checkHolen Sie sich mehrere Bilder in der WordPress-Medienauswahl

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy