Update Gallery to BS3

assets/css/app.css

@@ -29,6 +29,9 @@ body { }
 .main { }
 
 
+/* Gallery Shortcode */
+.row.gallery-row { padding: 15px 0; }
+
 
 /* ==========================================================================
    Sidebar

lib/cleanup.php

@@ -20,8 +20,6 @@ function roots_head_cleanup() {
   global $wp_widget_factory;
   remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));
 
-  add_filter('use_default_gallery_style', '__return_null');
-
   if (!class_exists('WPSEO_Frontend')) {
     remove_action('wp_head', 'rel_canonical');
     add_action('wp_head', 'roots_rel_canonical');
@@ -137,16 +135,6 @@ function roots_embed_wrap($cache, $url, $attr = '', $post_ID = '') {
 }
 add_filter('embed_oembed_html', 'roots_embed_wrap', 10, 4);
 
-/**
- * Add class="thumbnail" to attachment items
- */
-function roots_attachment_link_class($html) {
-  $postid = get_the_ID();
-  $html = str_replace('<a', '<a class="thumbnail"', $html);
-  return $html;
-}
-add_filter('wp_get_attachment_link', 'roots_attachment_link_class', 10, 1);
-
 /**
  * Add Bootstrap thumbnail styling to images with captions
  * Use <figure> and <figcaption>

lib/gallery.php

@@ -3,8 +3,9 @@
  * Clean up gallery_shortcode()
  *
  * Re-create the [gallery] shortcode and use thumbnails styling from Bootstrap
+ * The number of columns must be a factor of 12.
  *
- * @link http://twitter.github.com/bootstrap/components.html#thumbnails
+ * @link http://twbs.github.io/bootstrap/components/#thumbnails
  */
 function roots_gallery($attr) {
   $post = get_post();
@@ -39,7 +40,7 @@ function roots_gallery($attr) {
     'itemtag'    => '',
     'icontag'    => '',
     'captiontag' => '',
-    'columns'    => 3,
+    'columns'    => 4,
     'size'       => 'thumbnail',
     'include'    => '',
     'exclude'    => '',
@@ -47,6 +48,8 @@ function roots_gallery($attr) {
   ), $attr));
 
   $id = intval($id);
+  $columns = (12 % $columns == 0) ? $columns: 4;
+  $grid = sprintf('col-sm-%1$s col-lg-%1$s', 12/$columns);
 
   if ($order === 'RAND') {
     $orderby = 'none';
@@ -77,24 +80,41 @@ function roots_gallery($attr) {
     return $output;
   }
 
-  $output = '<ul class="thumbnails gallery">';
+  $unique = (get_query_var('page')) ? $instance . '-p' . get_query_var('page'): $instance;
+  $output = '<div class="gallery gallery-' . $id . '-' . $unique . '">';
 
   $i = 0;
   foreach ($attachments as $id => $attachment) {
     $image = ('file' == $link) ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
-
+    $output .= ($i % $columns == 0) ? '<div class="row gallery-row">': '';
-    $output .= '<li>' . $image;
+    $output .= '<div class="' . $grid .'">' . $image;
+    
     if (trim($attachment->post_excerpt)) {
       $output .= '<div class="caption hidden">' . wptexturize($attachment->post_excerpt) . '</div>';
     }
-    $output .= '</li>';
+    
+    $output .= '</div>';
+    $i++;
+    $output .= ($i % $columns == 0) ? '</div>' : '';
   }
-
+  
-  $output .= '</ul>';
+  $output .= ($i % $columns != 0 ) ? '</div>' : '';
+  $output .= '</div>';
 
   return $output;
 }
 if (current_theme_supports('bootstrap-gallery')) {
   remove_shortcode('gallery');
   add_shortcode('gallery', 'roots_gallery');
+  add_filter('use_default_gallery_style', '__return_null');
 }
+
+/**
+ * Add class="thumbnail img-thumbnail" to attachment items
+ */
+function roots_attachment_link_class($html) {
+  $postid = get_the_ID();
+  $html = str_replace('<a', '<a class="thumbnail img-thumbnail"', $html);
+  return $html;
+}
+add_filter('wp_get_attachment_link', 'roots_attachment_link_class', 10, 1);