Insert wp gallery shortcode into custom textarea

Question

Insert wp gallery shortcode into custom textarea

resa.r

2022年5月1日 13:02

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

Topic media-library shortcode gallery custom-field Wordpress

Category Web

Diosney · Accepted Answer · 2014年6月25日 20:23

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 :)

Simon Blackbourn · Accepted Answer · 2013年1月27日 20:22

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.

Insert wp gallery shortcode into custom textarea

About