Masonry (cascading) layout in lightbox

Bootstrap Studio Help
1

I'm using the standard 'Lightbox Gallery' block but have run into display problems as the thumbnails are a mix of portrait and landscape orientation so the rows show spaces underneath the landscape orientated thumbnails.

I have seen several lightboxes with a 'masonry' or 'cascading' layout in which thumbnails are moved up to fill those spaces. Is it possible to modify 'Lightbox Gallery' to do this? Is there another component available to BSS which already does this?

The Cascading option at https://nanogallery2.nanostudio.org/demonstration.html demonstrates the layout that I would like to achieve.

2

same as me. I would like to have masonry into bootstrapstudio project

3

I don't know if there's any component already built that does that, but nothing stops you from using external components within BSS. It can sometimes take a bit of finagling to find the best way for it all to work, but it's doable and not usually too difficult to work out. Just thought I'd throw that out there in case you 2 were thinking you couldn't use other components if they weren't inside BSS.

The hardest part of course is that you have to do most of these things as Custom Code blocks, unless you have the patience to build them from scratch within the program to mimic the originals of course. :)

4

Joe you have absolutely right... I was looking to simple solution just drag and drop elements to be much faster in building websites. BSS is growing really well and now I was playng with this fabulous software and enjoys all the staff he have. Ty for reply and hope we can help each other in this forumb this is the 3rd time I wrote in the last 3 years ahahahahahha

5

https://masonry.desandro.com/#install this is the page about masonry were there are a lot of example and how to. Hope could help

6

Thanks for the link @saldefede. Looking at that site, this setup would be extremely easy to use with Bootstrap Studio. All of the JS could be imported, the initializer JS could be set up as a new custom JS file (I tend to just name mine custom.js or something simple like that so I know which are mine). No need to add anything to the HEAD of the site for the links to the js as once you import those 2 files, it will automatically do that for you and all you'll need to do is rearrange the files in the file list if needed.

Then create the HTML part manually so you can edit it within BSS with it not being a custom code box. You can also add it as a custom code box if you want to, whatever way works best for you. Personally I would do a custom code box for one major reason ... if you decide at some point to change names/tags/classes/etc. of a lot of the images, it's easier to do find and replace in Custom Code than it is with the drag and drop because you can do multiple at a time in Custom Code and in Drag and Drop everything is one by one. Just my preference, but easily done either way.

Very simple setup, easily used in BSS, go for it and let us know how it goes! :)

7

Jo I would like to be like, you full of entusiasm and tech speaker, but Im only copy and paste ahahahahahhaha I will try anyway, is a promise to myself, I need to be more confident with code and less dependant to the ready to use plugin. Ty again Jo (the info you gave me are really important)