I’m trying to extend this answer by making it possible to switch shortcode attributes from the UI and alter the gallery markup based on those attributes.
In this case, if owl is set to true then an Owl Carousel would render in the gallery’s place – which is does. But like any shortcode you have to remember the correct attributes. Seeing that I also want the ability to swap carousels to say iDangerous Swiper then the attribute owl is limited and hard to remember based on the supported feature set.
Luckily for me I found a snippet to add ~custom fields~ to the gallery using this sample.
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
});
Unfortunately the post is > 2 years old and closed.
The challenge is: if I replace the template view with my settings then it’s impossible to extend the settings set from another plugin or theme. The last view set as template: is always the winner.
The question: How can I code this to allow for greater flexibility, where by not only my settings show but I also don’t block the ability for other plugins / theme modifications?
1 Answer
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
});
