Php 从Metabox调用WordPress Gallery上载器/选择器

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

这第二个窗口就是我想要的。我正在从元盒调用框架，我已经成功地获得了它，允许我抓取单个或多个图像，并将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();

});

编辑2：

好的，我已经把所有的东西都准备好了。但我无法破译输出的画廊代码

        // When an image is selected, run a callback.
    file_frame.on('update', 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');
        }
    });

这使我可以直接重新打开到“库编辑”状态，并预先选择图像。但是，当我直接打开此状态时，我无法单击“取消图库”（返回到图像选择状态）。单击该按钮/链接只会关闭框架。我试着预先填充库和选择，但这也不起作用。以下内容来自media-views.js，似乎是控制该按钮的内容。它不会将状态更改为特定状态，而是将其更改为以前的状态。由于我们是直接打开画廊编辑，没有过去的状态。我想知道是否可以打开gallery，然后在打开时更改为gallery edit。立即这样做，这样用户就看不见了，但它会将过去的状态输入到系统中

    galleryMenu: function( view ) {
    var lastState = this.lastState(),
        previous = lastState && lastState.id,
        frame = this;

编辑5:

终于把一切都弄明白了。我根本不能让上面的工作，我不知道为什么。因此，可能有更好的方法来做到这一点，涉及到该代码。如果是这样，我很想知道

    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 ] : [] );
            });
        }
    });

最终编辑

---

我的代码现在完全正常工作了，我感谢您的帮助！如果您想看到它的实际应用，请查看

我对WP比较陌生。事实上，我正在构建我的第一个WP主题，我和你被困在同一个问题上。感谢你的代码，我可以进入图库页面。幸运的是，我保存了这些图像。这是我的密码：

// when click Insert Gallery, run callback
wp_media_frame.on('update', function(){
    var library = wp_media_frame.state().get('library');
    var images  = [];
    var image_ids = [];
    thumb_wraper.html('');

    library.map( function( image ) {
        image = image.toJSON();
        images.push(image.url);
        image_ids.push(image.id);
        thumb_wraper.append('<img src="' + image.url + '" alt="" />');
    });
});

//单击“插入库”时，运行回调
wp_media_frame.on（'update'，function（））{
var library=wp_media_frame.state（）.get（'library'）；
var图像=[]；
var image_id=[]；
thumb_wrapper.html（“”）；
library.map（函数（图像）{
image=image.toJSON（）；
image.push（image.url）；
image\u id.push（image.id）；
拇指包装附加（“”）；
});
});

我发现你应该得到“library”而不是“selection”

编辑： 我已经想出了如何回到画廊编辑。这是我的全部代码：

    $( '#btn_upload' ).on( 'click', function( event ) {
    event.preventDefault();

    var images = $( '#image_ids' ).val();
    var gallery_state = images ? 'gallery-edit' : 'gallery-library';

    // create new media frame
    // You have to create new frame every time to control the Library state as well as selected images
    var wp_media_frame = wp.media.frames.wp_media_frame = wp.media( {
        title: 'My Gallery', // it has no effect but I really want to change the title
        frame: "post",
        toolbar: 'main-gallery',
        state: gallery_state,
        library: {
            type: 'image'
        },
        multiple: true
    } );

    // when open media frame, add the selected image to Gallery
    wp_media_frame.on( 'open', function() {
        var images = $( '#image_ids' ).val();
        if ( !images )
            return;

        var image_ids = images.split( ',' );
        var library = wp_media_frame.state().get( 'library' );
        image_ids.forEach( function( id ) {
            attachment = wp.media.attachment( id );
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        } );
    } );

    // when click Insert Gallery, run callback
    wp_media_frame.on( 'update', function() {

        var thumb_wrapper = $( '#thumb-wrapper' );
        thumb_wraper.html( '' );
        var image_urls = [];
        var image_ids = [];

        var library = wp_media_frame.state().get( 'library' );

        library.map( function( image ) {
            image = image.toJSON();
            image_urls.push( image.url );
            image_ids.push( image.id );
            thumb_wrapper.append( '<img src="' + image.url + '" alt="" />' );
        } );
    } );
} );

$（'btn_upload'）。打开（'click'，函数（事件）{
event.preventDefault（）；
var images=$（'#image_id'）.val（）；
var gallery_state=图像？'gallery edit'：'gallery library'；
//创建新媒体框架
//每次都必须创建新帧以控制库状态以及选定的图像
var wp_media_frame=wp.media.frames.wp_media_frame=wp.media（{
标题：'我的画廊'，//它没有效果，但我真的想更改标题
框架：“帖子”，
工具栏：“主库”，
州：图库州，
图书馆：{
键入：“图像”
},
多重：对
} );
//打开媒体框时，将所选图像添加到多媒体资料中
wp_media_frame.on（'open'，function（））{
var images=$（'#image_id'）.val（）；
如果（！图像）
返回；
var image_id=images.split（'，'）；
var library=wp_media_frame.state（）.get（'library'）；
图像\u id.forEach（函数（id）{
附件=wp.media.attachment（id）；
附件.fetch（）；
添加（附件？[附件]：[]）；
} );
} );
//单击“插入库”后，运行回调
wp_media_frame.on（'update'，function（））{
var thumb_wrapper=$（“#thumb wrapper”）；
thumb_wrapper.html（“”）；
var image_url=[]；
var image_id=[]；
var library=wp_media_frame.state（）.get（'library'）；
library.map（函数（图像）{
image=image.toJSON（）；
image\u url.push（image.url）；
image_id.push（image.id）；
thumb_wrapper.append（“”）；
} );
} );
} );

我想，如果你重新打开现有的框架，它将始终保持初始状态，在你的情况下，它是“画廊”。您必须每次创建新的帧，并检查是否有图像可打开“库编辑”

---

此外，我更喜欢“图库库”而不是“图库”，因为我希望用户关注我的图库。

首先感谢您的回复！是的，我通过阅读media-views.js发现这是图书馆。我的当前代码可以打开图库，更改为“图库编辑”，然后将代码发送给我。我还可以重新打开选定的图像。我还没有弄清楚的是如何重新打开到库编辑状态。我将在上面发布完整的更新代码。@AndyM：我添加了完整的代码。您必须每次创建新的帧，并检查是否有图像将状态设置为“gallery edit”。这很愚蠢，但我找不到另一种方法。虽然我在抓取它时想出了将选择更改为库，但我忘记了在预选代码中将选择更改为库。令人沮丧的是，这里使用了两个不同的术语。谢谢你的帮助@deemi

#image_id

和

#thumb wrapper

是显示上传的缩略图的输入文件和div的id。例如，此HTML代码将起作用：

@deemi上面的My code有助于在post meta上上载图像和存储。如果要使用默认的gallery短代码，请在主题的tem上尝试此选项

    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 ] : [] );
            });
        }
    });

// when click Insert Gallery, run callback
wp_media_frame.on('update', function(){
    var library = wp_media_frame.state().get('library');
    var images  = [];
    var image_ids = [];
    thumb_wraper.html('');

    library.map( function( image ) {
        image = image.toJSON();
        images.push(image.url);
        image_ids.push(image.id);
        thumb_wraper.append('<img src="' + image.url + '" alt="" />');
    });
});

    $( '#btn_upload' ).on( 'click', function( event ) {
    event.preventDefault();

    var images = $( '#image_ids' ).val();
    var gallery_state = images ? 'gallery-edit' : 'gallery-library';

    // create new media frame
    // You have to create new frame every time to control the Library state as well as selected images
    var wp_media_frame = wp.media.frames.wp_media_frame = wp.media( {
        title: 'My Gallery', // it has no effect but I really want to change the title
        frame: "post",
        toolbar: 'main-gallery',
        state: gallery_state,
        library: {
            type: 'image'
        },
        multiple: true
    } );

    // when open media frame, add the selected image to Gallery
    wp_media_frame.on( 'open', function() {
        var images = $( '#image_ids' ).val();
        if ( !images )
            return;

        var image_ids = images.split( ',' );
        var library = wp_media_frame.state().get( 'library' );
        image_ids.forEach( function( id ) {
            attachment = wp.media.attachment( id );
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        } );
    } );

    // when click Insert Gallery, run callback
    wp_media_frame.on( 'update', function() {

        var thumb_wrapper = $( '#thumb-wrapper' );
        thumb_wraper.html( '' );
        var image_urls = [];
        var image_ids = [];

        var library = wp_media_frame.state().get( 'library' );

        library.map( function( image ) {
            image = image.toJSON();
            image_urls.push( image.url );
            image_ids.push( image.id );
            thumb_wrapper.append( '<img src="' + image.url + '" alt="" />' );
        } );
    } );
} );