Image block

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

Decoration and visibility use Decoration & visibility (BlockShell).

Image or inline SVG. Set alt for meaningful images (logo, photo). Use decorative: true for purely decorative icons so assistive tech gets empty alt / aria-hidden. When neither is set, a localized soft fallback (“Related image”) is used. Raster sources use the normal image pipeline. When src is an SVG, the editor stamps element ids into inlineSvgMarkup and you can set light/dark fill and stroke per element (elementPaints). A non-empty imageSizes string is kept and used as the img sizes attribute. When it is empty, sizes are derived from the parent column.

Fields

imageSizing

Image Sizing.

content

src

Public CDN URL of the image or SVG file.

content: {
  src: "https://cdn.example/logo.svg"
}

srcDark

Optional raster URL used when the website theme is dark. Empty keeps src. Inline SVG paints are unchanged.

content: {
  srcDark: "https://cdn.example/logo-light.svg"
}

alt

Accessible description. Ignored when decorative is true. Prefer a specific label (e.g. site name for logos).

content: {
  alt: "Graffen Logo"
}

decorative

When true, forces empty alt (and aria-hidden on inline SVG) so screen readers skip the image.

content: {
  decorative: true
}

imageSizes

Image Sizes.

content: {
  imageSizes: ""
}

imageSlotShare

Image Slot Share.

inlineSvgMarkup

Stamped full <svg> markup used for inline rendering and element coloring. Set automatically when an SVG is chosen; cleared for raster sources.

content: {
  inlineSvgMarkup: "<svg …>…</svg>"
}

elementPaints

Per stamped element (data-svg-canvas-id) fill/stroke overrides for light and dark themes. Missing keys keep the author SVG colors.

Select one or more elements in the SVG colors panel (Shift/Cmd for multi-select), then set Fill/Stroke. Clearing a color restores the original SVG paint for that side.

content: {
  elementPaints: { "path-id": { fillLight: "#111", fillDark: "#eee" } }
}

credit

Optional Unsplash attribution stored for the editor. The published page does not show it. Images without a credit stay unchanged.

content: {
  credit: { photographerName: "Ava Lane", photographerUrl: "https://unsplash.com/@ava", photoUrl: "https://unsplash.com/photos/example" }
}

action

href

Optional link. Write action.href. link.href is an accepted alias. A string, or { url, params?, entryId?, routePageId? }. See get_docs design/shared-concepts/links.

entryId plus routePageId build the public URL from the route pattern and the entry. The last [param] is the entry. Earlier [relation.field] segments come from that entry, including {{var:item.id}} in a repeated list.

action: {
  href: { url: "catalogue/[slug]", params: { slug: "baby-wipes" }, entryId, routePageId }
}

rel

Optional link rel. Write action.rel. link.rel is an accepted alias. Omitted internal links have none; a new-tab external link defaults to noopener noreferrer.

action: {
  rel: "nofollow"
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "customizeEnabled": false,
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "action": {
    "openInNewTab": false
  },
  "localeSpecificImages": false
}

</details>