Home Forums Art HTML Theme Masonry Images

This topic contains 4 replies, has 2 voices, and was last updated by  searchin 1 month, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18502

    searchin
    Participant
    Purchased
    Supported

    Hi,
    I am currently using portfolio-grid-03-masonry-grid.html on my website http://www.melissabattersby.com/
    I would like masonry to dynamically use the dimensions of my images instead of the fixed grid that currently cuts the image off.
    How do I modify the html to accomplish this?

    #18505

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    The Masonry Grid will always crop images. It will not crop with this style CSS:

    .grid-stack .ux-lazyload-wrap { 
        background-color: transparent;
    }
    .grid-stack .ux-background-img { 
        -webkit-background-size: contain;
        background-size: contain;
    }

    But there will be blank spacing.

    I suggest you redefine each grid size/ratio refer Elements > Masonry Grid of DOC. If the image size is square, the grid should be square.

    Regards

    #18507

    searchin
    Participant
    Purchased
    Supported

    Thank you. The thing I don’t like though is having to specify the data-gs-x, data-gs-y,data-gs-width and data-gs-height values. The template is being used in an art gallery so the images change constantly. Is there something I can do to have masonry / isotope auto calculate + position the grid items?

    Ideally, I would just like to wrap a set of images in generic grid-items and have masonry / isotope automagically size and position my content as to not crop anything out.

    #18515

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    There is no other way for Masonry Grid.
    Or you could use this template(click to download)

    You still set each grid size by padding top.

    The padding-top percentage value of brick-content wrap is the thumbnail image origin size (height / width) * 100
    data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 is a blank image, it equals img/blank.gif

    Regards

    #18517

    searchin
    Participant
    Purchased
    Supported

    Thank you. I found my solution. I used CSS Masonry.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!