Publii - Photoswipe Masonry

Masonry-Photoswipe-Publii.md

This is an explanation of how to achieve a Masonry gallery effect for Photoswipe galleries in Publii, in response to the forum post "Why a masonry layout for front pages, e.g. Mercury, but not for the galleries ?"

Credit: Yaroslav Khvorostyanenko - "Masonry gallery for Publii static CMS" and https://koolkat.photography/

Instructions

Go to your site folder > input > themes > [theme name] > css and edit the main.css file in the text editor of your choice.

Comment out (/*like this*/) or delete all the lines of code related to the gallery. These lines should be near the end of the file, around line 2,312. Next, paste the following code:

.gallery {
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 -webkit-column-gap:0;
 -moz-column-gap:0;
 column-gap:0;
 position:relative;
 margin:calc(1.7rem + 1vw) -.2833333333rem
}
@media all and (min-width:20em) {
 .gallery {
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  /*! display: flex; */
 }
}
@media all and (min-width:56.25em) {
  .gallery-wrapper--wide {
    display:flex;
    justify-content:center;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%)
  }
  .gallery-wrapper--wide .gallery {
    padding:0 var(--page-margin);
    max-width:var(--page-width)
  }
}
@media all and (min-width:20em) {
 .gallery[data-columns="1"] {
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1
 }
}
@media all and (min-width:30em) {
 .gallery[data-columns="2"] {
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2
 }
}
@media all and (min-width:37.5em) {
 .gallery[data-columns="3"] {
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3
 }
}
@media all and (min-width:56.25em) {
 .gallery[data-columns="4"] {
  -webkit-column-count:4;
  -moz-column-count:4;
  column-count:4
 }
}
@media all and (min-width:56.25em) {
 .gallery[data-columns="5"] {
  -webkit-column-count:5;
  -moz-column-count:5;
  column-count:5
 }
}
.gallery__item {
 margin:0;
 padding:.5rem;
 position:relative
}
@media all and (min-width:20em) {
 .gallery__item {
  -webkit-box-flex:1;
  -ms-flex:1 0 50%;
  flex:1 0 50%
 }
}
@media all and (min-width:30em) {
 .gallery__item {
  -webkit-box-flex:1;
  -ms-flex:1 0 33.333%;
  flex:1 0 33.333%
 }
}
@media all and (min-width:37.5em) {
 .gallery__item {
  -webkit-box-flex:1;
  -ms-flex:1 0 25%;
  flex:1 0 25%
 }
}
.gallery__item a {
 display:block;
 height:100%;
 width:100%
}
.gallery__item a::after {
 background:-webkit-gradient(linear,left bottom,left top,from(rgba(42,46,48,.4)),to(rgba(0,0,0,0)));
 background:-webkit-linear-gradient(bottom,rgba(42,46,48,.4) 0,rgba(0,0,0,0) 100%);
 background:-o-linear-gradient(bottom,rgba(42,46,48,.4) 0,rgba(0,0,0,0) 100%);
 background:linear-gradient(bottom,rgba(42,46,48,.4) 0,rgba(0,0,0,0) 100%);
 bottom:.5rem;
 content:"";
 display:block;
 opacity:0;
 left:.5rem;
 height:calc(100% - 1rem);
 position:absolute;
 right:.5rem;
 top:.5rem;
 width:calc(100% - 1rem)
}
.gallery__item a:hover::after {
 opacity:1
}
.gallery__item img {
 display:block;
 height:100%;
 -o-object-fit:cover;
 object-fit:cover;
 width:100%
}
.gallery__item figcaption {
 bottom:1.2rem;
 color:#fff;
 left:50%;
 opacity:0;
 position:absolute;
 text-align:center;
 -webkit-transform:translate(-50%,1.2rem);
 -ms-transform:translate(-50%,1.2rem);
 transform:translate(-50%,1.2rem);
 -webkit-transition:all .24s ease-out;
 -o-transition:all .24s ease-out;
 transition:all .24s ease-out
}
.gallery__item:hover figcaption {
 opacity:1;
 -webkit-transform:translate(-50%,0);
 -ms-transform:translate(-50%,0);
 transform:translate(-50%,0)
}

To preserve your changes after updating a theme file, consider using theme overrides.