BSS noob here, Is there a way I can setup gallery of images like in this pic where all the images are positioned in such a way to take up empty space. I am fine for the bottom to be messy as this will be on the near bottom of the page. I have tried a Lightbox gallery but I can’t seem to find an option to have them pack like this. I also do want the lightbox functionality to allow the users to click the image to full screen and maybe have an additional button for a full article or page if there is more content about the image.
Yes, this would be the way to do it natively in BSS.
Is there a way to do it natively with the Bootstrap Framework, which is what I think you mean. Unfortunately not, bootstraps grid system doesn’t allow for it unless you orent and add the images yourself in a fixed layout. This might be fine unless you want them to dynamically create a masonary layout.
Sorry, I meant that. I will keep that in mind. I am still pretty new to BSS and still learning about padding, Spacing and how to force things to go where I actually want them to go (which is not always easy)
Look in the online library for my component called Ultimate Masonry Testimonials. It’s kind of old, but I think it should still be able to work in the latest version of BSS. It’s a Bootstrap 5 component. If you add it to your library and put it on your page, it should automatically install the necessary Javascript and CSS needed.
You will see the columns each contain two divs. You can delete these divs and replace them with the Image component. Then put in your images (make sure you check “Responsive” in the Options > Image Options settings) and then preview your page (Note: you will not see the images layout in a “masonry” format in the BSS workspace. Because the masonry library is Javascript it only renders in a live browser).
When you preview, you should see your images all laid out in a masonry grid. You can then use the Row options on the parent row to set your gutters (to give the desired horizontal and vertical spacing. You can add more columns, or remove columns, or change the column widths if you want to stagger the layout.
