Section Component

Image Grid

A justified gallery layout where images in each row share the same height but have varying widths based on their aspect ratios. Row heights may differ to ensure images fill the available width. Perfect for artist portfolios, photo galleries, and visual showcases.

Data is loaded from JSON files in/lib/data/, making content management simple and reusable. Aspect ratios are calculated automatically from loaded images.

On hover, a dark overlay appears showing the image title, details, and date. Items with alinkproperty display an arrow icon indicating navigation to a detail page.

Examples

Sample Gallery

#108 36.5 x 55 x 13 inches, painted resin 2023

#82 18 x 24 x 6 inches, mixed media 2021

#76 42 x 36 x 12 inches, steel and wood 2020

Larger Row Height

#108 36.5 x 55 x 13 inches, painted resin 2023

#82 18 x 24 x 6 inches, mixed media 2021

#76 42 x 36 x 12 inches, steel and wood 2020

Configuration

Frontmatter

yaml

- sectionType: image-grid
  dataSource: artworks-2024
  text:
    title: "Sculptures 2024"
    titleTag: h2
  settings:
    gap: "6"
    targetRowHeight: "200"

Data File Structure

Create a JSON file in/lib/data/with your image data:

json

[
  {
    "image": "/assets/images/artworks/piece-1.jpg",
    "title": "#108",
    "details": "36.5 x 55 x 13 inches, painted resin",
    "date": "2023",
    "link": "/artworks/piece-108/"
  },
  {
    "image": "/assets/images/artworks/piece-2.jpg",
    "title": "#95",
    "details": "24 x 30 x 8 inches, bronze",
    "date": "2022"
  }
]

Items without alinkproperty will not show the arrow icon and won't be clickable.

Configuration Options

Property	Type	Required	Description
`dataSource`	string	Yes	Name of the JSON file in`/lib/data/`(without .json extension)
`text.title`	string	No	Optional section title
`text.titleTag`	string	No	HTML heading tag (h1-h6), defaults to h2
`settings.gap`	string	No	Gap between images in pixels (default: 6)
`settings.targetRowHeight`	string	No	Target height for rows in pixels (default: 200)

Data Item Properties

Property	Type	Required	Description
`image`	string	Yes	Path to the image file
`title`	string	No	Title shown in hover overlay
`details`	string	No	Details text (dimensions, materials, etc.)
`date`	string	No	Date or year
`link`	string	No	URL to detail page (shows arrow icon when present)