Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to enhance the Media Editor, after WordPress 3.5, on the gallery view.
I want to add a new select field on the right side and send the selected values to the gallery shortcode.

enter image description here

I think, the function wp.media.gallery in wp-includes/js/media-editor.js is the default function to insert the gallery shortcode.

I want to add a new parameter and the values of the parameter come from the select field inside the Media Manager.

I have played with different sources, especially from this question, but Backbone is very new for me and I don't understand how it works. I have also played with the hook print_media_templates, but no result on the Media view.

What hooks should I use?

share|improve this question

2 Answers 2

up vote 15 down vote accepted

A small source, perhaps for a plugin to create the solution. At first the php part, there include the javascript for the button inside the Media Manager. Is more usable answer, but the answer of @One Trick Pony was create and the right direction and JS solution.

See the result on the image: enter image description here

The resulting shortcode, if the size not default size: enter image description here

The Hook print_media_templates is the right place for include the button, the markup. Also was enqueue a script, there have the solution for append the controls.

class Custom_Gallery_Setting {
    /**
     * Stores the class instance.
     *
     * @var Custom_Gallery_Setting
     */
    private static $instance = null;


    /**
     * Returns the instance of this class.
     *
     * It's a singleton class.
     *
     * @return Custom_Gallery_Setting The instance
     */
    public static function get_instance() {

        if ( ! self::$instance )
            self::$instance = new self;

        return self::$instance;
    }

    /**
     * Initialises the plugin.
     */
    public function init_plugin() {

        $this->init_hooks();
    }

    /**
     * Initialises the WP actions.
     *  - admin_print_scripts
     */
    private function init_hooks() {

        add_action( 'wp_enqueue_media', array( $this, 'wp_enqueue_media' ) );
        add_action( 'print_media_templates', array( $this, 'print_media_templates' ) );
    }


    /**
     * Enqueues the script.
     */
    public function wp_enqueue_media() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        wp_enqueue_script(
            'custom-gallery-settings',
            plugins_url( 'js/custom-gallery-setting.js', __FILE__ ),
            array( 'media-views' )
        );

    }

    /**
     * Outputs the view template with the custom setting.
     */
    public function print_media_templates() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        ?>
        <script type="text/html" id="tmpl-custom-gallery-setting">
            <label class="setting">
                <span>Size</span>
                <select class="type" name="size" data-setting="size">
                    <?php

                    $sizes = apply_filters( 'image_size_names_choose', array(
                        'thumbnail' => __( 'Thumbnail' ),
                        'medium'    => __( 'Medium' ),
                        'large'     => __( 'Large' ),
                        'full'      => __( 'Full Size' ),
                    ) );

                    foreach ( $sizes as $value => $name ) { ?>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'thumbnail' ); ?>>
                            <?php echo esc_html( $name ); ?>
                        </option>
                    <?php } ?>
                </select>
            </label>
        </script>
        <?php
    }

}

// Put your hands up...
add_action( 'admin_init', array( Custom_Gallery_Setting::get_instance(), 'init_plugin' ), 20 );

The follow source is the javascript, on the example source in php, the file custom-gallery-setting.js

/**
 * Custom Gallery Setting
 */
( function( $ ) {
    var media = wp.media;

    // Wrap the render() function to append controls
    media.view.Settings.Gallery = media.view.Settings.Gallery.extend({
        render: function() {
            media.view.Settings.prototype.render.apply( this, arguments );

            // Append the custom template
            this.$el.append( media.template( 'custom-gallery-setting' ) );

            // Save the setting
            media.gallery.defaults.size = 'thumbnail';
            this.update.apply( this, ['size'] );
            return this;
        }
    } );
} )( jQuery );
share|improve this answer
4  
Bravo! It seems that WordPress Development is building a knowledge-base about the new Media Library at a faster rate than the core developers ;) And, how not, @OneTrickPony once again reveals another one of his magic bag tricks, kudos to both! –  brasofilo Mar 12 '13 at 11:52
    
Thanks a bunch this has helped a lot! –  Lea Hayes Apr 5 '13 at 20:49
    
Fantastic. Follow-up question: is there an easy way to suppress default attributes in the shortcode? So [gallery type="thumbnail" ids="1,2"] becomes [gallery ids="1,2"] ? I'm adding a custom attribute for a plugin to optionally turn the gallery into a slideshow. I'd like to suppress the attribute when it's just saying to show a normal WP Gallery. So on de-activation of the plugin, it leaves behind less cruft. –  kitchin Oct 14 at 10:12
    
I think is a better way to add a new question about this topic. The shortcode is outside the q/a here. –  bueltge Oct 14 at 15:52
    

If you really want to use Backbone templates, then your hook is correct.

I would use jQuery to insert the HTML template rather than overriding the template() function for the gallery settings view. But I guess you already know that, so I'll post the Backbone version:

add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('My setting'); ?></span>
      <select data-setting="my_custom_attr">
        <option value="foo"> Foo </option>
        <option value="bar"> Bar </option>        
        <option value="default_val"> Default Value </option>        
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){

      // add your shortcode attribute and its default value to the
      // gallery settings list; $.extend should work as well...
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php

});
share|improve this answer
    
Thanks a lot! I will add the bounty, if it is possible in 11 hours- –  bueltge Mar 12 '13 at 11:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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