Call up WordPress gallery uploader / selector from Metabox

Question

When I click the Add Media button on the Mail / Page page, I have the Add Media option. After selecting the media, click "Paste into Message" and the images will be inserted. However, there is another option, which is located on the left sidebar. I can click Create Gallery. The process of selecting an image is the same, but when I click "Create a new gallery", it goes to a new frame, which allows me to edit the order of the images.

This is the second window for me. I call the frame from the metabox, and I received it successfully, to allow me to capture one or more images and save the identifier as a string, and also insert thumbnails in the preview window. I can not 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?

EDIT:

I got it to such an extent that it calls the gallery directly, without any sidebars, etc. However, it now ignores the call to on ('select'). I think galleries cause another call when choosing an image?

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

EDIT 2:

Ok, so I got everything to shoot correctly. But I can not decrypt the issued code of the gallery.

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

Nothing works for $ imageArray or $ imageHTML. $ image is something, it is [object object].

EDIT 3: As mentioned in the comment below, the main problem with the code in Edit 2 is that when using the Gallery, you must call 'library' instead of 'selection'.

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

The main thing that I'm facing right now is that I can’t open it for editing the gallery using the selection. I can open it, but there are no selected images. I am studying this. I also consider reopening instead of creating a new view and submitting a preliminary selection. If I go to the selection window, then to the order window, but press X to close, I can open the order window again. Therefore, there must be a way.

EDIT 4

In accordance with the code code below, I changed the pre-selection code to:

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

This allows me to re-open directly in gallery editing mode and pre-display images. However, when I open this state directly, I cannot click “Cancel Gallery” (return to the image selection state). Pressing this button / link just closes the frame. I tried to pre-populate both the library and its selection, but that doesn't work either. Below is from media-views.js, and it seems like this is what controls this button. Instead of changing a state to a specific state, it changes it to a previous state. Since we open directly in the edit gallery, there is no past state. I am wondering if it is possible to open the gallery, and then open, modify the gallery. Do it instantly so that the user does not see, but so that he receives the past state in the system.

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

EDIT 5:

Finally he understood everything. I could not get the above to work, I'm not sure why. So there may be a better way to do this, including this code. If so, I would like to know.

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

FINAL IMAGE

My code now works completely, and I appreciate the help! If you want to see it in action, check out http://wordpress.org/plugins/featured-galleries/

Answer 1

I am relatively new to WP. In fact, I'm building my first WP theme, and I'm stuck on the same issue as you. Thanks to your code, I can get to the Gallery page. And fortunately, I have saved the images. Here is my code:

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

What I found, you should get a "library" instead of a "choice".

Edit: I figured out how to get back to the gallery. Here is my complete code:

  $( '#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="" />' ); } ); } ); } ); 

I thought that if you reopen an existing frame, it will always keep its original state, in your case it is a "gallery". You will need to create a new frame every time and check if there are images to open 'gallery-edit'. In addition, I prefer "gallery-library" rather than "gallery" because I want the user to focus on my gallery.