Image Gallery
An asymmetric grid of six images with a heading and description, designed for visual storytelling.
What It Does
The Image Gallery module displays exactly six images in a carefully designed asymmetric grid layout on desktop. The images are arranged in varying sizes to create visual interest, with one small image on the left, four mixed-size images in the centre, and one large image on the right. On mobile, the images stack vertically for easy scrolling.
Best Used For
- Brand portfolio or product showcase pages
- "Our Story" or lifestyle photography sections
- Visual narratives that benefit from varied image sizes
- Any section where six curated images tell a story together
Variants
Default
Light background with the asymmetric six-image grid and centred title.
Best for: Most gallery use cases on light-themed pages
Dark Background
Same layout with a dark background colour and light text.
Best for: Sections that need visual contrast or a premium feel
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| sectionTitle | component | No | Heading displayed above the gallery |
| description | component | No | Supporting text below the title |
| images | component | Yes | Exactly 6 images with optional alt text, each placed in a specific grid position |
| primaryColor | customField | No | Background colour of the entire section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Always provide exactly 6 images — the grid layout is designed for this count.
- Use high-quality images with consistent colour tones for a cohesive look.
- The first and sixth images appear at the edges, so choose visually strong images for those positions.
- Add meaningful alt text for each image to improve accessibility.
Supported Languages
Fully bilingual — the title and description support both English and Thai content. Images are language-independent.