Masonry Images

[searchin]

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?

[SeaTheme]

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

[searchin]

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.

[SeaTheme]

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

[searchin]

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

[Author]

Posts