Blog

If you are looking for a simple way to have your WordPress inserted galleries use the Bootstrap 4 layout – look no further. Just drop this code into your theme’s functions.php file and any WordPress gallery you insert when selecting media ([ gallery ids=”” ]) will then use the Bootstrap layout.

Code Needed for the WordPress Gallery

/**
 * Bootstrap 4 gallery
 */
add_filter( 'post_gallery', 'lucidity_bootstrap_gallery', 10, 2);
function lucidity_bootstrap_gallery( $output = '', $atts, $instance ) {
    if (strlen($atts['columns']) < 1) $columns = 3;
    else $columns = $atts['columns'];
    $images = explode(',', $atts['ids']);
    
    // Set the # of columns you would like
    if ( $columns < 1 || $columns > 12 ) $columns == 3;
    
    $col_class = 'col-lg-' . 12/$columns;
    
    $output = '<div class="row text-center text-lg-left gallery">';
    $i = 0;
    
    foreach ( $images as $key => $value ) {
       
        $image_attributes = wp_get_attachment_image_src( $value, 'thumbnail');
        $output .= '
            <div class="'.$col_class.'">
              <a data-gallery="gallery" href="'.esc_url($image_attributes[0]).'" class="d-block mb-4 h-100">
                    <img src="'.esc_url($image_attributes[0]).'" alt="" class="img-fluid img-thumbnail">
                </a>
            </div>';
        $i++;
    }
    
    $output .= '</div>';
    
    return $output;
} 

A few things to note:

1. This example uses the image size “thumbnail”. If you want to use something different – you can change that here on this line: $image_attributes = wp_get_attachment_image_src( $value, ‘thumbnail’);
2. This example uses 3 columns. Depending on the size of your images – you may also what to change that. You can make the change by changing the two references to “3” in the code above ($columns == 3, $columns = 3)

You can see the gallery in action here: http://www.jappler.com/2014/07/25/recent-visit-911-memorial/