Here is the script:
I’m using the function loadImages
in following script to load the existing attached images via AJAX and then just pass the function with the IDs of images and it opens up a pre-populated modal.
var frame,
selection = loadImages(images);
$('#stag_images_upload').on('click', function(e) {
e.preventDefault();
var options = {
title: '<?php _e("Create Featured Gallery", "stag"); ?>',
state: 'gallery-edit',
frame: 'post',
selection: selection
};
frame = wp.media(options).open();
frame.menu.get('view').unset('cancel');
frame.menu.get('view').unset('separateCancel');
frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>';
frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar
// when editing a gallery
overrideGalleryInsert();
frame.on( 'toolbar:render:gallery-edit', function() {
overrideGalleryInsert();
});
frame.on( 'content:render:browse', function( browser ) {
if ( !browser ) return;
// Hide Gallery Settings in sidebar
browser.sidebar.on('ready', function(){
browser.sidebar.unset('gallery');
});
// Hide filter/search as they don't work
browser.toolbar.on('ready', function(){
if(browser.toolbar.controller._state == 'gallery-library'){
browser.toolbar.$el.hide();
}
});
});
// All images removed
frame.state().get('library').on( 'remove', function() {
var models = frame.state().get('library');
if(models.length == 0){
selection = false;
$.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce });
}
});
function overrideGalleryInsert(){
frame.toolbar.get('view').set({
insert: {
style: 'primary',
text: '<?php _e("Save Featured Gallery", "stag"); ?>',
click: function(){
var models = frame.state().get('library'),
ids="";
models.each( function( attachment ) {
ids += attachment.id + ','
});
this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>';
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
ids: ids,
action: 'stag_save_images',
post_id: stag_ajax.post_id,
nonce: stag_ajax.nonce
},
success: function(){
selection = loadImages(ids);
$('#_stag_image_ids').val( ids );
frame.close();
},
dataType: 'html'
}).done( function( data ) {
$('.stag-gallery-thumbs').html( data );
console.log(data);
});
}
}
});
}
function loadImages(images){
if (images){
var shortcode = new wp.shortcode({
tag: 'gallery',
attrs: { ids: images },
type: 'single'
});
var attachments = wp.media.gallery.attachments( shortcode );
var selection = new wp.media.model.Selection( attachments.models, {
props: attachments.props.toJSON(),
multiple: true
});
selection.gallery = attachments.gallery;
selection.more().done( function() {
// Break ties with the query.
selection.props.set({ query: false });
selection.unmirror();
selection.props.unset('orderby');
});
return selection;
}
return false;
}
});
And here is the php function that handles the AJAX request:
function stag_save_images(){
if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
return;
}
if ( !isset($_POST['ids']) || !isset($_POST['nonce']) || !wp_verify_nonce( $_POST['nonce'], 'stag-ajax' ) ){
return;
}
if ( !current_user_can( 'edit_posts' ) ) return;
$ids = strip_tags(rtrim($_POST['ids'], ','));
update_post_meta($_POST['post_id'], '_stag_image_ids', $ids);
$thumbs = explode(',', $ids);
$thumbs_output="";
foreach( $thumbs as $thumb ) {
$thumbs_output .= '<li>' . wp_get_attachment_image( $thumb, array(75,75) ) . '</li>';
}
echo $thumbs_output;
die();
}
add_action( 'wp_ajax_stag_save_images', 'stag_save_images' );
function stag_metabox_scripts(){
global $post;
if( isset($post) ) {
wp_localize_script( 'jquery', 'stag_ajax', array(
'post_id' => $post->ID,
'nonce' => wp_create_nonce( 'stag-ajax' )
) );
}
}
add_action( 'admin_enqueue_scripts', 'stag_metabox_scripts' );
I just copied the snippet from my WordPress framework, hope it makes sense.