Galería de WordPress Responsive con Bootstrap
Para todos los que usamos Bootstrap en WordPress, aunque configuremos nuestro theme, a veces necesitaremos que nuestra galería sea responsive y que mejor que implementar en cada imagen de la galería la clase .img-responsive (Bootstrap 3) o .img-fluid (Bootstrap 4), para ello os dejamos este simple snippet de Bootstrap.
Podremos elegir si entre 3 o 4 columnas a placer.
function bootstrap_gallery( $output = '', $atts, $instance ) { if (strlen($atts['columns']) &< 1) { $columns = 3; } else { $columns = $atts['columns']; } $images = explode(',', $atts['ids']); if ($columns &< 1 || $columns &> 12) { // Aqui define si 3 o 4 Columnas $columns == 3; } $col_class = 'col-xs-' . 12/$columns; $return = ' <div class="row gallery">'; $i = 0; foreach ($images as $key => $value) { if ($columns == 0 && $i > 0) { $return .= '</div> <div class="row gallery">'; } $image_attributes = wp_get_attachment_image_src($value, 'full'); $return .= ' <div class="'.$col_class.'"> <div class="gallery-image-wrap"> <a href="'.$image_attributes[0].'" data-gallery="gallery"> <img class="img-fluid" src="'.$image_attributes[0].'" alt="" /> </a> </div> </div> '; $i++; } $return .= ' </div> '; return $return; } add_filter( 'post_gallery', 'bootstrap_gallery', 10, 4);