Change the default WordPress gallery MCE view

The default WordPress gallery MCE view is from media-template.php and looks like this:

<script type="text/html" id="tmpl-editor-gallery">
   <# if ( data.attachments ) { #>
      <div class="gallery gallery-columns-{{ data.columns }}">
         <# _.each( data.attachments, function( attachment, index ) { #>
            <dl class="gallery-item">
               <dt class="gallery-icon">
                  <# if ( attachment.thumbnail ) { #>
                     <img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
                  <# } else { #>
                     <img src="{{ attachment.url }}" />
                  <# } #>
               </dt>
               <# if ( attachment.caption ) { #>
                  <dd class="wp-caption-text gallery-caption">
                     {{ attachment.caption }}
                  </dd>
               <# } #>
            </dl>
            <# if ( index % data.columns === data.columns - 1 ) { #>
               <br style="clear: both;">
            <# } #>
         <# } ); #>
      </div>
   <# } else { #>
      <div class="wpview-error">
         <div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
      </div>
   <# } #>
</script>

To change this default layout, create a new editor-gallery template and output it during admin_print_footer_scripts like this:

 

add_action( 'admin_print_footer_scripts', 'dtbaker_gallery_override' );
function dtbaker_gallery_override(){
   ?> 
   <script type="text/html" id="tmpl-editor-gallery-custom">
       your custom layout code here
   </script>
    <script type="text/javascript">
       ( function( $ ) {
          var media = wp.media;
          var galleryview = wp.mce.views.get('gallery');
          galleryview.View = galleryview.View.extend( {
            template: media.template( 'editor-gallery-custom' )
         } );
       })(jQuery);
    </script> 
   <?php 
}

you can even change the type of gallery based on shortcode attributes, like this:

add_action( 'admin_print_footer_scripts', 'dtbaker_gallery_override' );
function dtbaker_gallery_override(){
   ?> 
   <script type="text/html" id="tmpl-editor-gallery-custom">
       your custom layout code here
   </script>
    <script type="text/javascript">
( function( $ ) {
   var media = wp.media;
   var galleryview = wp.mce.views.get('gallery');
   galleryview.View = galleryview.View.extend( {
    initialize: function( options ) {
      this.shortcode = options.shortcode;
       // change the gallery tempalte depending on shortcode attributes, eg: [gallery slider="flexslider"]
       if(typeof this.shortcode.attrs.named.slider != 'undefined'){
          switch(this.shortcode.attrs.named.slider){
             case 'flexslider':
                this.template = media.template( 'editor-gallery-dtbaker-flexslider' );
                break;
             case 'pretty':
                this.template = media.template( 'editor-gallery-dtbaker-pretty' );
                break;
             default:
                // leave the existing template (editor-gallery)
           }
       }
      this.fetch();
   }
} );
  })(jQuery);
  </script>   <?php }

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *