[Yaroslav]

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!

[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

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[Yaroslav]

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?

[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.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[Yaroslav]

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

[Bob]

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

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[endingmirage]

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!

[Bob]

endingmirage 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

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[endingmirage]

Bob wrote:

endingmirage 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

[Author]

Posts