Image

Last updated May 2026

Media Block

All plans

Upload or embed an image with full positioning, zoom, flip, and display mode controls. Five display modes let you go beyond a plain image — apply real-time dithering or ASCII art rendering directly in the editor and on published pages.

Adding an image

/ → Image

Type /image on any empty block and press Enter. A file picker or URL input appears.

Drag and drop

Drag an image file directly onto any empty block or between blocks.

Paste

Paste an image file or URL from clipboard into an empty block.

Block palette

Click + on any block → Media → Image.

Display modes

Default

Standard image rendering with optional caption below. Object fit is configurable.

Clean

No chrome, no caption — just the image. Best for inline illustrations and diagrams.

Overlay

A color/gradient overlay renders on top of the image. Configure color, opacity, and blend mode from the settings panel.

Dither

Applies a real-time dithering shader to the image. Same dither engine used in the Hero block — configurable pattern (Bayer, Halftone, Noise, Crosshatch), color mode, and grid size.

ASCII

Converts the image into a live ASCII character grid. Configurable character set, text color, column resolution, and animation style.

ℹ

Dither and ASCII modes run client-side using the same rendering pipeline as the Hero block's background effects. They render on published pages as well as in the editor — no static fallback.

Positioning and zoom

The Zoom, Flip, and Position controls are always present in the settings panel, regardless of the object fit mode — they are not gated behind Cover. Click and drag directly on the position thumbnail to set the focal point, or use the X/Y sliders for fine control.

A Zoom slider (100–300%) scales the image relative to "exactly cover" the container. At 100% the image fits with no excess. Increasing zoom gives the position controls more room to pan. Axes with no overflow are shown as locked — increase zoom to unlock them. There are no position preset pills — only the drag pad and the two sliders.

Flip

Mirror the image horizontally (H), vertically (V), or both axes simultaneously. Toggles are independent.

Background removal

A Remove background button runs client-side background removal on the image (no server round-trip, no AI key required) and swaps in the processed result. A Restore original button reverts to the unprocessed image.

Settings reference

Setting	Options
Source	Upload file or paste URL
Display mode	Default, Clean, Overlay, Dither, ASCII
Object fit	Contain, Cover, Fill
Position	Drag control + X/Y sliders (always shown, not fit-dependent)
Zoom	100–300% (always shown, not fit-dependent)
Flip	None, H, V, Both
Background removal	Remove background / Restore original — no separate settings
Caption	Shown below the image in Default mode only
Width	Auto or custom px (drag right handle)
Height	Auto or custom px (drag bottom handle)

⚠

There is no alt text field in the settings panel. Alt text is stored in metadata and used for the rendered <img alt> attribute, but nothing in the UI currently lets you set it directly.

← PreviousDatabase Next →Embed