Masonry gallery to lightbox issue

I’m not sure if this is a limitation but:

I have a masonry gallery with all the images sized to 1500x1000, however the portrait images are correctly sized when in the lightbox (frameless option) (ie. large) but the landscape images seem to be restricted (ie. small) - I’ve no custom classes on the images or the masonry brick.

When you say the landscape ones are small do you mean less tall than the portrait ones or just really small? It could be that your browser is not wide enough and this is causing the image to be reduced.

Hi Flashman,
masonry.bloc (3.0 MB)

typical problem attached - the landscape images are substantially smaller in the lightbox than the portrait ones

OK I see what is happening, the height is allowed to go as short or tall as needed, whereas the width is fixed and if you flick between the vertical and horizontal images you will see they are all confined to same width. I think you may want to set a fixed width on all images e.g 1000 pixels and let the height sort itself out.

I’d like them all large unfortunately!!

You might be better off with an alternative gallery. There is a gallery in the new Volt CMS that may suit you or Swiper. If you look around the internet there are lots of gallery style solutions and some are free. I haven’t used these but you could look at https://pixieset.com/ or https://imageslidermaker.com/.

2 Likes

surely this is a bug in blocs?
If the landscape modal window is being restricted in the frameless option, I had hoped there was some code I could add to override it?
Landscape Image seems to be larger when I choose full screen lightbox option.

@Norm would be best placed to answer why it works this way and if there is a workaround to do what you want.

I think what happens is that the Javascript overrides the CSS. You can edit the CSS to make it work in the browser tools, but apply the CSS to the project fails.

@fabrica I don’t think it’s a bug, it’s just the different types of Lightbox choices all act differently. I’ve experimented a lot with displaying masonry blocs. I think each type has its strengths and weakness. Is there one that’s just perfect? I don’t think so. I also like big images and I like the “Full Screen” option. The problem is the portrait images extend too far below the users viewing area and you have to scroll down to see the whole image.

My solution is I ended up using smaller images. I use landscape images at 1200 px long edge and portrait images at 800 px long edge. Set the Lightbox to full screen and then when you click on the images the landscape photos are a nice size (with some extra screen on each side) and the portrait images fill the screen and you don’t have to scroll. I don’t think this is perfect, but for me it’s the best for displaying a Masonry Lightbox gallery.

Here’s an example of a full-screen masonry Lightbox on my blog. You could also set the bloc not to be full screen and it would scale.
https://itsmytimephotography.com/12-30-19.html

Hope this helps.
Casey

looks great Casey!
I went with the full screen lighbox in the end , but I do have the scrolling issue now, will resize the images when I get a chance.
Having moved from RW to Blocs on my website (www.fabricaarchitects.com) , I do think Blocs needs some more gallery/lightbox options for future releases.

Glad I could help. Another problem is the Lightbox padding and margin look a little different on Safari and Chrome. Nothings ever easy! :grinning:

Casey