2

So I have the code to successfully add a select field to my media uploader (gallery view) which is cool, but I also need to add some jquery listeners to that field.

I'm using the 'print_media_templates' hook to add my markup and js, and I want to add a jQuery listener to the select field, .js--gallery-style, which would toggle another field with show or whatever:

function add_gallery_type_option(){


  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){


      _.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
}
add_action('print_media_templates', 'add_gallery_type_option');

I'm sure this is pretty easy but I havent learned backbone.js yet so I dont know where to start looking.

3
+100

From Blackbone.js website:

render is the core function that your view should override, in order to populate its element (this.el), with the appropriate HTML. The convention is for render to always return this.

So, I have modified the code a little bit to add jQuery change listener.

function add_gallery_type_option(){
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){
      _.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);
        },
        render: function() {
                wp.media.View.prototype.render.apply( this, arguments );

                jQuery(this.$('.js--gallery-style')).change(function(e)
                  {
                      alert(jQuery(this).val());
                  })
                return this;
            }
      });

    });

  </script>
  <?php
}
add_action('print_media_templates', 'add_gallery_type_option');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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