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/
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.
Found these tips helpful? Consider supporting my work so that I can keep going. 😊