jquerywordpressimage-uploadingshortcodemedia-library

How to get shortcode of wp gallery on creating gallery in meta field


I create a gallery media up loader on a meta field. Its working perfectly.

enter image description here

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


Solution

  • 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.