Skip to content

Instantly share code, notes, and snippets.

@najlepsiwebdesigner
Created December 30, 2016 09:56
Show Gist options
  • Save najlepsiwebdesigner/70096d99cf0014b3860f46f56e7b82b6 to your computer and use it in GitHub Desktop.
Save najlepsiwebdesigner/70096d99cf0014b3860f46f56e7b82b6 to your computer and use it in GitHub Desktop.
make wordpress gallery responsive with bootstrap grid
@Elwood-P
Copy link

Elwood-P commented May 1, 2018

Very useful thanks.

@shaneparsons
Copy link

How can I use this?

@XNicON
Copy link

XNicON commented Oct 1, 2018

function bootstrap_gallery( $output = '', $atts, $instance ) {
  $atts = shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post ? $post->ID : 0,
    'itemtag'    => $html5 ? 'figure'     : 'dl',
    'icontag'    => $html5 ? 'div'        : 'dt',
    'captiontag' => $html5 ? 'figcaption' : 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => '',
    'link'       => ''
  ), $atts, 'gallery' );

  $images = explode(',', $atts['include']);
  if($atts['columns'] < 1 || $atts['columns'] > 12) {
    $atts['columns'] == 3;
  }
  
  $col_class = 'col-sm-' . 12/$atts['columns'];
  
  $output = '<div class="gallery">';
  $output .= '<div class="row">';
  foreach($images as $i => $id) {
    if ($i%$atts['columns'] == 0 && $i > 0) {
      $output .= '</div><div class="row">';
    }

    $attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
    if( ! empty( $atts['link'] ) && 'file' === $atts['link'] ) {
      $image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
    } elseif ( ! empty( $atts['link'] ) && 'none' === $atts['link'] ) {
      $image_output = wp_get_attachment_image( $id, $atts['size'], false, $attr );
    } else {
      $image_output = wp_get_attachment_link( $id, $atts['size'], true, false, false, $attr );
    }

    $output .= '
      <div class="'.$col_class.'">
          <div class="gallery-image-wrap">
          '.$image_output.'
          </div>
      </div>';
  }
  $output .= '</div></div>';
  return $output;
}
add_filter('post_gallery', 'bootstrap_gallery', 10, 3);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment