Insert wp gallery shortcode into custom textarea

admin管理员组

文章数量:1122826

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

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

• custom-field
• shortcode
• gallery
• media-library

Share Improve this question edited Dec 8, 2017 at 14:25 Dharmang 45533 silver badges1212 bronze badges asked Jan 27, 2013 at 19:00 resa.rresa.r 1355 bronze badges 2

• 1 Much probably, yes, it is possible. What have you tried? What code you already have? – brasofilo Commented Jan 27, 2013 at 19:44
• I just done made the metabox, textarea field and the button. I need to know how to open the wp media library using that custom button and can return output shortcode to the textarea. any ideas to achieve it ? it should work like we use media library button and the shortcode gallery inserted into wp main editor – resa.r Commented Jan 27, 2013 at 19:55

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

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

本文标签： Insert wp gallery shortcode into custom textarea