WordPress - Add gallery overlay to a metabox using wp.media

If i got you right, you've got text field which open media window on click and you want to insert the id's of the selected images into the field value (id's separated by comma) when clicking on select button.if that so, so this is what i modified:

Fix:

Error because of the semicolon (it is inside an array which can not have semicolon)

    displayUserSettings: true}); // --> here

Modified:

image_frame variable needs to be set outside this scope and return after reopen action

var image_frame; // --> outside the scopeif(image_frame){   image_frame.open();   // --> add return}

Additions:

Wrap the JS and inject the jQuery as $ sign into the scope, now we can use $ sign instead of jQuery and prevent conflicts with other JS scripts:

(function($){...})(jQuery);

Set the text field object as $that variable so we will be use it inside deeper scopes

var $that = $(this);

Add the select action and insert the selected images id's separated by comma into the field value:

       image_frame.on( 'select', function() {            var ids = '', attachments_arr = [];            // Get media attachment details from the frame state            attachments_arr = image_frame.state().get('selection').toJSON();            $(attachments_arr).each(function(e){                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';                ids += $(this)[0].id + sep;            });            $that.val(ids);        });

All together:

Just the JS part, which was modified:

(function($){    var image_frame;    $('.custom-post-gallery').on( 'click', function(e){        e.preventDefault();        // If the media frame already exists, reopen it.        if (image_frame){           image_frame.open();           return;        }        var $that = $(this);        // Define image_frame as wp.media object        image_frame = wp.media({            title: 'Select Gallery Images',            library : {                type : 'image'            },            multiple: true        });        image_frame.states.add([            new wp.media.controller.Library({                id:         'post-gallery',                title:      'Select Images for the Post Gallery',                priority:   20,                toolbar:    'main-gallery',                filterable: 'uploaded',                library:    wp.media.query( image_frame.options.library ),                multiple:   image_frame.options.multiple ? 'reset' : false,                editable:   true,                allowLocalEdits: true,                displaySettings: true,                displayUserSettings: true            })        ]);        image_frame.open();        image_frame.on( 'select', function() {            var ids = '', attachments_arr = [];            // Get media attachment details from the frame state            attachments_arr = image_frame.state().get('selection').toJSON();            $(attachments_arr).each(function(e){                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';                ids += $(this)[0].id + sep;            });            $that.val(ids);        });    });   })(jQuery);

This is working for me, tell me if you have any issue.