Responsive BS Gallery single column expanding to three columns

mZoo · February 1, 2016, 12:07am

I want to display a WP gallery of medium images responsively: single column in mobile and expanding.

This code displays a WP gallery of thumbnails; three small columns on small screens and larger images as window expands:

// Gallery shortcode
.gallery-columns-3 {
  @include make-row();
}
.gallery-columns-3 .gallery-item {
  @include make-md-column(4);
}
.gallery-item .landscape {
  @extend .thumbnail;
}
.gallery-caption {
  display: none;
}

I’m expecting it’s obvious. Can someone please point me in the right direction?

mZoo · February 1, 2016, 12:33am

It was an older version of Sage - 8.2.1 - and I just needed to add Theme support:

  // Enable post formats
      
          // http://codex.wordpress.org/Post_Formats
          add_theme_support('post-formats', ['aside', 'gallery', 'link', 'image', 'quote', 'video', 'audio']);
        
          // Enable HTML5 markup support
          // http://codex.wordpress.org/Function_Reference/add_theme_support#HTML5

          add_theme_support('html5', ['caption', 'comment-form', 'comment-list', 'gallery', 'search-form']);

Which I copied from the lib/setup.php page to what in the older version is lib/config.php.

Now beginning to behave as hoped for. Still would like to code so that there can be two columns in between the smallest and larger breakpoints. Insights welcome.

cfx · February 1, 2016, 2:23am

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html (uses LESS but the explanation/logic is on point)

http://sass-lang.com/guide (see mixins)

github.com

twbs/bootstrap-sass/blob/5ad0746ff394aa810e730eefec69f65036450e66/assets/stylesheets/bootstrap/mixins/_grid.scss#L22


}


// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
margin-left:  ceil(($gutter / -2));
margin-right: floor(($gutter / -2));
@include clearfix;
}


// Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
position: relative;
float: left;
width: percentage(($columns / $grid-columns));
min-height: 1px;
padding-left:  ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
}

mZoo · February 5, 2016, 3:49pm

Thanks a lot, @cfx. I actually picked up a copy of Designing with Web Standards (3rd edition) from Abe Books based on your linked article. Haven’t had a chance yet to update my code based on your example, but will report back.