Sign in

How to modify PhotoSwipe gallery grid to masonry?

  • This topic has 8 replies, 3 voices, and was last updated 10 months, 1 week ago by .
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #5024
    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!

    #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

    --
    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!

    #5027
    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?

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

    --
    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!

    #5029
    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

    #5030
    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!

    #5070
    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.com/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!

    #5073
    Bob

    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!

    #5074
    endingmirage

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.