---
title: "Gallery block"
description: "A Swiper gallery of image and video uploads with region editors before and after it."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/payload/blocks/gallery
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/llms.txt
---
> This page isn't translated yet. Showing English.


The Gallery block shows image and video uploads that visitors swipe or page through, with `region` editors for copy before and after the media.

![The gallery block fields in the Payload editor](./images/gallery.light.webp)

## Where it is offered

Offered only in the `root` tier. Its content field uses the `region` editor with Columns and Card enabled.

## Fields

<!-- generated:block-fields gallery -->

| 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)         |

<!-- /generated -->

## Rendered output

Renders the [Gallery component](https://docs.systhema.app/nl/components/gallery.md). Swiper loads on demand.

## Converter

`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.

## Customizing

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](https://docs.systhema.app/nl/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/nl/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/nl/payload/frontend/live-preview/client-mode.md).

## Related

- [Gallery component](https://docs.systhema.app/nl/components/gallery.md)
- [Carousel block](https://docs.systhema.app/nl/payload/blocks/carousel.md)