I create a gallery media up loader on a meta field. Its working perfectly.
When I click on Browse
, a gallery media up loader is open, I select images and then click on Insert Gallery
but I didn't get a shortcode of a gallery in input meta field.
Here is my code that I get from internet:
var meta_image_frame_gallery;
$( '#additional_image_1' ).click(function( event ) {
event.preventDefault();
//var images = $( '#itv_additional_image_1' ).val();
//var gallery_state = images ? 'gallery-edit' : 'gallery-library';
if ( meta_image_frame_gallery ) {
meta_image_frame_gallery.open();
return;
}
// create new media frame
// You have to create new frame every time to control the Library state as well as selected images
meta_image_frame_gallery = 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-library',
library: {
type: 'image'
},
multiple: true
} );
} );
And here is my html code:
<input id="itv_additional_image_1" class="input-text" name="itv_additional_image_1" placeholder="" type="text">
<input id="additional_image_1" name="additional_image_1" value="Browse" type="button">
I am very weak in jquery, so please guide me on this issue
Can you please try below code:
jQuery:
$(document).ready( function(){
var meta_image_frame_gallery;
$( '#additional_image_1' ).click(function( event ) {
event.preventDefault();
if ( meta_image_frame_gallery ) {
meta_image_frame_gallery.open();
return;
}
// create new media frame
// You have to create new frame every time to control the Library state as well as selected images
meta_image_frame_gallery = 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-library',
library: {
type: 'image'
},
multiple: true,
} );
/* Add image gallery shortcode in itv_additional_image_1 input filed when close event call */
meta_image_frame_gallery.on('close',function() {
//fetch the gallery state
var controller = meta_image_frame_gallery.states.get('gallery-library');
var library = controller.get('library');
//get the shortcode and update the input field
var new_shortcode = wp.media.gallery.shortcode(library).string();
$('#itv_additional_image_1').val(new_shortcode);
});
/* Update event for image gallery */
meta_image_frame_gallery.on('update', function () {
var controller = meta_image_frame_gallery.states.get('gallery-edit');
var library = controller.get('library');
var new_shortcode = wp.media.gallery.shortcode(library).string(); // Get the new/updated shortcode here.
$('#itv_additional_image_1').val(new_shortcode);
});
});
});
Code is tested in work perfect. update gallery item also work perfect.