Women are fine but men are required to sacrifice their children to use this restroom.

Posted: Apr 30, 2019

Holy Material Design, Facebook!

Posted: Apr 30, 2019

This country has real problems when it comes to the way we treat each other (race, gender, sexual orientation, religion, etc etc). The fact that the N happens to fall on the picture of President Obama on Joe Biden's instagram IS NOT ONE OF THEM.

PS - I do have problems with the branding. Looking at his website logo the red pops too much but this is better than Hillary's red arrow pointing to the right.

PPS - This is not me endorsing a candidate. This is me being an advocate for good design.

Posted: Apr 26, 2019

Happy Miss Congeniality Day!

Posted: Apr 25, 2019

I got confused by a dress code which called for "no mens undershirts". At first I was thinking, "why would they care if I wore an undershirt under my dress shirt? Why would they want the shadow of my chest hair showing through my shirt?", then I realized they meant wearing an undershirt as a shirt.

Now this is also confusing because how can it be an undershirt if you're wearing it as your top level of clothing? It's not under anything.

Posted: Apr 24, 2019

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)
    {# /** * @file * Default theme implementation to display a view of unformatted rows. * * Available variables: * - title: The title of this group of rows. May be empty. * - rows: A list of the view's row items. * - attributes: The row's HTML attributes. * - content: The row's content. * - view: The view object. * - default_row_class: A flag indicating whether default classes should be * used on rows. * * @see template_preprocess_views_view_unformatted() * * @ingroup themeable */ #} {{ 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', ] %}
    {{- row.content -}}
    {% 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):
    {# /** * @file * Default theme implementation to display a view of unformatted rows. * * Available variables: * - title: The title of this group of rows. May be empty. * - rows: A list of the view's row items. * - attributes: The row's HTML attributes. * - content: The row's content. * - view: The view object. * - default_row_class: A flag indicating whether default classes should be * used on rows. * * @see template_preprocess_views_view_unformatted() * * @ingroup themeable */ #} {{ 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', ] %}
    {{- row.content -}}
    {% 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!

    Posted: Apr 23, 2019
Posted: Apr 21, 2019

Clients are often surprised when I tell them we should make sure we change passwords before they future endeavor (aka fire) people. I'll be using this as an example in the future.

Posted: Apr 20, 2019

New rule: Documentarians are only allowed to use the "Ken Burns Effect" in their videos if David McCullough is the narrator.

Posted: Apr 20, 2019