Building a Masonry Grid View with Bootstrap in Drupal 8

I’m in the process of moving my photography site into my current Drupal 8 site.  After a little thought I decided that I wanted to have my photos in a grid using a masonry layout (you know, the layout made famous by Pinterest).   The image attached to this article gives a quick demonstration.   On many sites this is accomplished using David DeSandro’s masonry.js.  

Drupal has a Masonry Api and a companion Masonry Views Module.  I installed the modules and they mostly worked but didn't quite meet my needs.  I wanted a little more control of the grid.  I wanted to have a responsive design with different number of columns based on screen size (1 or 2 columns on phones, 3 columns on tablets, 4 on large desktops).  Although my current design doesn't require it, I suspect  that down the road I might want certain images to span multiple columns.  I use bootstrap on my sites to make things simple so I didn't want to write custom CSS to manage column sizes.  I knew I could get the results I wanted with some work but I got to wondering, "how much work would it take to just integrate the library and write some JS".  I found the answer was under 10 lines of code and a little configuration work.

A quick google search led me to this codepen built by the developer of masonry.js which made things seem simple enough. 

So let's break down what I did:

1. I already have a theme built which is using Bootstrap 3.  The theme's machine name and directory is seanreiser (replace seanreiser with your theme's machine name)
2. Download the masonry library from here.
3. Place masonry.pkgd.min.js in themes/seanreiser/libraries/masonry (so the file is located at themes/seanreiser/libraries/masonry/masonry.pkgd.min.js).
4. Add the masonry library to the theme.  Add this code to my theme's seanreiser.libraries.yml :
   masonry: js: libraries/masonry/masonry.pkgd.min.js: {}
5. Create a view:
   1. View Name : Photo Gallery
   2. Style : Unformatted List
   3. Settings -> Row Class -> col-xs-12 col-sm-6 col-md-4 col-lg-3
   4. Show: Fields
   5. Add the image to the field list.
6. Attach the library to the views the view template  (themes/seanreiser/templates/view/views-view-unformatted--photo_gallery.html.twig)

   {{ attach_library('seanreiser/masonry') }}
   
   
   {% for row in rows %}
     {%	    
       set row_classes = [
         default_row_class ? 'views-row',
         loop.first ? 'views-row-first',
         loop.last ? 'views-row-last',
         'masonry'
       ]
     %}
     
     <div{{ row.attributes.addClass(row_classes) }}>
       {{- row.content -}}
     </div>
   {% endfor %}

    

7. To my site's themes/seanreiser/js/script.js I added

   $('.views-row').masonry({ itemSelector: '.views-row', percentPosition: true });

    

8.   Clear cache and rock and roll.

And it worked... mostly.  I had an issue where image overlapped occasionally.  The issue was that the grid would be initialized before the images were loaded.  Thankfully, David DeSandro has another library, ImagesLoaded, which detects if all your images have been loaded.  This required a couple of changes:

1. I downloaded the library and put it in: themes/seanreiser/libraries/imagesloaded
2. Add the imagesLoaded library to seanreiser.libraries.yml

   imagesloaded: js: libraries/imagesloaded/imagesloaded.pkgd.min.js: {}

3. Attach the library to the view (themes/seanreiser/templates/view/views-view-unformatted--photo_gallery.html.twig):

   {{ attach_library('seanreiser/masonry') }}
   {{ attach_library('seanreiser/imagesloaded') }} 
   
   
   {% for row in rows %}
     {%	    
       set row_classes = [
         default_row_class ? 'views-row',
         loop.first ? 'views-row-first',
         loop.last ? 'views-row-last',
         'masonry'
       ]
     %}
     
     <div{{ row.attributes.addClass(row_classes) }}>
       {{- row.content -}}
     </div>
   {% endfor %}

4. Modify your JS to hold off on initially the grid until the images are loaded (themes/seanreiser/js/script.js)
   

   var $grid = $('.view-photo-gallery'); $grid.imagesLoaded( function() { $grid.masonry({ itemSelector: '.views-row', percentPosition: true }); });

Now it's working just as I want.  Answers to some questions that I've been asked:

• Why did you include the library manually instead of using the Masnory API module?
  Since I was using the library on one view in one theme, I didn't see the benefit in having the overhead of the module.  If, in the future I use masonry in other ways, I'll change this.
• You mentioned photos spanning columns where is that?
  I haven't implemented that.  If I decide to do it I'll add a link here to the todo.
• Where is the photography site?
  I'm in the middle of a major rebuild of a number of my sites.  Stay Tuned.
• Update 4/24/2019 1:00AM EDT - You said less then 10 lines, there's a lot more there?
  My bad. views-view-unformatted--photo_gallery.html.twig is a copy of the default views-view-unformatted.html.twig with 2 lines added (the attach library). I am counting that as 2 lines.

Share and Enjoy!

Image