Displays a single artwork with its image, an optional title/subtitle header, and a structured property list (type, year, materials, dimensions, status). Designed for art catalog pages. Clicking the image opens a larger version in a modal overlay. The component supports bilingual output — when the page-level lang variable is de, labels switch to German and inch dimensions are automatically converted to centimetres.
Assemblage
- sectionType: artwork
containerTag: section
text: # optional — omit to suppress the header
leadIn: ''
title: 'Object 2026.03.005'
titleTag: 'h2'
subTitle: 'Assemblage'
image: # required
src: '/assets/images/artwork.jpg'
alt: 'Description for accessibility'
caption: ''
artworkProperties: # optional — omit to suppress the property list
type: 'Assemblage'
year: 2026
materials: 'Wire mesh, wood panel, ash, urethane, shredded paper'
status: 'available' # only 'available' renders the status row
dimensions:
width: 9
height: 24
depth: 1 # optional
unit: 'in'| Property | Type | Required | Description |
|---|---|---|---|
image.src | string | Yes | Path to the artwork image |
image.alt | string | Yes | Alternative text for accessibility |
image.caption | string | No | Optional caption displayed below the image |
The artwork image is rendered as a button. Clicking it opens the image at full size in a modal overlay, adopted from the video component's modal implementation. The modal closes via the close control, a click on the backdrop, or the Escape key, and works with SWUP page transitions. No configuration is required — the modal always uses the image defined in image.src, so provide a source large enough to look good at up to 80% of the viewport.
| Property | Type | Required | Description |
|---|---|---|---|
text.title | string | No | Artwork title |
text.titleTag | string | No | HTML tag for the title (h1–h6) |
text.subTitle | string | No | Subtitle or medium label |
| Property | Type | Description |
|---|---|---|
artworkProperties.type | string | Medium or artwork type |
artworkProperties.year | number | Year of creation |
artworkProperties.materials | string | Materials used |
artworkProperties.dimensions | object | width, height, depth (numbers), unit (string) |
artworkProperties.status | string | Only available renders the status row; other values omit it |
When the page-level lang variable is de, property labels switch to German and inch dimensions are multiplied by 2.54 and displayed in centimetres. In a standard Metalsmith build where lang is not set, English labels are always used.