PhotoGrid

Hero + supporting grid for portfolio project detail pages. One full-width heroImage at 16:9, followed by a gridImages array of 2–4 images at 4:3. Three-image sets span the first image full width above a two-column pair. Four-image sets render as a 2×2 grid. The lightbox boolean (default true) enables a native <dialog>-based full-screen viewer with keyboard navigation. Emits ImageObject schema for every image.

heroImage — required · { src, alt }
gridImages — required · array of { src, alt } — 2 to 4 items
caption? — optional string below the grid
lightbox? — true (default) | false
layout? — "grid" (default) equal columns | "asymmetric" alternating 60/40 → 40/60 rows
variant? — "light" (default) | "dark" | "brand"

1 — gridImages×2 · lightbox=true · caption · variant="light"

Front facade of a custom home on Lakeshore Road, Burlington

Shoreacres, Burlington — 4,200 sq ft custom build. Completed 2023. White oak millwork, heated concrete floors throughout, Nanawall system to rear terrace.

2 — gridImages×3 · lightbox=true · no caption · variant="light"

Renovated living room with vaulted ceiling in Tyandaga, Burlington

3 — gridImages×4 · lightbox=true · caption · variant="dark"

Detached backyard suite with cedar cladding, Oakville

Oakville — Detached backyard suite, 640 sq ft. Permitted and completed in 18 weeks. Full kitchen, separate laundry, private entrance.

4 — gridImages×2 · lightbox=false · variant="brand"

5 — gridImages×4 · lightbox=true · variant="light"

6 — layout="asymmetric" · gridImages×4 · row 1: 60/40 — row 2: 40/60 · variant="light"

Shoreacres, Burlington — Custom build 2023. Row 1: exterior and rear terrace. Row 2: kitchen and primary suite.

7 — layout="asymmetric" · gridImages×4 · variant="dark"

8 — layout="asymmetric" · gridImages×2 · single 60/40 row · variant="light"