Informática, Snippets

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.