Enhance Media Manager for Gallery

2 comments

1. 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:
   

   The resulting shortcode, if the size not default size:
   

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

   Log in to Reply

2. 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
   
   });
   

   Log in to Reply