Skip to main navigation Skip to main content Skip to page footer
TYPO3 Image Editor Extension: Bildbearbeitung direkt im Backend

TYPO3 Image Editor Extension: Bildbearbeitung direkt im Backend

Artikel vorlesen lassen

Loading the Elevenlabs Text to Speech AudioNative Player...
| TYPO3 | Geschätzte Lesezeit : min.

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

Zurück

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.

Wolfgang Wagner

Wolfgang Wagner

TYPO3 Trainer, Integrator und Berater TYPO3 Certified Integrator (TCCI)

Wolfgang Wagner – TYPO3 Seminare und Support · TYPO3 Education and Certification Committee · TCCI Task Force

Wolfgang Wagner arbeitet seit 2006 mit TYPO3 und ist unter wwagner.net als Trainer, Integrator und Berater aktiv. Schwerpunkt sind Schulungen, Online-Kurse und individuelle Beratung für Integratoren, Agenturen und Betreiber von TYPO3-Webseiten, die TYPO3 sauber, modern und wirtschaftlich einsetzen wollen. Er ist Mitglied im TYPO3 Education and Certification Committee und in der TCCI Task Force und gestaltet die offizielle TYPO3 Certified Integrator Prüfung aktiv mit.

Der TYPO3 Newsletter

TYPO3-Insights direkt in dein Postfach! 
Hol dir monatliche Updates, praktische Tipps und spannende Fallstudien. 
Übersichtlich, zeitsparend, ohne Spam. 
Bist du dabei? Jetzt für den Newsletter anmelden!

Trage dich hier ein, um den Newsletter zu erhalten.