It appears that the templates live in script form
<script type="text/html" id="tmpl-my-custom-gallery-setting">
To render the above template would require
wp.media.template('my-custom-gallery-setting')(view)
Since we’re replacing the template: logic then all we need to do is store a list of template IDs.
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.push('my-custom-gallery-setting');
Then loop through all available views
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output="";
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
RESULT
So now the client doesn’t have to remember shortcode attributes in order to modify the gallery because all options have been added to the UI as dropdowns.
As a bonus, the list of supported types are passed through a filter so you can add or reduce the amount of choices from a third-party source.
LOCATION A
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
$gallery_types = apply_filters('print_media_templates_gallery_settings_types',
array(
'swiper' => ' Swiper',
'owl' => ' Owl Carousel',
'revolution' => ' Revolution Slider',
'default_val' => ' Default'));
?>
<script type="text/html" id="tmpl-custom-gallery-type-setting">
<label class="setting">
<span><?php _e('Layout Type'); ?></span>
<select data-setting="type"><?php
foreach($gallery_types as $key => $value) {
echo "<option value=\"$key\">$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, {
type: 'default_val'
});
// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.push('custom-gallery-type-setting');
// loop through list -- allowing for other templates/settings
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output="";
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
});
</script>
<?php
});
LOCATION B
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
$gallery_types = apply_filters('print_media_templates_gallery_settings_shapes',
array(
'circle' => ' Circle',
'rectangle' => ' Rectangle',
'square' => ' Square',
'default_val' => ' Default'));
?>
<script type="text/html" id="tmpl-custom-gallery-shapes">
<label class="setting">
<span><?php _e('Shapes'); ?></span>
<select data-setting="shape"><?php
foreach($gallery_types as $key => $value) {
echo "<option value=\"$key\">$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, {
shape: 'default_val'
});
// join default gallery settings template with yours -- store in list
if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.push('custom-gallery-shapes');
// loop through list -- allowing for other templates/settings
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function (view) {
var output="";
for (var i in wp.media.gallery.templates) {
output += wp.media.template(wp.media.gallery.templates[i])(view);
}
return output;
}
});
});
</script>
<?php
});