🎯 Wofür ist diese Anwendung gedacht?
In modernen responsiven Websites (wie Contao CMS) wird ein Bild je nach Bildschirmgröße
(Smartphone, Tablet, Desktop) in unterschiedliche Seitenverhältnisse (z. B. 16:9, 1:1, 9:16)
beschnitten. Diese Web-App ermöglicht es Redakteuren vor dem Einpflegen zu prüfen, ob
wichtige Bildbestandteile abgeschnitten werden und wo der optimale Fokuspunkt liegt.
🚀 Workflow für Redakteure
- Bildgröße wählen: Oben die gewünschte Bildgröße aus der
`contao_image_sizes.yaml` auswählen (z. B.
hero_100_16x9 oder
teaser_landscape).
- Bild hochladen: Eigenes Bild per Drag & Drop, Datei-Upload oder
Cmd+V einfügen.
- Fokuspunkt setzen: Auf das wichtigste Motiv (Gesicht, Produkt, Text) im
linken Vorschaubild klicken. Alle Breakpoints aktualisieren sich sofort in Echtzeit!
- Breakpoints prüfen: In der rechten Galerie siehst du alle Mobil-,
Tablet- und Desktop-Varianten in Echtzeit.
- In Contao übernehmen: Klicke auf "Contao-Werte kopieren" und
trage den Fokuspunkt in der Contao-Dateiverwaltung ein.
🔒 Datenschutz & Hosting
Alle Berechnungen finden 100% lokal in deinem Webbrowser statt. Keine Bilder werden auf einen
Server übertragen. Die App kann auf jedem beliebigen Webspace gehostet werden.