从 Metabox 调用 WordPress Gallery Uploader/Selector

Question

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

第二个窗口就是我所追求的。我正在从元框调用框架，并且我已成功获取它以允许我抓取单个或多个图像并将 ID 保存为字符串，以及将缩略图实时插入预览框中。我找不到任何关于调用 Gallery 框架的信息。

我目前的代码如下：

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

});

有什么想法吗？

编辑：

我已经让它直接调用画廊，没有任何侧边栏等。但是，它现在忽略了 on('select') 调用。我猜画廊在选择图片时会发送不同的电话？

jQuery(document).ready(function($){

// Uploading files
var file_frame;

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({
        frame: "post",
        state: "featured-gallery",
        library : { type : 'image'},
        button: {text: "Edit Image Order"},
        multiple: true
    });

    file_frame.states.add([
        new wp.media.controller.Library({
            id:         'featured-gallery',
            title:      'Select Images for Gallery',
            priority:   20,
            toolbar:    'main-gallery',
            filterable: 'uploaded',
            library:    wp.media.query( file_frame.options.library ),
            multiple:   file_frame.options.multiple ? 'reset' : false,
            editable:   true,
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true
        }),
    ]);

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        ids = jQuery('#fg_metadata').val().split(',');
        if (!empty(ids)) {
            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' );
    });

    file_frame.on('change', function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        setTimeout(function(){
            $('.media-menu a:first-child').text('← Edit Selection').addClass('button').addClass('button-large').addClass('button-primary');
        },0);
    });

    // When an image is selected, run a callback.
    file_frame.on('set', function() {
        alert('test');
    });

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

$imageArray 或 $imageHTML 没有任何结果。 $image 是一个东西，它是一个 [object object]。

编辑 3：正如下面评论中提到的，编辑 2 中的代码的主要问题是，在使用画廊时，您必须调用“库”而不是“选择”。

    // Uploading files
var file_frame;

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({
        frame: "post",
        state: "gallery",
        library : { type : 'image'},
        button: {text: "Edit Image Order"},
        multiple: true
    });

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

    // When an image is selected, run a callback.
    file_frame.on('update', function() {
        var imageIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('library');
        images.each(function(attachment) {
            imageIDArray.push(attachment.attributes.id);
            imageHTML += '<li><button></button><img id="'+attachment.attributes.id+'" src="'+attachment.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();

});

我现在遇到的主要问题是我无法通过选择打开它以进行图库编辑。我可以让它在那里打开，但没有选择图像。我正在调查那个。我也在考虑重新打开而不是创建新视图并发送预选。如果我转到选择窗口，然后是订单窗口，但单击 X 关闭，我可以重新打开订单窗口。所以应该有办法。

编辑 4

根据下面答案中的代码，我已将预选代码更改为：

    file_frame.on('open', function() {
        var library = file_frame.state().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();
                library.add( attachment ? [ attachment ] : [] );
            });
        }
    });

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

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

最终编辑

我的代码现在可以完全运行，感谢您的帮助！如果您想看到它的实际效果，请查看http://wordpress.org/plugins/featured-galleries/

Answer 1

我对 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="" />');
    });
});

我发现你应该得到 '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="" />' );
        } );
    } );
} );

我认为如果您重新打开现有框架，它将始终保持初始状态，在您的情况下它是“图库”。您每次都必须创建新框架并检查是否有图像可以打开“图库编辑” 另外，我更喜欢“gallery-library”而不是“gallery”，因为我希望用户专注于我的画廊。