Aspect Preview

Über

Das Plugin ersetzt die separat öffnenden Crop- und Fokuspunkt-Drawer von Payload durch einen einspaltigen Editor direkt in der Upload-Ansicht. Beim Verschieben des Fokuspunkts oder Ziehen des Crop-Bereichs zeigt eine Live-Vorschau, wie sich das Bild in jedem konfigurierten Seitenverhältnis darstellt. Die Vorschau simuliert das Frontend-Verhalten von object-fit: cover mit dem Fokuspunkt als Anker, sodass die Voransicht der Produktionsausgabe entspricht. Beim Initialisieren iteriert das Plugin über die übergebenen Collection-Slugs und fügt ein UI-Feld namens aspectPreview hinzu, das den Editor rendert. Ist disabled nicht auf true gesetzt, überschreibt das Plugin die Upload-Admin-Komponente der Collection und entfernt den Standard-Crop-Drawer von Payload. Der Inline-Editor ist damit die einzige Bearbeitungsfläche. Crop-Zustände werden im Arbeitsspeicher durch react-image-crop verwaltet, die Fokuskoordinaten im integrierten focalPoint-Feld des Dokuments gespeichert. Die Konfiguration benötigt nur ein Array von Upload-Collection-Slugs sowie optional ein aspectRatios-Array. Standardmäßig sind sechs Verhältnisse voreingestellt: 1:1, 4:3, 3:2, 16:9, 9:16 und ein 1200x630 Social-Share-Format. Jeder Ratio-Eintrag enthält Name, Verhältnis, Breite, Höhe, eine Quellangabe (css oder crop) sowie optionale Felder für Usage und Kategorie, die in den Vorschau-Karten angezeigt werden. Die Ersetzung der Upload-Komponente greift auf @payloadcms/ui-Internas wie FileDetails, Dropzone und PreviewSizes zurück, die keine stabile öffentliche API darstellen. Ein Payload-Minor-Update kann ein passendes Plugin-Update erfordern, weshalb die Payload-Version fixiert und nach Upgrades getestet werden sollte. Voraussetzungen sind Payload ^3.85.0 und React 19.

Paketinformationen

Paketname

payload-plugin-aspect-preview

Neueste Version

0.2.3

Entpackte Größe

85 kB

Lizenz

MIT

Wöchentliche Downloads

186

Zuletzt veröffentlicht

28. Sep. 2026