从Metabox调用WP图库上载器/选择器

时间:2014-02-18 作者:Andy Mercer

单击帖子/页面上的添加媒体按钮时,我可以选择添加媒体。选择介质后,单击“插入到帖子中”,图像即被插入。但是,还有另一个选项,位于左侧边栏上。我可以单击“创建库”。图像选择过程是相同的,但当我单击“创建新库”时,它会转到一个新的框架,允许我编辑图像的顺序。

这第二个窗口就是我想要的。我正在从metabox调用框架,我成功地获得了它,允许我抓取单个或多个图像,并将ID保存为字符串,以及将缩略图实时插入预览框。我找不到有关调用库框架的任何信息。

我当前的代码如下:

jQuery(\'#fg_select\').on(\'click\', function(event){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        title: "Select Images For Gallery",
        button: {text: "Select",},
        library : { type : \'image\'},
        multiple: true // Set to true to allow multiple files to be selected
    });

    file_frame.on(\'open\', function() {
        var selection = file_frame.state().get(\'selection\');
        ids = jQuery(\'#fg_metadata\').val().split(\',\');
        ids.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        });
    });

    file_frame.on(\'ready\', function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn\'t exists before the frame is
        // completly initialised.
        $( \'.media-modal\' ).addClass( \'no-sidebar\' );
    });

    // When an image is selected, run a callback.
    file_frame.on(\'select\', function() {
        var imageIDArray = [];
        var imageHTML = \'\';
        var metadataString = \'\';
        images = file_frame.state().get(\'selection\');
        images.each(function(image) {
            imageIDArray.push(image.attributes.id);
            imageHTML += \'<li><button></button><img id="\'+image.attributes.id+\'" src="\'+image.attributes.url+\'"></li>\';
        });
        metadataString = imageIDArray.join(",");
        if(metadataString){
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery(\'#fg_select\').text(\'Edit Selection\');
            jQuery(\'#fg_removeall\').addClass(\'visible\');
        }
    });

    // Finally, open the modal
    file_frame.open();

});
有什么想法吗?

1 个回复
最合适的回答,由SO网友:Andy Mercer 整理而成

找到了问题的答案。

file_frame.on(\'open\', function() {
    var selection = file_frame.state().get(\'selection\');
    var library = file_frame.state(\'gallery-edit\').get(\'library\');
    var ids = jQuery(\'#fg_perm_metadata\').val();
    if (ids) {
        idsArray = ids.split(\',\');
        idsArray.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        });
        file_frame.setState(\'gallery-edit\');
        idsArray.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        });
    }
});
有关详细信息,请查看:https://stackoverflow.com/questions/21858112/calling-wordpress-gallery-uploader-selector-from-metabox.

要查看正在运行的工作代码,请参阅:http://wordpress.org/plugins/featured-galleries/

结束