0

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?

2

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;
}

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.