I want to customise my output of the gallery. What I really do not need is

<br style="clear: both">

But it is there because I have to choice a number of columns during building the gallery in the backend. And according this choice it is print out.

But I only need it one time, at the end of the gallery.

For my custom output I would prefere something like this. But using it my editor gives me errors eg. $id is not defined. And the WP Featherlight-Plugin is not working, too.

Can anybody help?

I want to customise my output of the gallery. What I really do not need is

<br style="clear: both">

But it is there because I have to choice a number of columns during building the gallery in the backend. And according this choice it is print out.

But I only need it one time, at the end of the gallery.

For my custom output I would prefere something like this. But using it my editor gives me errors eg. $id is not defined. And the WP Featherlight-Plugin is not working, too.

Can anybody help?

• posts
• gallery

1 Answer 1

The default [gallery] Shortcode will add that markup when necessary and only if the active WordPress theme didn't enable HTML5 support for the gallery Shortcode's markup/output. Or, in rare cases, a plugin or a custom code may have disabled the support.

So an easy way to get rid of that <br> tags, is by enabling HTML5 support for the Shortcode, like so: (add to the theme's functions.php file)

add_theme_support( 'html5', 'gallery' );

Or without enabling the HTML5 support, you can also use CSS to visually hide those <br> tags:

.gallery > br {
    display: none;
}

For my custom output I would prefer something like this.

In that case, you can copy the code in gallery_shortcode(), which is the default callback function for the gallery Shortcode, and then just modify the gallery markup to your liking. Here's an example which I tried and tested working on WordPress 4.9.8: (full code here)

// See gallery_shortcode() for reference.
add_filter( 'post_gallery', 'my_post_gallery', 10, 3 );
function my_post_gallery( $output, $attr, $instance ) {
    $post = get_post();

    // Change #1: I commented out this part; use the passed $instance (see above).
    /*static $instance = 0;
    $instance++;*/

    ...

    // Change #2: I commented out this part; otherwise, the page would stop working.
    /*$output = apply_filters( 'post_gallery', '', $attr, $instance );
    if ( $output != '' ) {
        return $output;
    }*/

    ...

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {

        ...
        // Change #3: I commented out this code.
        /*if ( ! $html5 && $columns > 0 && ++$i % $columns == 0 ) {
            $output .= '<br style="clear: both" />';
        }*/
    }

    // Change #4: I commented out this code.
    /*if ( ! $html5 && $columns > 0 && $i % $columns !== 0 ) {
        $output .= "
            <br style='clear: both' />";
    }*/

    // Change #5: Here's the only one `br` tag we need.
    $output .= "
            <br style='clear: both' />
        </div>\n";

    return $output;
}