Question

我有以下jQuery，它将打开wordpress媒体选择器并返回所选媒体文件的URL。

我已将多个设置为true，因此我可以选择多个图像。

我的问题是如何获取第二张图片的网址。我似乎只能得到第一个。

奖金问题 - 是否有办法将多项选择限制为仅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

请尝试以下解决方案。它对我很有用。享受！

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

Answer 2

执行此操作的最佳方法是创建2个媒体编辑器实例，并使用＆＃34; multiple：false＆＃34;。

注意 $(document).ready没用，因为使用语法jQuery(my_function)， my_function 会在文档就绪时执行。

你可能需要这样的东西：

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

    }
});

在wordpress媒体选择器中获取多个图像

2 个答案: