Pane types / image

image

A picture that is itself the point — a photo, a generated render, a screenshot worth seeing.

An image card with title and optional sub.

A rendered image pane (image-v1)
image-v1

Fields in data

The envelope around data (publisher, label, expiresAt…) is the same on every type: see the envelope.

FieldTypeNotes
variant"v1"optionalDesign variant to render (defaults to v1).
titlestringrequired1–200 chars
substringoptionalup to 240 chars
aspectstringoptionalup to 16 chars
urlstringoptionalformat: uri
altstringoptionalup to 240 chars

Craft

  • Panes has no upload: url must be a public HTTPS image you already host, and it needs to stay up.
  • Set aspect to the image's real ratio ("4 / 5", "16 / 9") so the card reserves the right space instead of reflowing on load.
  • title is a caption, not a filename — say what's in the picture.
  • Always write alt: it's what VoiceOver reads, and what shows if the image 404s.
  • sub carries the when/where ("Bondi · this morning").

Avoid

  • Don't send charts or dashboards as images — a chart or kpi pane renders in the design system and stays legible on a phone.
  • Don't link an image behind auth, a signed URL that expires, or a page (rather than the file itself).
  • Don't repeat title in alt; alt describes the picture for someone who can't see it.

Examples

Complete payloads for POST /api/v1/feed/items or the MCP publish_pane tool.

A photo worth surfacing on its own

{
  "type": "image",
  "publisher": "Camera Roll",
  "publisherInit": "CR",
  "publisherColor": "#1A4FCC",
  "label": "One year ago today",
  "data": {
    "title": "First light at Bronte",
    "sub": "Sydney · 6:14am",
    "aspect": "4 / 5",
    "url": "https://example.com/photos/bronte-sunrise.jpg",
    "alt": "Swimmers crossing an ocean pool as the sun breaks over the headland"
  }
}

A generated render returned to the user

{
  "type": "image",
  "publisher": "Studio",
  "publisherInit": "St",
  "publisherColor": "#635BFF",
  "label": "Render finished",
  "data": {
    "title": "Packaging concept · matte black",
    "sub": "Variant 3 of 4 · 2048px",
    "aspect": "1 / 1",
    "url": "https://example.com/renders/pack-v3.png",
    "alt": "Matte black cylindrical package on a pale grey backdrop, lit from the left"
  }
}