Skip to content

Instantly share code, notes, and snippets.

@candidexmedia

candidexmedia/Masonry-Photoswipe-Publii.md

Last active January 6, 2026 20:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save candidexmedia/374a7ae87cc4d2fbc622ca3a50773106 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save candidexmedia/374a7ae87cc4d2fbc622ca3a50773106 to your computer and use it in GitHub Desktop.
Download ZIP
Publii - Photoswipe Masonry
Raw
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 www.koolkatphotography.com

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.

Found these tips helpful? Consider supporting my work so that I can keep going. 😊

Buy Me a Coffee at ko-fi.com

@candidexmedia
Copy link
Copy Markdown
Author

candidexmedia commented Jul 9, 2025

Another solution by @radialmonster:

In the Publii GUI, paste the following in Tools & Plugins > Custom CSS:

/* ----- Masonry Layout: 2 Columns on Desktop ----- */
/* Set the gallery to have exactly 2 columns with consistent spacing */
.gallery-wrapper--full .gallery {
  column-count: 2 !important;        /* Force exactly 2 columns */
  column-width: auto !important;     /* Allow column width to adjust automatically */
  column-gap: 1.5rem !important;     /* Set space between columns */
  display: block !important;         /* Ensure proper block layout for column-count */
  width: 100% !important;            /* Allow gallery to use full container width */
  max-width: none !important;        /* Remove max width restriction */
}

/* ----- Gallery Item Layout ----- */
/* Prevent column breaks inside items and ensure they fit neatly in each column */
.gallery__item {
  width: 100% !important;            /* Make item take full column width */
  break-inside: avoid !important;    /* Prevent item from breaking across columns */
  margin: 0 0 1.5rem 0 !important;   /* Space below each image */
  display: block !important;         /* Block layout for stacking */
  padding: 0 !important;             /* Remove any internal padding */
}

/* ----- Gallery Image Reset ----- */
/* Ensure images fill their container without distortion or extra spacing */
.gallery__item img {
  width: 100% !important;            /* Stretch image to fill container width */
  height: auto !important;           /* Keep original aspect ratio */
  display: block !important;         /* Prevent inline spacing below image */
  margin: 0 !important;              /* Remove margin */
  padding: 0 !important;             /* Remove padding */
  border: none !important;           /* Remove default borders if any */
  background: none !important;       /* Clear any background styles */
}

/* ----- Gallery Remove Hover Overlay ----- */
/* Disable the dark overlay or visual effect on hover */
.gallery__item a::after {
  content: none !important;          /* Remove pseudo-element content */
  display: none !important;          /* Hide the overlay entirely */
}

/* ----- Gallery Responsive Layout: 1 Column on Mobile ----- */
@media (max-width: 768px) {
  .gallery-wrapper--full .gallery {
    column-count: 1 !important;      /* Stack all items in a single column on small screens */
  }
}

@michaelfluegge
Copy link
Copy Markdown

michaelfluegge commented Oct 23, 2025

it's https://koolkat.photography.com/ not just https://koolkat.photography/

@candidexmedia
Copy link
Copy Markdown
Author

candidexmedia commented Oct 24, 2025

@michaelfluegge I can fix the URL, but neither of the links you've shared seem to work on my end...

@michaelfluegge
Copy link
Copy Markdown

michaelfluegge commented Oct 25, 2025

blame it on me :-( . It is https://www.koolkatphotography.com without the dot in the middle

@michaelfluegge
Copy link
Copy Markdown

michaelfluegge commented Oct 25, 2025

but the site changed heavily since the last visit a year ago or so

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment