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 }