i already searched for solution and found a lot of unsolved or obsolete topics.
Custom wordpress gallery option | Custom field for default gallery
However, I´d like to add some custom fields (checkboxes, cyclebuttons etc.) to add attributes to the gallery shortcut. Does anyone have some snippes?
EDIT: Finally Ive found this and its doing all I want it to do. :)rownn
EDIT: Based on upper link I wrote following lines.
add_action('print_media_templates', function(){
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<h3 style="z-index: -1;">___________________________________________________________________________________________</h3>
<h3>Custom Settings</h3>
<label class="setting">
<span><?php _e('Text'); ?></span>
<input type="text" value="" data-setting="ds_text" style="float:left;">
</label>
<label class="setting">
<span><?php _e('Textarea'); ?></span>
<textarea value="" data-setting="ds_textarea" style="float:left;"></textarea>
</label>
<label class="setting">
<span><?php _e('Number'); ?></span>
<input type="number" value="" data-setting="ds_number" style="float:left;" min="1" max="9">
</label>
<label class="setting">
<span><?php _e('Select'); ?></span>
<select data-setting="ds_select">
<option value="option1"> 'Option-1' </option>
<option value="option2"> 'Option-2' </option>
</select>
</label>
<label class="setting">
<span><?php _e('Bool'); ?></span>
<input type="checkbox" data-setting="ds_bool">
</label>
</script>
<script>
jQuery(document).ready(function()
{
_.extend(wp.media.gallery.defaults, {
ds_text: 'no text',
ds_textarea: 'no more text',
ds_number: "3",
ds_select: 'option1',
ds_bool: false,
ds_text1: 'dummdideldei'
});
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
UserInterface Shortcode
Everthings works fine beside: The number field isnt filled by shortcode. I believe the reason for this is that the HTML-input-tag type "number" only accept integer for "value". What do I have to add to code to change the string of ds_number to int?
Greetings rownn
i already searched for solution and found a lot of unsolved or obsolete topics.
Custom wordpress gallery option | Custom field for default gallery
However, I´d like to add some custom fields (checkboxes, cyclebuttons etc.) to add attributes to the gallery shortcut. Does anyone have some snippes?
EDIT: Finally Ive found this https://wordpress/support/topic/how-to-add-fields-to-gallery-settings and its doing all I want it to do. :)rownn
EDIT: Based on upper link I wrote following lines.
add_action('print_media_templates', function(){
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<h3 style="z-index: -1;">___________________________________________________________________________________________</h3>
<h3>Custom Settings</h3>
<label class="setting">
<span><?php _e('Text'); ?></span>
<input type="text" value="" data-setting="ds_text" style="float:left;">
</label>
<label class="setting">
<span><?php _e('Textarea'); ?></span>
<textarea value="" data-setting="ds_textarea" style="float:left;"></textarea>
</label>
<label class="setting">
<span><?php _e('Number'); ?></span>
<input type="number" value="" data-setting="ds_number" style="float:left;" min="1" max="9">
</label>
<label class="setting">
<span><?php _e('Select'); ?></span>
<select data-setting="ds_select">
<option value="option1"> 'Option-1' </option>
<option value="option2"> 'Option-2' </option>
</select>
</label>
<label class="setting">
<span><?php _e('Bool'); ?></span>
<input type="checkbox" data-setting="ds_bool">
</label>
</script>
<script>
jQuery(document).ready(function()
{
_.extend(wp.media.gallery.defaults, {
ds_text: 'no text',
ds_textarea: 'no more text',
ds_number: "3",
ds_select: 'option1',
ds_bool: false,
ds_text1: 'dummdideldei'
});
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
UserInterface Shortcode
Everthings works fine beside: The number field isnt filled by shortcode. I believe the reason for this is that the HTML-input-tag type "number" only accept integer for "value". What do I have to add to code to change the string of ds_number to int?
Greetings rownn
Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Mar 31, 2015 at 14:57 rownnrownn 1411 silver badge4 bronze badges 3- 2 Please post your code, working or not. – s_ha_dum Commented Mar 31, 2015 at 16:09
- Im caught! I have no code. I know its a thick way to ask for snippes, but I have no idea. :/ I wanted to analyse a working code to see how it works. I know Ive to manage it with add_action() for adding and saving, but I dont know how create certain types at certain places. – rownn Commented Mar 31, 2015 at 17:39
- @rownn, you should post your code as an answer rather than editing the question - then accept it: :) – Jen Commented Nov 10, 2016 at 23:53
1 Answer
Reset to default 2Thanks for your code. I've investigated this issue further (this is not an integer formatting problem). The only solution I came up with for number fields is to monkey patch more WP JS. Here is entire code with modifications which supports any input type:
add_action('print_media_templates', function(){
?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<h3>Custom Settings</h3>
<label class="setting">
<span><?php _e('Text'); ?></span>
<input type="text" value="" data-setting="ds_text" style="float:left;">
</label>
<label class="setting">
<span><?php _e('Textarea'); ?></span>
<textarea value="" data-setting="ds_textarea" style="float:left;"></textarea>
</label>
<label class="setting">
<span><?php _e('Number'); ?></span>
<input type="number" value="" data-setting="ds_number" style="float:left;" min="1" max="9">
</label>
<label class="setting">
<span><?php _e('Select'); ?></span>
<select data-setting="ds_select">
<option value="option1"> 'Option-1' </option>
<option value="option2"> 'Option-2' </option>
</select>
</label>
<label class="setting">
<span><?php _e('Bool'); ?></span>
<input type="checkbox" data-setting="ds_bool">
</label>
</script>
<script>
jQuery(document).ready(function()
{
_.extend(wp.media.gallery.defaults, {
ds_text: 'no text',
ds_textarea: 'no more text',
ds_number: "3",
ds_select: 'option1',
ds_bool: false,
ds_text1: 'dummdideldei'
});
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
},
// this is function copies from WP core /wp-includes/js/media-views.js?ver=4.6.1
update: function( key ) {
var value = this.model.get( key ),
$setting = this.$('[data-setting="' + key + '"]'),
$buttons, $value;
// Bail if we didn't find a matching setting.
if ( ! $setting.length ) {
return;
}
// Attempt to determine how the setting is rendered and update
// the selected value.
// Handle dropdowns.
if ( $setting.is('select') ) {
$value = $setting.find('[value="' + value + '"]');
if ( $value.length ) {
$setting.find('option').prop( 'selected', false );
$value.prop( 'selected', true );
} else {
// If we can't find the desired value, record what *is* selected.
this.model.set( key, $setting.find(':selected').val() );
}
// Handle button groups.
} else if ( $setting.hasClass('button-group') ) {
$buttons = $setting.find('button').removeClass('active');
$buttons.filter( '[value="' + value + '"]' ).addClass('active');
// Handle text inputs and textareas.
} else if ( $setting.is('input[type="text"], textarea') ) {
if ( ! $setting.is(':focus') ) {
$setting.val( value );
}
// Handle checkboxes.
} else if ( $setting.is('input[type="checkbox"]') ) {
$setting.prop( 'checked', !! value && 'false' !== value );
}
// HERE the only modification I made
else {
$setting.val( value ); // treat any other input type same as text inputs
}
// end of that modification
},
});
});
</script>
<?php