The image gallery component renders multiple images in a grid layout from an image field in a repeating-row blueprint section. Use it for progress photo galleries, site inspection images, or any collection of images contributed per edition.
When to use
- Site progress photo summary (3×3 or 4×4 grid of latest site photos).
- Defect or inspection photo log (one row per inspection item with a photo, date, and description).
- Milestone photos (key events captured in the edition with captions).
- Product or deliverable images from a quality inspection section.
Adding the component
- Open the report output in the Output Designer.
- Click + Insert → Image Gallery.
- Position and resize the component.
- In the Data tab, bind the section and configure the image field and caption fields.
Data binding
| Property | Description |
|---|
| Source section | A repeating-row section where each row has an image field. |
| Image field | The image field in the section to use for each gallery cell. |
| Caption field | Optional text field to show as a caption below each image. |
| Sub-caption field | Optional secondary field (e.g. date, location, status). |
| Sort field | Sort images by a field (e.g. upload date, row order). |
| Filter | Optional row filter (e.g. only rows where Category = "Progress"). |
| Max images | Limit the number of images displayed. |
Grid layout
| Property | Options |
|---|
| Columns | 2, 3, or 4 columns. |
| Cell aspect ratio | Square (1:1), Landscape (16:9), Portrait (3:4), or Auto (original ratio). |
| Fit mode | Contain, Cover (crop to fill), or Stretch. |
| Gap | Spacing between cells in pixels (0–20px). |
Cell styling
| Property | Options |
|---|
| Border | None, or configurable border style per cell. |
| Border radius | 0–12px rounded corners. |
| Shadow | Optional drop shadow per cell. |
| Caption background | None, or overlay the caption on the bottom of the image with a semi-transparent background. |
| Caption alignment | Left, Centre, Right. |
Empty state
| Property | Description |
|---|
| Empty cells | Show empty cells as grey placeholders, or collapse the grid to fit only available images. |
| Hide when empty | Collapse the entire component if the section has no rows with images. |
| Empty cell text | Text shown inside placeholder cells (e.g. "No image"). |
Lightbox (report viewer only)
In the interactive report viewer, clicking a gallery image opens a fullscreen lightbox:
| Property | Description |
|---|
| Lightbox | Enabled by default. Disable to prevent lightbox on click. |
| Navigation arrows | Previous/Next controls within the lightbox. |
| Caption in lightbox | Show the caption and sub-caption fields in the lightbox overlay. |
The lightbox is not available in exported PDF, Word, or Excel outputs — the gallery renders as a static grid.
Export behaviour
- PDF / Word: Each image is embedded at its configured cell size. Captions appear below each image.
- Excel: Images are embedded as floating objects in a grid arrangement. Captions are placed in adjacent cells.
- For print, keep cell size above 60×60px to ensure images are legible.