0

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

screenshot 1

screenshot 2

2
  • 1
    Much probably, yes, it is possible. What have you tried? What code you already have?
    – brasofilo
    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
    Jan 27, 2013 at 19:55

2 Answers 2

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.

2
  • I've update the question. any idea what's next ? I found it very hard to insert gallery shortcode to the textarea
    – resa.r
    Jan 29, 2013 at 6:25
  • i've just come across the advanced custom fields plugin which allows galleries to be inserted via the 3.5 media uploader (support.advancedcustomfields.com/discussion/4486/…), perhaps that could be useful? Jan 29, 2013 at 20:00
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.