Grid based lookbook photo gallery

gallery.html

<div class="albums">
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/couch_2048x_7298c7ac-32fd-49af-a79f-8c5ccf611b85.jpeg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/chex2_2048x_625046f5-abfa-46f7-bac5-b4de360e221d.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/nikita-belov-716612-unsplash_2048x_03dd951b-4f18-4505-b289-1f2e02c38805.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/tee_2048x_12f86f45-2547-4b51-88bd-8928d426c01f.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/blazer2_2048x_6c2f0c0a-657f-499f-9aca-20b118111e2d.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/dots_2048x_64401a72-a732-4708-922f-3eb331f63176.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/cbd-invisible-derma-1.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/cbd-invisible-derma-3.jpg?v=1590698598"
      alt="Image"
      title="About this image"
    />
  </div>
  <div class="album">
    <img
      class="album__artwork"
      src="https://cdn.shopify.com/s/files/1/2018/8867/files/earrings_2048x_2ae57140-070b-450e-8960-7885228be10d.jpg"
      alt="Image"
      title="About this image"
    />
  </div>
</div>
<div class="call-to-action"><a href="#" class="btn">Learn More</a></div>

sample image code block

  <div class="album">
    <img
      class="album__artwork"
      src=""
      alt="Image"
      title=""
    />
  </div>

theme.js

/* -- code for image gallery pop-up -- */
// add to the very bottom of theme's javascript file
$(document).ready(function() {
  $('img.album__artwork').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' title='" + currentImage.attr("title") + "' href='" + currentImage.attr("src") + "'</a>");
  });

  $('.image-link').magnificPopup({
      type: 'image',  
      verticalFit: true, // Fits image in area vertically
      titleSrc: function(item) {
        return item.el.attr('title');
      },    
      gallery: {
        enabled: true, 
        preload: [0,2],
        navigateByImgClick: true,
        arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
        tPrev: 'Previous (Left arrow key)', 
        tNext: 'Next (Right arrow key)', 
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>',
        showCloseBtn: true
      },
      overflowY: 'hidden'
  });  
});
/* - end - */

theme.scss.liquid

/* Photo Gallery CSS styles --- Starts here */

.template-page .albums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: minmax(100px, 1fr);  
    grid-gap: 20px
}

.template-page .album img {
/* use for round circle image effect */
/*     border-radius: 100vh;
    border: 1px solid #333; */
}

.template-page .album__artwork {
  object-fit: cover;
  width: 100%;
  height: 100%; 

}

.template-page .call-to-action {
    animation-name: delay;
    display:grid;
    justify-content:center;
    align-items:center;
    grid-template-rows: 120px;
    animation-duration: 4.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;  
}

/* @keyframes delay {
    0% {
      opacity: 0;
    }
    50% {
      opactiy: 0.5;
    }
    100% {
      opacity: 1;
    }
}
 */
.template-page .mfp-content {
  max-width: 80vmin !important; 
}

.mfp-figure figure { overflow-y: auto !important;}

@media (min-width: 800px) {

  .template-page .albums {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  
  .template-page .mfp-content {
    max-width: 60vmin !important; 

  }  

  .template-page .call-to-action {
      align-items:end;
  }
}


/* Photo Gallery CSS styles --- Ends here */