Gallery block
A Swiper gallery of image and video uploads with region editors before and after it.
On this page
The Gallery block shows image and video uploads that visitors swipe or page through, with region editors for copy before and after the media.
Where it is offeredLink to this section
Offered only in the root tier. Its content field uses the region editor with Columns and Card enabled.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
contentAfterPadding | number | Content After Padding | 0 | Required |
contentAfter | richText | Content After | ||
contentBeforePadding | number | Content Before Padding | 0 | Required |
contentBefore | richText | Content Before | ||
galleryItems | upload | Gallery Items | Required; Related to uploads; Multiple values | |
galleryPadding | number | Gallery Padding | 0 | Required |
layoutBg | radio | Background Variant | main | Required; Options: main (Main), alternative (Alternative) |
theme | radio | Color | default | Required; Options: default (Default), dark (Dark) |
Rendered outputLink to this section
Renders the Gallery component. Swiper loads on demand.
ConverterLink to this section
galleryConverter converts contentBefore and contentAfter, then maps populated image and video uploads into GalleryItem elements. Images use their upload alt text; videos autoplay muted. The three padding fields apply separately to the before content, gallery wrapper and after content. Missing padding values fall back to zero.
CustomizingLink to this section
Import GalleryBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing gallery slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.