1

When I click the Add Media button on a Post/Page, I have the option to Add Media. After selecting media, I click Insert Into Post, and the images are inserted. However, there is another option, which is on the left sidebar. I can click Create Gallery. The image selecting process is the same, but when I click Create New Gallery, it goes to a new frame which allows me to edit the order of the images.

This second window is what I am after. I am calling the frame from a metabox, and I have gotten it successfully to allow me to grab single or multiple images and save the ID's as a string, as well as insert thumbnails live into a preview box. I cannot find anything about calling the Gallery frame.

My current code is as follows:

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

});

Any ideas?

1

Figured out the answer to the question.

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

For more details, check: https://stackoverflow.com/questions/21858112/calling-wordpress-gallery-uploader-selector-from-metabox.

To see the working code in action, see: http://wordpress.org/plugins/featured-galleries/

4
  • I see you created a custom state called "featured-gallery", have you found out about "gallery-library" state, and if so, wasn't it sufficient? Aug 12 '20 at 14:46
  • 1
    It's been years since I touched the plugin. I rebuilt it a couple years ago, but since then, it's just sat there. It works for what it does, but with the new direction that Gutenberg is going in, the plugin isn't really all that necessary. The better way is to create a wrapping page structure block, that gets loaded for all pages, and then use the regular gallery block in a set spot in that structure block. Aug 13 '20 at 14:40
  • Too bad people heavily dislike Gutenberg (if you look at its ratings). Thanks, your code helped me learn. Aug 13 '20 at 16:05
  • 1
    I'm glad I could help. As to Gutenberg, I hated it at first. But once I started doing custom blocks, it grew on me. You can clean things up a LOT if you do custom blocks. Aug 13 '20 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.