Skip to main content
MaxAI Docs

Photo galleries

Add a gallery of photos to any page as a grid, a masonry wall or a carousel, each photo opening full size, and manage the photos yourself in Edit mode.

A Photo Gallery is a platform widget: a set of photos shown as a grid, a masonry wall or a carousel, each one opening full size in a viewer with arrows, a caption and keyboard control. The gallery is drawn and kept working by the platform, so you never edit its code; you choose the photos and the look.

Three ways, with the same result:

  • In Edit mode, click one of the + pills between sections, and pick Photo Gallery from the Widgets group. The gallery arrives empty, with a list of its own for the photos you add. Until it has a photo it shows a dashed No photos yet. box in Edit mode only; visitors, and Preview mode, see nothing there.
  • Turn photos you already have into a gallery. A page copied from an older website, or built before galleries existed, often shows its pictures as a plain row or grid that opens each one as a bare image file. In Edit mode, select that section, open its menu (the ⋯ button on the toolbar, or a right-click) and choose Turn photos into a gallery under Widgets. The pictures become a gallery showing the same photos in the same order and place — the heading, the text, a main picture, a form, the layout around them: all of it stays — and the section's panel then shows the gallery's photos and options beside the section's own. It is instant when the platform can read where the pictures are; otherwise Max does it, held to the same rule that no word of the section goes missing. The item is disabled, with a note saying why, on a section with fewer than two photos or one that is a gallery already. See Turning a section into a widget.
  • Ask Max — "add a gallery of our work below the hero", or "turn the photos on the Kitchens page into a gallery". Max places the widget and, where the page already has the pictures, points the gallery at them.

Every gallery added in Edit mode keeps its own photos, so a gallery of kitchens and a gallery of bathrooms never mix. A converted section keeps reading the pictures from wherever they came from: a room's photos stay the room's, so a gallery on every room's page shows that room alone — and its panel lists that room's photos alone, with a line under Photos naming the album. A photo you add there joins the room; the other rooms' photos are never touched. The whole shared collection is in the Content place.

Choosing the photos

Click the gallery in Edit mode. The panel on the right shows the gallery's Photos list, each row named by its title — or, until it has one, by its caption, its alt text, or the picture's file name:

  • Add photo opens your media library — pick a photo you have uploaded, or upload one there and then.
  • Each photo carries Alt text (what the photo shows, for people who cannot see it and for search engines), a Title and a Caption (shown under or over the photo when captions are on, and in the viewer), a Link (the photo then opens that address instead of the viewer) and an Album (see below).
  • Drag the handle, or use Move up and Move down, to put the photos in order. Remove takes one out; the file stays in your media library.

You can also click a photo on the page itself to replace it, exactly as with any other picture in Edit mode.

Choosing the look

The same panel holds the gallery's settings. Changes show on the page as you make them and are kept when you press Save.

Setting What it does
Template Grid — equal tiles in rows. Masonry — columns of photos at their natural heights, for mixed shapes. Carousel — one row that slides, with arrows.
Heading A title above the gallery. Leave it empty for none.
Columns How many photos across, from one to six. Phones show at most two.
Spacing The gap between photos.
Photo shape Square, landscape, wide, portrait, or as taken (Grid and Carousel).
Corners Square to very rounded.
Captions Hidden, below each photo, over the photo, or only on hover.
Hover effect Zoom, lift, fade, or none.
Open photos full size Off, and a click opens the photo as a plain image instead of the viewer.
Slide on its own A carousel moves to the next photos every few seconds, pausing while a visitor hovers or focuses it.
Show only album Shows just the photos whose Album matches — see below.

The box around the gallery sits under Layout at the bottom of the panel, closed until you open it, because it is usually set once:

Setting What it does
Width Full width, or a cap from wide (80rem) to narrow (48rem); a narrower gallery is centred in the page.
Padding Space inside the gallery's edges, from none to 80 pixels.
Background A colour behind the photos. Leave it empty for none.

One set of photos, many galleries

A gallery can also read a collection your website already has — the list behind a properties page, a menu, a portfolio. Max sets this up when it builds the page: a rental website with one unit_photos collection, for example, gets a gallery on every unit's page showing only that unit's photos, using each photo's Album to tell them apart. Add a photo to the collection in Content and it appears in the right gallery.

Such a gallery's photos are edited in Content rather than on the gallery, because the list belongs to the whole website. The panel says where the photos live under the list's name.

For visitors

  • A click opens the photo full size over the page. The arrows, the left and right keys or a swipe move through the gallery; Escape, the × or a tap outside closes it and returns to the photo that was opened. The viewer announces the caption and the position ("3 / 12").
  • Thumbnails load as the page is scrolled, and the full-size image loads only when it is opened, so a large gallery stays quick.
  • Without JavaScript the grid still shows, and each photo opens as a plain image.
  • The gallery honours a visitor's reduced-motion setting: no zooms, no sliding.

Next