Image

Type identifier: image Category: Experience Blocks

Description

Media block for rendering images. Supports URL/file/datum-backed sources, explicit dimensions, replaced-element presentation options, and optional state overrides.

Schema Summary

The Image block has these required fields, in addition to the shared properties:

type: "image"
src
width: number
height: number

Optional image-specific fields:

alt
placeholderSrc
cssWidth, cssHeight
objectFit, objectPosition
states

Properties

Property	Type	Required	Notes
`id`	`string`	Yes	Shared block identifier.
`type`	`"image"`	Yes	Block discriminator.
`src`	URL, `datumReference`, or file reference	Yes	Media source.
`alt`	`string \| datumReference`	No	Accessible alt text.
`width`	`number`	Yes	Intrinsic/render width.
`height`	`number`	Yes	Intrinsic/render height.
`placeholderSrc`	URL, `datumReference`, or file reference	No	Placeholder media source.
`cssWidth`	CSS size \| `"auto"`	No	CSS width override.
`cssHeight`	CSS size \| `"auto"`	No	CSS height override.
`objectFit`	`"fill" \| "contain" \| "cover" \| "none" \| "scale-down"`	No	Replaced element fit behaviour.
`objectPosition`	`string`	No	Replaced element position.
`states`	Array of states	No	Optional state-specific overrides.

The Image block also supports the shared style/layout/data props.

States

State entries follow the shared state shape and support partial image overrides.

Image blocks do not support pseudo-state overrides. Media states are available; see Experience States and Print Layout.

Minimal Valid Example

{
  "id": "img-1",
  "type": "image",
  "src": "https://cdn.example.com/image.jpg",
  "alt": "Example image",
  "width": 800,
  "height": 600
}

Audio

Media block for rendering audio sources with optional sizing, replaced-element properties, and media control settings.

Experience Blocks Reference

This reference documents all currently defined Experience block types in Ligantic.

How to Edit and Group Several Blocks at Once

This guide shows you how to select more than one block in the Experience designer, change their shared styles in one go, and wrap them in a new Box block.

Video

Media block for rendering video sources, with intrinsic dimensions and optional media control settings.