jquery - 如何在元字段中创建画廊时获取 wp 画廊的简码

Question

我在元字段上创建了一个画廊媒体 uploader 。它工作完美。

当我单击浏览时，图库媒体上传加载器打开，我选择图像，然后单击插入图库，但我没有收到输入元字段中的画廊。

这是我从互联网上获得的代码:

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

    } );

这是我的 html 代码:

<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">

我对jquery很弱，所以请指导我解决这个问题

Answer 1

您可以尝试下面的代码吗:

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

代码经过测试，工作完美。更新图库项目也很完美。