Image block

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Decoration and visibility use Dekorasyon ve görünürlük (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. aspectRatio is auto, 1:1, 4:3, or 16:9 on the frame. imageMode is cover or contain. The editor sizing section is not stored as imageSizing.

Fields

imageSizing

Editor-only control — does not persist its own value.

Editor section for the frame. The stored props are aspectRatio (auto, 1:1, 4:3, or 16:9) and imageMode (cover or contain). imageSizing itself is not saved.

aspectRatio

Frame ratio. auto leaves the image's own ratio. 1:1, 4:3, and 16:9 set the frame.

aspectRatio: "16:9"

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
}

imageMode

How the image fits the frame. cover fills it. contain shows the whole image.

Options: cover, contain, repeat

content: {
  imageMode: "cover"
}

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>