How to do this grid with images?

Webdesign Help
1

Hello, I’m wondering if is possible to arrange my pictures in this way (look attachment)

image
image266×791 67.7 KB

2

try to use masonry grid, it’s good enough with bootstrap

1 Like
3

Go to the online library and search for my component Ultimate Masonry Testimonials. Install it. Then go into each one of the columns and delete the two divs. Drop an Image component into each of the columns. Add mb-4 class to every image, delete all the unnecessary CSS, and you’ll have your masonry image gallery.

3 Likes
4

Maybe it’s a silly question, but where to add the mb-4 class to every image?

5

I’m not sure if I did it right but I place it in this way.

image
image1399×820 104 KB

6

I think you’re right because now it works for mee, too.

Thank you!

7

You add it as shown in @blackmart’s screen shot. Via the Attributes panel > Class Names.

8

Is it possible that when you click on an image that it open for example in a lightbox (like in the gallery)?

9

There absolutely is, and @kuligaposten created an example that did exactly this on this post…

But now, there appears to be a ping-pong game at the link he posted. I’d reach out to him and ask if he could possibly put the example back up for you to look at. I’m not exactly sure how he did it. I could probably modify my component to do what you want, but I’m up to my ears in work for clients right now, so it wouldn’t be something I could do right away.

10

Set Up for Lightbox Galleries in a Masonry Layout

Link External JS:

  • https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js
  • https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js

Add the following to a JavaScript file:

document.addEventListener('DOMContentLoaded', () => {
  const photoGrids = document.querySelectorAll('.photos');
  photoGrids.forEach((photoGrid) => {
    const photoItems = new Masonry(photoGrid, {
      percentPosition: true,
    });
    imagesLoaded(photoGrid).on('progress', () => photoItems.layout());
  });
});

Every Lightbox gallery you place on the page will be displayed in a masonry grid, with the Baguette Lightbox handling the lightbox functionality.

11

Great, now I’m stuck playing Pong :crazy_face:

12

@printninja

Thank you for informing @kuligaposten, and thank you for the code. :+1:

The ping pong game is great. :wink: