We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

How to modify PhotoSwipe gallery grid to masonry?

January 15, 2021 at 8:51 am #5024

[anonymous]

Hello friends! Publii is using PhotoSwipe and it is great. But the gallery grid is old style. Today a lot of people want to see masonry.

I know that WordPress has plugin for PhotoSwipe Masonry. I know that Publii is better than WP, so the question “How to modify PhotoSwipe gallery grid to masonry?”. I am not asking for plugin, I just need help to understand how to modify code in order to recieve
masonry grid when making gallery in post.

Thank you for your help and great product!

January 15, 2021 at 9:01 am #5025

Bob

The all-knowing CSS solutions do not work as it should, the upcoming native masonry support for grid layout is promising but right now with very poor browser support.

So, you should consider implementing a masonry script e,g, https://masonry.desandro.com/
A list of all CSC classes generated by the Publii gallery will also be helpful and can be found here: https://getpublii.com/dev/default-publii-classes-for-using-with-css/#gallery

January 15, 2021 at 11:09 am #5027
[anonymous]
Can you help me to understand what am I doing wrong?

1. I went to documents>Publii>sites>my-site>input>themes>simple>partials>footer.hbs

added masonry CDN
```
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script defer src="{{js "scripts.min.js"}}"></script>
```
2. I went to documents>Publii>sites>my-site>input>themes>simple>assets>js>script.js

added initialization, using our classes
```
var elem = document.querySelector(".gallery");
var msnry = new Masonry(elem, {
  // options
  itemSelector: ".gallery__item",
  columnWidth: 200,
});
```
3. deleted from css file .gallery and .gallery__item code.

I checked that CDN file is shown when previewing page, but nothings is happening. What am I doing wrong?
January 15, 2021 at 11:16 am #5028

Bob

Our support doesn’t include custom development or customization. If you need some extra features or elements in our themes, feel free to contact us via https://getpublii.com/customization-service/ page or wait, maybe someone from our community can help you.

January 15, 2021 at 11:21 am #5029

[anonymous]

I understood you Bob. I just saw topic with pagination where you was helping to add pagination. So I dediced that this is correct to write about this here. Thank you for your help

January 15, 2021 at 11:24 am #5030

Bob

your example requires some more work, like additional CSS rules etc…

January 26, 2021 at 10:53 pm #5070

[anonymous]

Hi, everyone

Don’t want to create a new thread, asking here. Is there a way to make landscape photos in galleries not being cut from left and right, and make them stay as originals, like in N-Tech theme here https://demo.getpublii.eu/themes/ntech/1/gallery/

I use Mercury theme, and it is so frustrating seeing my photos being cut like that. I tried to search files related to photoswipe, but haven’t found anything helpful. I’m no coder, but still trying to understand how things work. Thanks for any help

And I need to say this, thanks to developers of Publii, trying to make a jump from dead Koken CMS to Publii, and it is going well so far, thanks to understandable documentation and easy to use app. Great work!

January 27, 2021 at 10:19 am #5073
Bob
[anonymous] wrote:

I use Mercury theme, and it is so frustrating seeing my photos being cut like that.

The images are stretched to fill the box maintaining their aspect ratio; sometimes it may look like your images have been cut off.
You can change that by adding the following CSS rule via the Custom CSS tool:
```
.gallery__item img {
    object-fit: contain;
}
```
Feel free to change the object-fit value to fit your requirements: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
January 27, 2021 at 1:18 pm #5074

[anonymous]

[anonymous] wrote:

[anonymous] wrote:

I use Mercury theme, and it is so frustrating seeing my photos being cut like that.

The images are stretched to fill the box maintaining their aspect ratio; sometimes it may look like your images have been cut off.

You can change that by adding to the following CSS rule via the Custom CSS tool:

<span class=”enlighter-x11″>.gallery__item</span> <span class=”enlighter-x16″>img</span> <span class=”enlighter-g1″>{</span>

<span class=”enlighter-x12″>object-fit</span><span class=”enlighter-text”>: contain;</span>

<span class=”enlighter-g1″>}</span>

.gallery__item img { object-fit: contain; }

.gallery__item img { object-fit: contain; } Feel free to change the object-fit value to fit your requirements: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Thanks for you help, played with these, but it seems to show pictures properly I need to adjust how boxes themselves are being generated, oh well