Gallery section
The Gallery section shows a grid of images with captions and links in Kingdom, which can enlarge single images and turn into a slider on mobile.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Gallery section shows a grid of images, each with an optional caption and link. Single images can take a double size, customers can open a larger view, and the grid can turn into a slider on phones.
Where to find it: select Add section in the theme editor, then choose Gallery (Add section category Media & galleries).
Adding images
- Select Add block → Image for each picture. The section holds up to 99 images.
- Image sets the picture. Caption shows a short text under it and is also its alt text for screen readers.
- Link makes the image clickable; Open link in a new window opens the link in a new browser tab.
- Enlarge image in grid makes the image twice as wide and twice as tall as the others, the space of four images.
- Images aspect ratio sets one shape for every image: Short (4:3), Square (1:1, the default), Tall (5:6) or Taller (2:3). Images are cropped to that shape.
The grid has four columns on wide screens and two columns on phones and on small laptops (949 to 1174 px wide).
Mobile slider and lightbox
- Turn gallery into a slider on mobile shows one image at a time on screens 948 px wide or less, which customers swipe through. Dots under the slider show the position.
- Mobile slider height sets the slider height: Medium (half the screen height), Large (75 percent, the default) or Full (the whole screen). It shows only when the slider is on.
- Enable lightbox adds a zoom icon to the images. Selecting it opens the image larger over the page. Images with a Link open their link instead and have no zoom icon.
- Enable inner content spacing (default off) adds padding around the grid and space between the images. Off, the images touch each other and run edge to edge. See General section settings.
Why are my gallery images cropped?
Because every image is shown in the shape set by Images aspect ratio. A portrait photo in a Square gallery loses its top and bottom. Choose the ratio closest to most of your images, for example Tall (5:6) for portrait photos.
Why does the lightbox not open on some images?
Because those images have a Link. A linked image opens its link, so Kingdom does not add the zoom icon to it. Remove the link to use the lightbox on that image.
All Gallery settings
Every setting in this group, with its type and default.
Accepts these blocks: Image (up to 99 blocks in the section).
Images aspect ratio (dropdown, default: Cropped: Square (1:1)): Sets one shape for every image in the gallery. Images are cropped to it. Options: Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Turn gallery into a slider on mobile (checkbox, default: off): Shows one image at a time in a swipeable slider on screens 948 px wide or less.
Mobile slider height (dropdown, default: Large): Sets the height of the mobile slider as a share of the screen height: Medium 50, Large 75, Full 100 percent. Options: Medium, Large, Full. Shown only when Turn gallery into a slider on mobile is on.
Enable lightbox (checkbox, default: off): Adds a zoom icon that shows the image larger over the page. Images with a Link open the link instead.
Gallery section: Gutter
Where to find it: Gallery → Gutter
Enable inner content spacing (checkbox): Adds padding around the grid and space between the images. Off, the images touch and run edge to edge.
Image block
Where to find it: Gallery → Add block → Image
Image (image).
Caption (text field): Shows a short text under the image. It is also the image's alt text.
Enlarge image in grid (checkbox): Makes the image twice as wide and twice as tall as the others.
Link (link).
Open link in a new window (checkbox, default: off).
Related pages
- Image section: one full-width image.
- Flex grid section: a collage of media and text cards.
- Recommended image sizes: image shapes and cropping.
- General section settings: inner content spacing.