Gallery or Artwork Gallery Masonry Through Blog

This was first used on the Bob Newhart Gallery https://www.bobnewhartofficial.com/blogs/gallery

Create a blog Template named blog.artwork.liquid and assign to blog.

Add the following code: Change names to fit your store.  

{% include 'theme-variables' %}



{% paginate blog.articles by 20 %}
  <div id="gallery" class="container">
    <h1>Photo Gallery</h1>

    <section class="gallery-links">
      {% for link in linklists.gallery.links %}
        <li><a class="btn btn-default" href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}      
    </section>

    <div class="row gallery-bob">
      {% for a in blog.articles limit: 100 %}
        <div class="col-md-3">
          {% if a.image %}<a class="gallery" href="{{ a | img_url: 'original' }}"><img class="article-image" src="{{ a | img_url: 'original' }}"></a>{% endif %}
        </div>
      {% endfor %}
    </div>
    <div class="pagination">
      {{ paginate | default_pagination }}
    </div>
  </div>
{% endpaginate %}



<style>

  #gallery h1 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1em;
  }

  *, *:before, *:after {box-sizing:  border-box !important;}

  .row.gallery-bob {
   -moz-column-width: 20em;
   -webkit-column-width: 20em;
   -moz-column-gap: 4px;
   -webkit-column-gap:4px; 
    margin-bottom: 40px;
  }

  .gallery-bob > .col-md-3 {
   display: inline-block;
   padding: 0;
   margin: 0;
   width:  100%; 
   float:none;
  }

  .gallery-bob.img-responsive {
    border:0px solid #999;
  }
  .row.gallery-bob img {
      width: 100%;
  }

  .row.gallery-bob img:hover {
      opacity: .8;
  }
  #colorbox #cboxClose {
      top: 0 !important;
      right: 0 !important;
  }
  #gallery .pagination {
    display: block;
    text-align: center;
  }
  #gallery .pagination span {
      background: black;
      padding: 10px;
      color: white;
      text-transform: uppercase;
  }  
  #gallery .pagination span:hover {
      opacity: .7;
  } 
  .row {
    height: auto;
  }
</style>


<script>
  jQuery(document).ready(function () {
    jQuery('.gallery').colorbox({ close: '<span class="fa-stack fa-lg"><i class="fa fa-stack-2x"></i><i class="fa fa-times fa-stack-1x fa-inverse"></i></span>' });
  });
</script>