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).

Fields

`image`

`src`

Public CDN URL of the image or SVG file.

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

`alt`

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

image: {
  alt: "Graffen Logo"
}

`decorative`

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

image: {
  decorative: true
}

`imageSizes`

image: {
  imageSizes: ""
}

`imageSlotShare`

`inlineSvgMarkup`

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

image: {
  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.

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

`credit`

Optional Unsplash attribution. When set, the public image shows Photo by the photographer name on Unsplash, with links to the photographer and the photo. Images without a credit stay unchanged.

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

Default props

{
  "localeSpecificImages": false,
  "link": {
    "openInNewTab": false
  },
  "shell": {
    "customizeEnabled": false,
    "pointerEvents": "auto",
    "decorationBySelector": {},
    "visibility": {
      "showOnBreakpoints": {},
      "showOnLocales": {},
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "box": {
      "padding": "none",
      "paddingEnabled": false,
      "marginsEnabled": false,
      "sizeByBreakpoint": {},
      "positionEnabled": false,
      "positionByBreakpoint": {}
    },
    "background": {
      "backgroundEnabled": false,
      "backgroundWidth": "page",
      "backgroundKind": "solid",
      "backgroundColorLight": "",
      "backgroundColorDark": "",
      "gradientType": "linear",
      "gradientAngle": 180,
      "gradientColors": [
        {
          "light": "",
          "dark": "",
          "offset": 50
        },
        {
          "light": "",
          "dark": "",
          "offset": 50
        }
      ],
      "gradientColor1Light": "",
      "gradientColor1Dark": "",
      "gradientColor2Light": "",
      "gradientColor2Dark": "",
      "backgroundImageSrc": "",
      "backgroundImageMode": "cover",
      "backgroundRepeatSize": 100,
      "backgroundPosition": "center",
      "backgroundMotionEnabled": false,
      "backgroundMotionDirectionDeg": 0,
      "backgroundMotionSpeed": 20,
      "backgroundMotionRotateDegPerSec": 0,
      "backgroundVideoSrc": "",
      "backgroundVideoFit": "cover",
      "backgroundVideoLoop": true,
      "backgroundVideoRepeatSize": 100,
      "backgroundAnimationMode": "particle",
      "backgroundAnimShape": "circle",
      "backgroundAnimSvgSrc": "",
      "backgroundAnimColorMode": "solid",
      "backgroundAnimColorLight": "#ffffff88",
      "backgroundAnimColorDark": "#ffffff66",
      "backgroundAnimSize": 12,
      "backgroundAnimJitter": 0.2,
      "backgroundParticleCount": 40,
      "backgroundParticleLifetimeSec": 4,
      "backgroundParticleSpeed": 40,
      "backgroundParticleAnimType": "fade",
      "backgroundParticleFromSide": "left",
      "backgroundParticleToSide": "right",
      "backgroundGridStyle": "cells",
      "backgroundGridMotionDirectionDeg": 0,
      "backgroundGridMotionSpeed": 0,
      "backgroundGridRotateDegPerSec": 0,
      "backgroundGridHoverGrowLimitPct": 50,
      "backgroundGridHoverRotateLimitDeg": 0,
      "backgroundGridReactionTimeSec": 1,
      "backgroundGridHoverGrow": true,
      "backgroundGridHoverRotate": false,
      "backgroundGridHoverColor": false,
      "backgroundGridHoverColorLight": "#ffffff55",
      "backgroundGridHoverColorDark": "#ffffff33",
      "backgroundGridReactionSpeed": 1,
      "backgroundBackdropEnabled": false,
      "backgroundBackdropBlurPx": 0,
      "backgroundBackdropBrightness": 1,
      "backgroundBackdropContrast": 1,
      "backgroundBackdropSaturate": 1,
      "backgroundBackdropGrayscale": 0,
      "backgroundBackdropSepia": 0,
      "backgroundBackdropHueRotateDeg": 0
    },
    "border": {
      "borderEnabled": false,
      "borderColorLight": "",
      "borderColorDark": "",
      "borderStyle": "solid"
    },
    "shadow": {
      "shadowEnabled": false,
      "shadowValueLight": "",
      "shadowValueDark": ""
    },
    "effects": {
      "effectsEnabled": false,
      "opacity": 1,
      "filterBlurPx": 0,
      "filterBrightness": 1,
      "filterContrast": 1,
      "filterSaturate": 1,
      "filterGrayscale": 0,
      "filterSepia": 0,
      "filterHueRotateDeg": 0,
      "filterDropShadowOffsetX": 0,
      "filterDropShadowOffsetY": 0,
      "filterDropShadowBlur": 0,
      "filterDropShadowColorLight": "",
      "filterDropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "scrollAnimation": {
      "scrollAnimationEnabled": false,
      "scrollAnimationType": "fadeIn",
      "scrollAnimationDuration": 600,
      "scrollAnimationDelay": 0
    },
    "cursorTilt": {
      "cursorTiltEnabled": false,
      "cursorTiltIntensity": 12
    },
    "wander": {
      "wanderEnabled": false,
      "wanderSpeed": 40,
      "wanderJitter": 40,
      "wanderTurnRadius": 50,
      "wanderTurnSmoothness": 40,
      "wanderLimits": "parent"
    },
    "transform": {
      "transformEnabled": false,
      "transformRotateX": 0,
      "transformRotateY": 0,
      "transformRotateZ": 0,
      "transformTranslateX": 0,
      "transformTranslateY": 0,
      "transformTranslateZ": 0,
      "transformScale": 1
    }
  }
}