Cover Image with an Inline Crop

ProNew

A wide cover image (3 to 1) that crops in place: choose, crop to the right shape with a live size readout, apply, and see exactly how it will look across the page, with Replace and Remove. Use this when a banner must have a fixed shape and the crop belongs on the page, not in a dialog.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

ratio3

width1500

Guide and examples

When to use it

A banner or header image must fit a fixed ratio and people crop it as part of editing the page.

Do not use it when: For square avatars use the avatar pattern. If any shape is fine, do not force a crop.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`ratio`	`number`	`3`	Width over height.
`width`	`number`	`1500`	Output width in pixels.
`onChange`	`(file: File \| null) => void`	-	The cropped JPEG, or `null` when cleared.

Accessibility

The three states (empty, crop, done) are in one place and focus is not moved unexpectedly; the cropper keeps its keyboard controls and named buttons (see Image Cropper).
The result is an image with alt text and a caption with real numbers ("1500 x 500 px, 2 KB"). Replace and Remove are normal buttons.
Object URLs are released when the step changes and on unmount.

Testing

The pattern ships with a Testing Library test (cover-image-inline-crop.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A banner or header image must fit a fixed ratio and people crop it as part of editing the page.

Do not use it when: For square avatars use the avatar pattern. If any shape is fine, do not force a crop.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`ratio`	`number`	`3`	Width over height.
`width`	`number`	`1500`	Output width in pixels.
`onChange`	`(file: File \| null) => void`	-	The cropped JPEG, or `null` when cleared.

Accessibility

The three states (empty, crop, done) are in one place and focus is not moved unexpectedly; the cropper keeps its keyboard controls and named buttons (see Image Cropper).
The result is an image with alt text and a caption with real numbers ("1500 x 500 px, 2 KB"). Replace and Remove are normal buttons.
Object URLs are released when the step changes and on unmount.

Testing

The pattern ships with a Testing Library test (cover-image-inline-crop.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.