TYPO3 Image Editor Extension: Bildbearbeitung direkt im Backend
Artikel vorlesen lassen
EXT:image_editor bringt Funktionen ins TYPO3-Backend, für die Redakteure bisher externe Tools brauchten. Ich habe sie getestet und zeige dir, was funktioniert und was noch nicht.
Seit TYPO3 7 gibt es einen eingebauten Bild-Editor im Backend. Damit lässt sich der Bildausschnitt anpassen. Mehr konnte er nicht. Georg Ringer, bekannt als Entwickler der weit verbreiteten EXT:news, hat jetzt eine neue Extension veröffentlicht, die das deutlich erweitert: direkt im Media-Modul lassen sich Bilder zuschneiden, drehen, Helligkeit und Kontrast anpassen, Filter anwenden und Annotationen hinzufügen.
Was die Extension kann
Die Extension läuft über das Media-Modul, nicht über die Dateireferenz wie der bisherige Backend-Editor. Nach der Installation erscheint beim Klick auf ein Bild der neue Menüpunkt "Edit Image".
Die Funktionen im Überblick:
- Adjust: Zuschneiden, Rotieren (90-Grad-Schritte oder frei), Spiegeln
- Fine-Tune: Helligkeit, Kontrast, Sättigung, Farbton, Unschärfe, Farbtemperatur
- Filters: Vorauswahl klassischer Filter (Sepia, Solarize u.a.)
- Annotate: Text, Rechtecke mit Rahmen und Schatten, Bild-Upload, Pfeile etc.
- Resize: Bildgröße anpassen
Die Extension lässt sich per User-TSconfig konfigurieren. Standardmäßig ist sie für alle Nutzer aktiv, kann aber gezielt deaktiviert werden. Auch die sichtbaren Tabs und Crop-Presets lassen sich einstellen.
Installation
Die Extension ist über das TYPO3 Extension Repository verfügbar und wird per Composer installiert:
composer require georgringer/image-editor
Hinweise und bekannte Probleme
Brave Browser: Falls du Brave als Browser verwendest und Probleme mit der Extension hast, prüfe zuerst, ob die Shield-Funktion aktiv ist. Bei mir war das die Ursache für fast alle Schwierigkeiten, die im Video zu sehen sind.
Fehler: Bild-Upload im Annotate-Bereich schlägt fehl: Der Versuch, ein Bild in der Annotate-Funktion hochzuladen, schlägt mit einem CSP-Fehler fehl. Der Grund: TYPO3s Standard-Backend-CSP erlaubt keine blob:-URLs in img-src. Als Behelfslösung kannst du in deinem Sitepackage eine eigene CSP-Konfiguration hinterlegen (EXT:sitepackage/Configuration/ContentSecurityPolicies.php), die blob: für das Backend freischaltet. Den vollständigen Code findest du im GitHub Issue #1.
Hast du die Extension ebenfalls getestet? Tritt der Fehler beim Bild-Upload bei dir ebenfalls auf oder läuft es bei dir ohne Probleme?
Links
Du hast eine Frage oder willst das Thema diskutieren?
Im Community Hub für TYPO3 kannst du dich mit anderen TYPO3 Anwendern austauschen. Und wenn du keine neuen Artikel verpassen willst: Der TYPO3 Newsletter kommt einmal im Monat, ohne Spam.