Insert wp gallery shortcode into custom textarea

Question

Is there a way to insert wp gallery shortcode into custom metabox textarea ? I would like to have something like this:

New metabox in post/page with textarea and below textarea there are a button to open wp browse media gallery lightbox. then when we have done to select few images as gallery, click the "insert gallery" button will insert the shortcode to the textarea custom field.

is it possible ?

Thanks

====== Update: ======

I was able to show media library, now I don't have idea how to insert shortcode to the custom textarea when click button "insert gallery"

Here my code so far:

HTML

<div class="uploader">
 <textarea name="settings[_cs_shortcode_gallery]" id="_cs_shortcode_gallery"></textarea>
 <input class="button tf-browse-btn" name="_cs_shortcode_gallery_button" id="_cs_shortcode_gallery_button" value="Browse Gallery"/>
</div>

JS

var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;
  $('.tf-browse-btn').live('click', function(e) {
    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');
    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment){
      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };
    }
    wp.media.editor.open(button);
    return false;
  });
  $('.add_media').on('click', function(){
    _custom_media = false;
  });

What I want to achieve now are:

• How to set Create Gallery Tab as default tab when open the modal
• Insert gallery shortcode to the custom textarea

Please see the screenshot below for details

Answer 1

I'm sure it's possible, but will require some work with both PHP and jQuery. This plugin by Thomas Griffin to insert an image into a meta box would be a very good starting point.

You'll need to do some digging around in the js files in wp-admin/js and in wp-admin/includes/media.php.

Answer 2

Yes, it is possible :) I just needed to implement this functionality and come with your post.

Let's suppose do you have this HTML:

<input type="hidden" name="shortcode" value="{{ options.shortcode }}"/>
<br />
<a href="#" class="btn gallery-configure">
     Configure Gallery
</a>

The matching JS to trigger the Gallery edit modal and save the shortcode into the proper field would be:

/**
 * Gets initial gallery-edit images. Function modified from wp.media.gallery.edit
 * in wp-includes/js/media-editor.js.source.html
 *
 * @params {*} shortcode
 * @return {*}
 */
function select(shortcode) {
    var shortcode = wp.shortcode.next('gallery', shortcode);
    var defaultPostId = wp.media.gallery.defaults.id;
    var attachments;
    var selection;

    // Bail if we didn't match the shortcode or all of the content.
    if (!shortcode) {
        return;
    }

    shortcode = shortcode.shortcode;

    if (typeof shortcode.get('id') != 'undefined' && typeof defaultPostId != 'undefined') {
        shortcode.set('id', defaultPostId);
    }

    attachments = wp.media.gallery.attachments(shortcode);
    selection = new wp.media.model.Selection(attachments.models, {
        props   : attachments.props.toJSON(),
        multiple: true
    });

    selection.gallery = attachments.gallery;

    /*
     * Fetch the query's attachments, and then break ties from the query to allow for sorting.
     */
    selection.more().done(function () {
        // Break ties with the query.
        selection.props.set({
            query: false
        });
        selection.unmirror();
        selection.props.unset('orderby');
    });
    return selection;
}

var $body = jQuery('body');

// Media uploaders.
$body.on('click', '.gallery-configure', function () {
    var $this_button = jQuery(this);

    jQuery('.media-modal-close').trigger('click');

    var selection = var selection = select($this_button.parent().find('[name="shortcode"]').val()); // Get the saved selection here.
    var frame = wp.media({
        frame   : 'post',
        title   : wp.media.view.l10n.editGalleryTitle,
        multiple: false,
        state   : 'gallery-edit',
        editing : true,

        selection: selection
    });

    frame.on('update', function () {
        var controller = frame.states.get('gallery-edit');
        var library = controller.get('library');
        var new_shortcode = wp.media.gallery.shortcode(library).string(); // Get the new/updated shortcode here.

        $this_button.parent().find('[name="shortcode"]').val(new_shortcode);
    });

    frame.open();
    return false;
});

Hope this helps you, it took me some time to figure it out :)