Image Showcase
A row of images with configurable spacing, sizing, and layout options, with a swipeable carousel on mobile.
What It Does
The Image Showcase module displays a row of images in a horizontal layout on desktop. On mobile, the images are presented in a draggable carousel for easy swiping. A centred title and description sit above the image row. The module provides seven layout configuration fields — spacing, gap, alignment, size, ratio, wrap, and container width — giving editors precise control over how images are presented.
Best Used For
- Product lineup displays
- Phone or app screenshot showcases
- Packaging or bottle photography
- Portfolio or gallery sections
- Any image collection that benefits from side-by-side comparison
Variants
Default
Three images in a row with a light background and default spacing.
Best for: Most product showcase use cases
CustomSpacing
Demonstrates the spacing and layout configuration fields — spacious vertical padding, compact image gaps, images distributed with space-between alignment, large square aspect ratio, and full-width container with wrapping enabled.
Best for: Portfolio or gallery sections where precise image layout control is needed
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| sectionTitle | component | No | Heading displayed above the image grid |
| description | component | No | Supporting text below the title |
| imagesBox | component | Yes | List of image items with URL, alt text, and optional description |
| bgColor | customField | No | Background colour for the section |
| spacing | enumeration | No | Vertical padding around the section -- none, compact, default, spacious |
| imageGap | enumeration | No | Gap between images -- none, compact, default, spacious |
| imageAlign | enumeration | No | Horizontal alignment of the image row -- left, center, right, between |
| imageSize | enumeration | No | Width of each image -- small, medium, large, xlarge |
| imageRatio | enumeration | No | Aspect ratio of each image -- portrait, square, landscape, wide |
| flexWrap | enumeration | No | Whether images wrap to a new row on overflow -- nowrap, wrap |
| containerWidth | enumeration | No | Section width -- contained or full |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use portrait-oriented images for the best fit with the default
imageRatiosetting. - Keep images visually consistent in style, lighting, and background.
- 3 to 4 images look best on desktop — fewer than 3 may feel sparse.
- The mobile carousel supports drag-free swiping, so images should work independently.
Supported Languages
Fully bilingual — the title and description support both English and Thai content. Images are language-independent.