Image/V2

Images with aspect ratio preservation, corner radius, shadow, and optional link actions.

Basic Structure

JSON

{
  "type": "Image/V2",
  "id": "6Z-ImgEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "alt": "Image description for accessibility",
    "style": { "text-align": "center" }
  },
  "params": {
    "imageUrl": [
      {
        "type": "text",
        "innerText": "https://example.com/image.png"
      }
    ],
    "default-aspect-ratio": "756 / 822"
  },
  "selectors": {
    ".elImage": {
      "attrs": {
        "style": {
          "width": 300,
          "border-radius": 8
        },
        "data-skip-corners-settings": "false",
        "data-skip-shadow-settings": "false"
      },
      "params": {
        "width--unit": "px",
        "border-radius--unit": "px"
      }
    }
  }
}

Properties

Property	Description
`imageUrl`	Array containing text node with image URL
`default-aspect-ratio`	Aspect ratio as "width / height" (e.g., "16 / 9")
`alt`	Alt text for accessibility
`data-element-link`	Optional link action (e.g., "#open-popup")

Image with Shadow

JSON

{
  "type": "Image/V2",
  "selectors": {
    ".elImage": {
      "attrs": {
        "style": {
          "width": 400,
          "border-radius": 12
        },
        "data-skip-shadow-settings": "false",
        "data-skip-corners-settings": "false"
      },
      "params": {
        "width--unit": "px",
        "border-radius--unit": "px",
        "--style-box-shadow-distance-x": 0,
        "--style-box-shadow-distance-y": 8,
        "--style-box-shadow-blur": 24,
        "--style-box-shadow-spread": 0,
        "--style-box-shadow-color": "rgba(0, 0, 0, 0.15)",
        "--style-box-shadow-distance-x--unit": "px",
        "--style-box-shadow-distance-y--unit": "px",
        "--style-box-shadow-blur--unit": "px",
        "--style-box-shadow-spread--unit": "px"
      }
    }
  }
}

Clickable Image

Add data-element-link to make the image clickable:

JSON

{
  "type": "Image/V2",
  "selectors": {
    ".elImage": {
      "attrs": {
        "data-element-link": "#open-popup",
        "style": { "cursor": "pointer" }
      }
    }
  }
}

Common link actions:

#open-popup - Open the page popup
https://example.com - External link
#scroll-section-id - Scroll to element

Responsive Width

Use percentage width for responsive images:

JSON

{
  "selectors": {
    ".elImage": {
      "attrs": {
        "style": { "width": 100 }
      },
      "params": {
        "width--unit": "%"
      }
    }
  }
}