0

I'm adding some custom settings to WP Gallery. I have follwed this topic to do it. All settings are done except one setting that uses radio button. Here is my code:

<input type="radio" name="title_text_size" data-setting="gallery_image_title_text_size" value="small" />
<input type="radio" name="title_text_size" data-setting="gallery_image_title_text_size" value="medium" />
<input type="radio" name="title_text_size" data-setting="gallery_image_title_text_size" value="large" />

And my shortcode:

[gallery gallery_image_title_text_size="medium" ids="14,12,13"]

The radio button (medium) is not checked when I click edit gallery. Do you have any idea to solve this? Thank in advance!

  • I don't see in your code where you've "told" that radio button to be checked. – Howdy_McGee Nov 30 '17 at 4:12
  • In my shortcode, gallery_image_title_text_size="medium" but when I click edit the gallery, the radio button that has value "medium" is not checked – Duc Doan Nov 30 '17 at 4:28
  • 1
    This won't happen automatically. Much like this answer you need to add in the Javascript which will "checkmark" or activate the radio button. An example can be seen at the top of the script in my linked answer. – Howdy_McGee Nov 30 '17 at 4:34
2

I had the same problem and got it finally to work. Based on the thread you have followed, you now have to extend the "update" function of the WP core /wp-includes/js/media-views.js.

Go to the "jQuery(document).ready(function()..." part of the 'print_media_templates' action and try this:

<script>

    jQuery(document).ready(function()
    {
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({

        // add your custom options template (you probably already did this)
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('custom-gallery-setting')(view);
        },

        // now extend the update function 
        update: function( key ) {

           // call originial function: you want to *extend* it, 
           // not to override it completely!
           wp.media.view.Settings.prototype.update.call( this, key );

           // get the current value of your gallery_image_title_text_size attribute
           var currentTextSize = this.model.attributes.gallery_image_title_text_size;

           // get the data-setting elements, in your case 'gallery_image_title_text_size':
           $setting = this.$( '[data-setting="gallery_image_title_text_size"]' );

                    // for each of this setting (if it's a radio button),
                    // check the value stored by your attributes 
                    // and set the radio button accordingly
                    $setting.each( function ( index ) {
                        if ( $( this ).is( 'input[type="radio"]' ) && 
                             currentTextSize == $( this ).val() ) {
                            $( this ).attr( 'checked', true );
                        } else {
                            $( this ).attr( 'checked', false );
                        }

                     } );
            }
        } );
    } );           
</script>
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.