7

I would like to add custom option to default wordpress gallery tab. I need something simple just a drop down to add offered style, this would add predefined class to gallery on client side and on edit view in admin part.

enter image description here

Is there a way to do this without hacking wordpress code.

I saw a post here: Add option to "Gallery Settings" section which show how to do what I wan't but, I tried it and it doesn't work, I guess that's because the example is for ~3.5 version, and I am using 4.1.1 How can I do this with my current version.

  • what option do you want to add exactly? what was the full code you have tried? – Michael Feb 25 '15 at 14:21
5

WordPress doesn't make it very easy to modify aspects of the gallery shortcode. Some attributions:

  • Thanks to user peterbra for really putting the whole thing together a year ago.
  • Thanks to user birgire for coming up with a solution as far as adding the attribute in a meaningful way.

The other option besides birgires ( as far as I know ) is to pretty much rebuild the shortcode by copying existing code the cores media.php file which is a pain.


Some things to note on the initial additional_gallery_settings() function, from peterbra:

  • The tmpl- prefix is required.
  • Your field should have a data-setting attribute

Just throw the following code into your functions.php file:

/**
 * Set up the new field in the media module.
 *
 * @return void
 */
function additional_gallery_settings() {
  ?>

    <script type="text/html" id="tmpl-custom-gallery-setting">
        <span>Style</span>
        <select data-setting="style">
            <option value="default-style">Default Style</option>
            <option value="custom-style">Custom Style</option>
            <option value="ie7-style">IE7 Style</option>
        </select>
    </script>

    <script type="text/javascript">
        jQuery( document ).ready( function() {
            _.extend( wp.media.gallery.defaults, {
                style: 'default-style'
            } );

            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
}
add_action( 'print_media_templates', 'additional_gallery_settings' );

/**
 * HTML Wrapper - Support for a custom class attribute in the native gallery shortcode
 *
 * @param string $html
 * @param array $attr
 * @param int $instance
 *
 * @return $html
 */
function customize_gallery_abit( $html, $attr, $instance ) {

    if( isset( $attr['style'] ) && $style = $attr['style'] ) {
        // Unset attribute to avoid infinite recursive loops
        unset( $attr['style'] ); 

        // Our custom HTML wrapper
        $html = sprintf( 
            '<div class="wpse-gallery-wrapper-%s">%s</div>',
            esc_attr( $style ),
            gallery_shortcode( $attr )
        );
    }

    return $html;
}
add_filter( 'post_gallery', 'customize_gallery_abit', 10, 3 );
|improve this answer|||||
  • 3
    looks like "wp.media.gallery.defaults" is now "wp.media.galleryDefaults" – locomo Apr 1 '17 at 1:21

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.