HOWTO: Simple Bootstrap 4 WordPress Gallery
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /** * 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:
- 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’);
- 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/