Display issues with images from Google\Cloudinary in Masonry

[Heather_Mann]

It seems there’s a bit of a glitch loading images from Google\Cloudinary with anything else in a masonry.

This works perfectly with just the image…

But if I try to add a lightbox like this…

This happens…

I thought it might be the lightbox so I removed that and just added some text and it went even more whacky so it’s not the lightbox.

If I put the image in just a generic div it fixes the problem as long as class=“img-fluid” or width=“100%” is set on the photos

Cloudinary pictures are even worse. They overlap all over the place and only width=“100%” works.

To summarize: Google Photos need either class=“img-fluid” or width=“100%” to work whereas the Cloudinary only work with width=“100%” and both need to be within a div.

Not urgent for me as I have it working now but probably needs a fix.

[ben]

Have you tried:

row > col > card > image

Then select the row and Make Masonry

[Heather_Mann]

Yeah - that works, but card is just another type of div so really doesn’t change the issue I don’t think?

[ben]

Have a look at this documentation

[Heather_Mann]

Hey Ben - Sorry but not sure what your point is. Shouldn’t the masonry work without having to use a card or other div? It’s not a big deal as I figured out how to make it work but IMHO it should just work out of the box.

[ben]

You are right. The catch is that a card resizes the image automatically without having to worry about .img-fluid or .w100.

I guess it is a matter of choice.

[Heather_Mann]

Fair enough. I’ve actually used cards in masonrties every other time I’ve done them before because of the nature of the info I was using. Just this time I only wanted the image with lightbox and ran across this issue. I guess even if it doesn’t get fixed soon at least this thread is here if someone else has the same issue.