Image | Quail Pages

Documentation

Shared authored image data.

Kind

Rendered Content

Required fields

alt, src

Style Guide

Image

Used by

Card, Element, Gallery, PageDocument, PageHeader, PageListItemSettings, ProductCard

Authoring guidance

Use when

Use wherever Quail Pages expects image data. Add type: "image" when the image is a standalone Element; omit it when the image is nested inside another authored object.

Properties

alt

string

Accessible text alternative.

aspectRatio

string

Preferred rendered aspect ratio, expressed as a ratio such as 5:7 or 16:9.

badge

string

Short label displayed over the image.

caption

object

Structured media caption.

credit — string

Image credit text.

subtitle — string

Supporting text associated with the heading.

title — string

Visible heading or display name.

centerOffset

object

Percentage focal position; missing axes default to 50.

x — number

Horizontal focal position.

y — number

Vertical focal position.

class

string

Optional styling hook.

fetchPriority

enum

Browser fetch-priority hint.

"high" | "low" | "auto"

lightbox

boolean

Overrides the site-wide image lightbox default.

link

Link

Optional ordinary navigation link; overrides lightbox behavior.

loading

enum

Browser loading strategy.

"lazy" | "eager"

maxWidth

number

Maximum rendered width in CSS pixels.

src

string

Image URL or site-relative path.

width

number

Maximum responsive source width.

minimum: 1

Example

Required

{ "alt": "The Acme team working together", "src": "/images/team.jpg" }

Full

{ "alt": "The Acme team working together", "aspectRatio": "16:9", "badge": "example", "caption": { "credit": "example", "subtitle": "example", "title": "Example" }, "centerOffset": { "x": 50, "y": 40 }, "class": "example", "fetchPriority": "high", "lightbox": false, "link": { "href": "/example", "newTab": false, "nofollow": false, "sponsored": false }, "loading": "lazy", "maxWidth": 0, "src": "/images/team.jpg", "width": 0 }

examples are generated from the schema.