How to show Squarespace gallery in Masonry view

Squarespace have awesome powerful feature to manage images using gallery feature. There is lot of flexible option to present images into different layout. Show images into masonry view is a passion. There is no inbuilt option for show images into masonry view.

Here is the following steps to show your gallery images into Masonry view:-

1. Create a gallery page and upload your all images.

2. After uploading all images. Now time to show your all images using Squarespace Gallery Block. You could select your existing gallery page and select gallery type Grid. Now you could there is all gallery images showing.

3. Here is the following code you have to add into Advanced => PAGE HEADER CODE INJECTION
 of page setting to show your images in Masonry view.




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.js"></script>
<style>
 .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-1 .sqs-gallery-design-grid-slide { width: 32.5% !important; margin: 0 !important; }


 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper{
  margin-bottom: 0!important;
   margin-right: 0 !important;
   padding-left: 9px !important;
   padding-right: 9px !important;
   padding-bottom: 18px;
  }

  @media screen and (max-width: 767px){
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-1 .sqs-gallery-design-grid-slide { width: 100% !important; margin: 0 !important; position: static !important;}


  #page [class*=sqs-col] .sqs-block {
  height: auto !important;
  }

  .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {
  padding-left: 0 !important;
  }
      }
</style>
<script>

setTimeout(function(){
var $grid = $('.sqs-gallery-design-grid').masonry({
  itemSelector: '.sqs-gallery-design-grid-slide',
  columnWidth: '.sqs-gallery-design-grid-slide',
  percentPosition: true
});

$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});
  }, 1000)
$(document).scroll(function(){
  var $grid = $('.sqs-gallery-design-grid').masonry({
  itemSelector: '.sqs-gallery-design-grid-slide',
  columnWidth: '.sqs-gallery-design-grid-slide',
  percentPosition: true
});
 $grid.masonry('reloadItems');
})
</script>

4. Now refresh your page and you could see your all images into Masonry view.

Please comment in below section if you are getting any error.

Thanks,