I have created a custom field into a metabox with a button that opens up the media manager and allows the selection of multiple images. On the "open" event, the gallery retrieves the images IDS of the current saved selection from the "data-ids" attribute of the button that triggers the media manager. The images are correctly displayed and already selected.
The issue i'm having is that, after i open up the media manager again, and select new images, although the "data-ids" attribute is updated with the new IDs of the newly selected images, the gallery won't update the previously selected images with the new ones unless i save the custom field first. What am i doing wrong? I can't figure out how to "refresh" the selection of the images. Can anybody figure it out?
This is my code
// Gallery Field Control
var wppf_gallery_ids,
wppf_get_gallery_list,
wppf_get_gallery_field;
GalleryControl = {
// Initializes a new media manager or returns an existing frame.
// @see wp.media.featuredImage.frame()
frame: function() {
if ( this._frame )
return this._frame;
this._frame = wp.media({
title: 'something',
library: {
type: 'image'
},
button: {
text: 'something'
},
multiple: 'toggle',
});
this._frame.on( 'open', this.updateFrame ).state('library').on( 'select', this.select );
return this._frame;
},
select: function() {
var selection = GalleryControl._frame.state().get( "selection" ).toJSON();
var wppf_new_ids = '';
// Empty previous images
jQuery(wppf_get_gallery_list).empty();
// Load all stuff up
jQuery(selection).each(function(index) {
jQuery(wppf_get_gallery_list).append('<li><input type="hidden" name="'+ wppf_get_gallery_field +'['+ index +'][id]" value="'+ this.id +'"><input type="hidden" name="'+ wppf_get_gallery_field +'['+ index +'][url]" value="'+ this.url +'"><img src="'+ this.url +'"/></li>');
wppf_new_ids += this.id + ',';
});
// Remove last comma
wppf_new_ids = wppf_new_ids.substr(0,wppf_new_ids.length-1);
jQuery('#' + wppf_get_gallery_field).attr('data-ids',wppf_new_ids);
},
updateFrame: function() {
var selection = GalleryControl.frame().state().get('selection');
selection.reset();
// Grab all ids from gallery
var all_ids = wppf_gallery_ids.split(',');
// Add to selection
if(all_ids !== '') {
jQuery.each(all_ids, function(index, value) {
var attachment = wp.media.attachment( value );
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
}
},
init: function() {
// Handle media manager
jQuery('body').on('click', '.wppf-open-gallery', function(e) {
e.preventDefault();
// Get the gallery id and details
wppf_get_gallery_field = jQuery(this).attr('id');
wppf_gallery_ids = jQuery(this).data('ids');
wppf_get_gallery_list = jQuery(this).data('list');
GalleryControl.frame().open();
});
}
};
// Run Gallery Editor
GalleryControl.init();
The button that opens up the gallery looks like this
<a href="#" id="wppf-gallery-gallery" class="wppf-open-gallery button button-primary wppf-gallery" data-list="#wppf-gallery-thumbs-gallery" data-ids="597,596">Create Gallery</a>
When i then open up the gallery and add 2 new images, the data-ids attribute is updated with the new ids and looks like this
<a href="#" id="wppf-gallery-gallery" class="wppf-open-gallery button button-primary wppf-gallery" data-list="#wppf-gallery-thumbs-gallery" data-ids="597,596,381,280">Create Gallery</a>
However, the media manager won't "preselect" the 4 images until i save the post. Anybody knows how to fix this issue?
Thank you.