📖 Overview
The Gallery block displays a collection of images in either a responsive grid or Swiper slider layout. It supports click-to-zoom modal functionality, custom layouts, and optional image shadows.
✏️ Content Options
| Field |
Type |
Required |
Description |
| Gallery |
Gallery |
No |
Select multiple images to display in the gallery |
⚙️ Settings Options
| Setting |
Type |
Default |
Description |
| Convert to slider? |
Toggle |
Off |
Display images in a Swiper slider instead of a grid |
| Enable Modal Functionality |
Toggle |
Off |
Enable click-to-zoom modal for gallery images (Grid only) |
| Columns |
Select |
3 |
Number of columns (1-4). Only visible when not a slider |
| Enable Custom Layout? |
Toggle |
Off |
Use a custom layout with the first image full-width. Only uses first 3 images (Grid only) |
| Set slides per view automatically? |
Toggle |
Off |
Base slides per view on slide widths rather than fixed number (Slider only) |
| Slides Per View (Desktop) |
Select |
3 |
Number of slides visible on desktop (Slider only) |
| Slides Per View (Tablet) |
Select |
2 |
Number of slides visible on tablet (Slider only) |
| Slides Per View (Mobile) |
Select |
1 |
Number of slides visible on mobile (Slider only) |
| Show Overflow? |
Toggle |
Off |
Show images that overflow the slider container (Slider only) |
| Enable Image Shadow |
Toggle |
Off |
Add shadow to the gallery images |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable |
Default Value |
--block-gallery-gallery-gap |
var(--spacing-xs) |
--block-gallery-gallery-image-border-radius |
var(--radius-card) |
--block-gallery-gallery-image-shadow |
var(--shadow-card) |
--block-gallery-gallery-image-background-colour |
var(--colour-rgba-white-20) |
--block-gallery-gallery-image-element-border-radius |
var(--radius-card) |
--block-gallery-slide-auto-width |
500px |
--block-gallery-image-zoom-background-colour |
var(--colour-rgba-black-60) |
