Aspect Preview

About

Replaces Payload's separate crop and focal point drawers with a single-screen editor on upload collections. As you drag the focal point or draw a crop, a live preview grid shows how the image renders at every configured aspect ratio, simulating the frontend's `object-fit: cover` with focal positioning so previews match production output. The plugin maps over the collection slugs you pass in and appends a `ui` field named `aspectPreview` that renders the editor. Unless you set `disabled: true`, it also overrides the collection's Upload admin component to remove Payload's default crop drawer, making the inline editor the only surface. Crop and focal coordinates are stored in the document's built-in `focalPoint` field when present, with in-memory crop state handled by react-image-crop. Configuration is minimal: pass a list of upload collection slugs and, optionally, a custom `aspectRatios` array. The default set covers square, 4:3, 3:2, 16:9, 9:16, and a 1200x630 social share target. Each ratio entry carries a name, ratio token, width, height, a `css` or `crop` source badge, and optional usage and category labels shown in the preview cards. The replacement upload field relies on `@payloadcms/ui` internals such as `FileDetails`, `Dropzone`, and `PreviewSizes`, which are not a stable public API. A Payload minor upgrade may require a corresponding plugin update, so pin your Payload version and test after upgrades. Requires Payload ^3.85.0 and React 19.

Package info

Package name

payload-plugin-aspect-preview

Latest version

0.2.1

Unpacked size

84 kB

License

MIT

Weekly downloads

462

Last publish

Jul 12, 2026