Skip to main content
A Photo Gallery shows your photos as a grid of square tiles. A visitor can click any photo to see it full size, and step through the whole gallery from there. A gallery holds up to 200 photos, and shows them a page at a time.
A Photo Gallery of six square photos in two rows of three, with Previous, 1, 2 and Next buttons below

A gallery of eight photos, six to a page

1

Open the page in Edit Mode

Turn on Edit Mode and go to the page.
2

Add the gallery

Select the page’s Main Section, then tap Photo Gallery in the Element Library. Press Save Elements. See Adding, moving, and removing elements.
3

Open the gallery's editor

Click Photo Gallery in the list of elements to open its editor, then add your photos.
You can also add a gallery inside a column of a Two Columns element. Until it has a photo, the gallery doesn’t appear on your website.

​
Adding photos

To add several photos at once, drop them onto Drop photos here, or browse, or click it to choose them. Each photo is added to the end of the gallery, and the list below shows Uploading… and then Added beside each file. JPEG, PNG, GIF, WebP, HEIC and AVIF photos are accepted, and large photos are resized automatically. A gallery holds at most 200 photos. If you add more than there is room for, GroupFlow adds as many as fit and tells you how many were left out. To add one photo at a time, press Add Photo at the bottom of the list, choose the image, and press Save. See Choosing an image.

​
Arranging photos and setting alt text

The Photo Gallery editor in the Edit Mode sidebar, listing photos with a drag handle, a Detail button and a menu beside each

The Photo Gallery editor, with the gallery's photos listed below its settings

The gallery’s editor lists its photos in order:
  • Reorder — Drag a photo by its handle to a new place in the list.
  • Set the alt text — Press Detail beside a photo, enter its Alt text, and press Save. Alt text is a short description of the photo, which screen readers read aloud to people who can’t see it. Give every photo alt text.
  • Delete — Open the photo’s menu and choose Delete Photo.

​
Columns and spacing

The Photo Gallery editor's Columns, Spacing between photos and Pages sections, beside the gallery on the page

The Columns, Spacing between photos and Pages settings, open

Each setting is in its own section of the editor. Click the section’s name to open it, and press its save button to apply it.
  • Columns — Columns on desktop, from 1 to 6 (3 to start with), and Columns on mobile, from 1 to 3 (2 to start with). Press Save Columns.
  • Spacing between photos — The gap between the photos: a size from 0 to 128 pixels, or Default. Choose Desktop or Mobile under Screen size to set each one; on Mobile, Same as desktop reuses the desktop gap. Press Save Spacing Between Photos.
  • Spacing — The room around the whole gallery. See Spacing.

​
Pages and the full-size view

Pages sets Photos per page, from 6 to 200. A new gallery shows 24 photos to a page. Press Save Pages. When a gallery has more photos than fit on one page, visitors see numbered page buttons below it, with Previous and Next. A gallery with no more photos than Photos per page shows them all, with no page buttons. Clicking a photo opens it full size, over the page.
A photo shown full size over the page, with previous and next arrows, a close button, and 1 / 8 below it

A photo opened full size, showing its place in the gallery

  • The arrows on each side, the left and right arrow keys, or a swipe on a phone, step to the previous or next photo. They step through every photo in the gallery, not only the ones on the current page, and go from the last photo back to the first.
  • The count below the photo, such as 1 / 8, shows where it is in the gallery.
  • When the visitor closes the photo, the gallery shows the page holding the last photo they looked at.