Aspect Preview

Описание

Плагин заменяет отдельные панели (drawer) Payload для кропа и фокальной точки на единый редактор прямо на странице редактирования коллекции загрузок. При перемещении фокальной точки или выделении области обрезки сетка предпросмотра в реальном времени показывает, как изображение будет отображаться в каждом заданном соотношении сторон. Предпросмотр симулирует поведение CSS `object-fit: cover` с привязкой к фокальной точке, что позволяет увидеть результат до публикации. Плагин перебирает переданные slugs коллекций и добавляет UI-поле `aspectPreview`, отвечающее за отрисовку редактора. Если не задан параметр `disabled: true`, плагин также переопределяет админский Upload-компонент коллекции, убирая стандартную панель кропа Payload, так что встроенный редактор остается единственным инструментом. Состояние кропа в памяти обрабатывается через react-image-crop, а фокальные координаты сохраняются во встроенном поле `focalPoint` документа, если оно есть. Настройка сводится к передаче списка slugs коллекций загрузок и, при необходимости, массива `aspectRatios`. По умолчанию доступны шесть форматов: 1:1, 4:3, 3:2, 16:9, 9:16 и 1200x630 для соцсетей. Каждая запись содержит `name`, токен `ratio`, `width`, `height`, индикатор источника (`css` или `crop`), а также необязательные поля `usage` и `category`, которые выводятся в карточках предпросмотра. Замещающий компонент поля загрузки использует внутренние механизмы `@payloadcms/ui`, включая `FileDetails`, `Dropzone` и `PreviewSizes`. Это нестабильный публичный API: при минорном обновлении Payload может потребоваться обновить и плагин, поэтому фиксируйте версию Payload и проверяйте работу после обновлений. Для работы требуется Payload ^3.85.0 и React 19. Лицензия MIT.

О пакете

Имя пакета

payload-plugin-aspect-preview

Последняя версия

0.2.3

Размер

85 кБ

Лицензия

MIT

Загрузок в неделю

186

Последняя публикация

28 сент. 2026 г.