How do I create a photo gallery (grid, mosaic, or masonry)?

Step 1: Add the Gallery block

Click on the plus sign in a column, search for gallery, and choose the Gallery block. Usually, you place a gallery in a section with one wide column.

Step 2: Choose or upload the photos

Click on the button in the Gallery field to add images. Select multiple photos at once by holding down Ctrl (Windows) or Cmd (Mac), or upload new ones. You can adjust the order by dragging the photos.

Step 3: Choose the number of Photos per row

In Photos per row, you choose 1, 2, 3, 4 (default) or 6. On a tablet or phone, it will automatically show fewer columns.

Step 4: Choose the Display

Grid

Grid (default) displays all photos equally sized in a grid. Calm and clear, ideal if your photos have the same aspect ratio.

Mosaic (and your own pattern)

Mosaic creates a square grid where some photos are wide or tall. This gives a playful, magazine-like appearance. Leave Mosaic pattern empty for the default pattern. Want to define it yourself? Each letter represents one photo:

• 1 = square
• w = wide (two boxes next to each other)
• t = tall (two boxes on top of each other)
• b = large (both wide and tall)

Separate the letters with commas, for example t,1,w,w,1. The sequence will repeat across all photos. Start with a tall photo (t), so there are no gaps. On tablet and phone, a mosaic automatically becomes a simple grid of two columns.

Masonry

Masonry places your photos in columns with their own aspect ratio: nothing gets cropped. The bottom is therefore ragged, like on Pinterest. Choose masonry if you have both portrait and landscape photos mixed together: in a grid, that quickly looks messy.

Maximum number of photos to display

Do you have many photos but only want to show a few? Enter a number in Maximum number of photos to display. For example, if you upload 12 photos and enter 4, the gallery will randomly select 4 photos from the 12. Leave the field empty to display all photos.

Preview image size

In Preview image size, choose which version of the photo appears in the gallery. For a gallery with 3 or 4 photos per row, Medium large (768 pixels) is often sufficient. The lightbox always displays the full photo.

Title and captions in the lightbox

Enable Show title and captions, then the lightbox will show the Title and the Alternative text from the media library under the enlarged photo. So fill those in properly first, see filling in a good alt text.

Do you want a photo to not open the lightbox but link to another page? You set that in the photo itself: see making a photo clickable in the gallery.

Prefer photos that come up one after the other? Then use the image slider. For a row of logos, see a row with logos from customers or partners.

Having trouble?

• The photos keep changing. You have filled in Maximum number of photos displayed. Clear the field to show all photos.
• There are gaps in my mosaic. Start the pattern with a t, or leave Mosaic pattern empty for the default pattern.
• My mosaic is a regular grid on mobile. That’s correct: on tablet and phone, it automatically becomes two columns.
• A photo does not open a lightbox. That photo has a link in the media library. Remove the link if you want the lightbox.
• The gallery loads slowly. Choose a smaller Preview image size and upload photos of a maximum of 1200 pixels, see uploading images in the correct format.

Can’t figure it out? Contact us.

Frequently asked questions