Contao-Workflow optimieren: Praxistipps, Empfehlungen und KI für mehr Effizienz mit dem CMS
Ein praktischer Guide mit 14 konkreten Empfehlungen für mehr Freude am Arbeiten
Contao ist ein wunderbares CMS, mit dem man prima Inhalte verwalten und ausspielen kann. Es kommt von Haus aus bereits mit vielen Funktionen, bietet eine übersichtliche Benutzerführung und eine klare Trennung zwischen Daten und deren Ausgabe. Design und Layout lassen sich hervorragend über Themes, Sass und Templates erstellen. Es gibt Tausende Extensions, eine ordentliche Anzahl an fertigen Designs, eine Roadmap mit Releases aller 6 Monate und eine sehr aktive Community.
Alles hervorragende Grundlagen für Entwickler und Agenturen. Aber was ist mit den Menschen, die im Anschluss mit der Website arbeiten?
Die Wahl des CMS liegt oftmals in der Hand der Entwickler. Web-Designer und Agenturen nehmen immer wieder die gleiche Software - weil sie sich gut damit auskennen und eingespielte Workflows haben. Daran lässt sich nichts aussetzen, mit guten Argumenten lässt sich schließlich alles verkaufen. Am Ende aber müssen andere damit zurechtkommen. Der Erfolg eines Projekts hängt eben auch von der Zufriedenheit der Kunden ab.
Dieser Artikel gibt konkrete Tipps, wie die Arbeit mit Contao einfacher und effizienter gestaltet werden kann. Es geht um Konfigurationen, Erweiterungen und den Einsatz von Künstlicher Intelligenz.
Rechteverwaltung
Fangen wir mit einer einfachen, aber elementaren Optimierung an, der Rechteverwaltung. Manch einer wird sich fragen, was die Benutzerverwaltung mit einer Optimierung zu tun hat? Ganz einfach: eine Verbesserung der Übersichtlichkeit. Jemand, der nicht regelmäßig mit Contao arbeitet und nur gelegentlich Inhalte austauscht, der wird immer wieder vor dem Punkt stehen, sich neu zurechtfinden zu müssen.
Eine entschlackte Navigation, die nur noch die Funktionen anzeigt, die der Rolle wirklich entsprechen, erleichtert die Orientierung ungemein.
Was war gleich noch der Unterschied zwischen Artikel und Nachrichten? Wo finde ich den Text der einen Veranstaltung?
Wenn es keinen Newsbereich auf der Website gibt, dann macht es Sinn, diese Funktion für den Benutzer oder die Gruppe auszublenden. Umso weniger Menüpunkte, Seiten oder Inhalte angezeigt werden, umso kleiner ist die Gefahr, sich zu verirren.
Benutzergruppen und Benutzer
Contao ermöglicht es, Rollen für ganze Gruppen, die dann den einzelnen Benutzerkonten zugewiesen werden, anzulegen. Das macht eigentlich immer Sinn, als die Rechte für einzelne Benutzer zu setzen - selbst, wenn es am Anfang nur einen redaktionellen Benutzeraccount geben sollte.
Mit dieser Weitsicht lassen sich später weitere Konten mit denselben Rechten anlegen, ohne die Rechtevergabe im Einzelnen wiederholen zu müssen.
Der Vorteil von Benutzergruppen
Auf Benutzerebene lassen sich die Gruppeneinstellungen individuell anpassen! Dadurch entfällt das Anlegen einer zweiten oder dritten Benutzergruppe, nur weil sich die Rechte zwischen den Konten um nur einen Punkt unterscheiden.
Zugriffsrechte über alle Ebenen hinweg
Die Rechteverwaltung erlaubt es dir als Administrator, Sichtbarkeit und Zugriff auf bestimmte Module, Seiten, Artikel, Inhalte und sogar deren verschiedene Typen von Elementen einzuschränken. Außerdem lassen sich einzelne Formulare, deren Felder, die Dateiverwaltung samt festgelegter Ordner, einzelne Seiten, Seitentypen, News-sowie Event-Archive, Kalender und eigentlich alles explizit erlauben oder verbieten.
Selbst installierte Erweiterungen wie das Nodes-Modul, eine Cookie-Bar oder das Notification Center reihen sich wie selbstverständlich in die Verwaltung mit ein, ohne eine eigene Ansicht mitzuliefern. So befindet sich alles an einem Platz.
Wie oben bereits geschrieben, können die Rechte einer Gruppe für jeden Account beliebig angepasst werden.
Link zum Handbuch
Das Contao-Handbuch hält weitere Details bereit:
https://docs.contao.org/5.x/manual/de/benutzerverwaltung/benutzer/
TinyMCE konfigurieren
TinyMCE macht aus einer einfachen Textarea einen Rich Text Editor, mit dem man nicht nur Texte formatieren, Links erstellen oder die Ausrichtung ändern kann. Mit dem Plugin lassen sich auch Bilder oder Tabellen einfügen, Zeichen zählen oder komplette Templates als Vorlagen importieren.
Das ist eine wunderbare Sache, denn man muss sich nicht mit HTML auskennen, um seine Ziele zu erreichen. In der Standardkonfiguration kommt TinyMCE allerdings mit einigen Features daher, die für Frust sorgen können. Wenn der Redakteur mal wieder seiner Kreativität freien Lauf gelassen hat und wild mit Schriftarten, Schriftgrößen oder Farben gespielt hat, und das so gar nicht mit dem Design der Seite harmoniert, dann wird es Zeit für eine Anpassung!
Die Oberfläche von TinyMCE anpassen
Über das Template be_tinymce.html5 lässt sich der Editor so konfigurieren, dass Funktionen wie Schriftart, Schriftgröße, Liniendicke, Text- oder Hintergrundfarbe deaktiviert werden. Dafür lassen sich aber auch wichtige Funktionen als Button in die Toolbar aufnehmen oder das Kontextmenü aktivieren.
Das Template, welches die globale JavaScript-Konfiguration von TinyMCE enthält, muss im Root-Verzeichnis der Templates abgelegt werden, damit die Anpassungen greifen. Es erfordert etwas Recherchearbeit, die richtigen Namen der Funktionen herauszufinden, die in den Menüs und der Toolbar zum Einsatz kommen.
Wenn es nur darum geht, vorhandene Funktionen zu deaktivieren, dann hilft die Option removed_menuitems weiter.
removed_menuitems: 'fontfamily fontsize lineheight forecolor backcolor',
Wer dagegen das Menü oder die Toolbar mit weiteren Funktionen ergänzen möchte, der muss die Konfiguration komplett neu schreiben, was über die Properties menu und toolbar erreicht wird.
toolbar: 'undo redo | link unlink | placeholder | image | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
Die Contao-Dokumentation hält dafür einen eigenen Bereich vor: TinyMCE Editor Configuration.
Inhalte aus der Zwischenablage
Unverzichtbar ist die Funktion, eingefügten Text aus dem Clipboard nur ohne Formatierung zu übernehmen, was die Option paste_as_text übernimmt.
paste_as_text: true,
Damit gehören kaputte oder falsch formatierte Texte, die mit nicht sichtbaren HTML-Elementen und deren Styles übernommen werden, der Vergangenheit an.
Wer regelmäßig Texte aus Word-Dokumenten geliefert bekommt, die veröffentlicht werden sollten, der weiß wovon ich spreche.
Hilfe zur Konfiguration
Wem die Contao-Doku nicht ausreicht, wird in den Docs der Tiny Cloud alles weitere finden.
Eigene Platzhalter
Eines der Key Features von Contao sind Insert Tags, die als Platzhalter beim Rendern der Seite mit bestimmten Werten ersetzt werden. Es gibt Insert Tags, die Links erzeugen, Eigenschaften von Frontend-Mitgliedern anzeigen, Seiteneigenschaften bereitstellen, Bilder generieren oder Umgebungsvariablen der Website darstellen. Diesen Funktionsumfang können wir über eine Erweiterung ergänzen.
Für wiederkehrende Informationen, die wir immer wieder und an verschiedenen Stellen brauchen, eignen sich Platzhalter hervorragend.
Damit können kurze Texte, z.B. mit einem bestimmten Namen oder einem Datum für ein Event, Buttons zu einer zentralen Seite genauso wie komplette Texte mit Bildern gemeint sein. Der Vorteil dabei liegt klar auf der Hand: Nachdem der Platzhalter einmal zentral angelegt wurde, lässt er sich beliebig als Custom Insert Tag in Texten oder Frontend-Modulen platzieren und vermeidet somit Fehler und Copy & Paste.
Installation und Nutzung
Die Platzhalter kommen als Extension ins System und können über den Contao Manager oder das Terminal installiert werden. Einfach nach Platzhalter suchen oder per
composer require terminal42/contao-inserttags
über die Shell.
- Link: https://extensions.contao.org/?q=platzhalter&pages=1&p=terminal42/contao-inserttags
- Contao-Versionen: 4.13+ und 5.0+
Nach der Installation verwalten wir unsere eigenen Platzhalter zentral über den gleichnamigen Menüpunkt. Für jeden einzelnen Platzhalter können Regeln definiert werden, die ihn auf bestimmte Bedingungen, festgelegte Seiten oder Frontend-Mitglieder beschränken.
Eingesetzt werden sie anschließend als Custom Insert Tag in der Form
{{custom::placeholder_name}}
Ein weiterer Pluspunkt: Die Erweiterung fügt sich auch nahtlos in die Rechteverwaltung von Contao ein.
window.tinymce && tinymce.init({
...
setup: function(editor) {
editor.ui.registry.addMenuButton('placeholder', {
text: 'Platzhalter',
fetch: function(callback) {
const items = [
{
type: 'menuitem',
text: 'Next event',
onAction: () => editor.insertContent(`{{custom::next_event}}`)
}
];
callback(items);
}
});
},
...
<?php $this->block('toolbar'); ?>
toolbar: 'undo redo | link unlink | placeholder | image | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
<?php $this->endblock(); ?>
...
});
In der setup-Funktion wird ein neuer Menü-Button namens placeholder definiert, der weiter unten über die toolbar-Option an die gewünschte Stelle gesetzt wird. Weitere Hilfe findest du in der Doku vom Editor: https://www.tiny.cloud/docs/tinymce/5/custom-menu-toolbar-button/.
Zentrale, seitenübergreifende Inhalte organisieren
In die Kategorie "Wo finde ich nochmal ...?" fällt auch dieser Tipp. Mit Hilfe der Node-Erweiterung, zu deutsch Inhalts-Fragmente, werden beliebige Inhalte zentral über einen Menüpunkt gepflegt und verwaltet.
Dabei handelt es sich typischerweise um Content, der auf mehreren Seiten zum Einsatz kommt, z.B. im Header oder Footer aller Seiten. Anders als bei den Custom Insert Tags im Editor, reden wir bei Nodes eher über komplette Inhalte, die im Seitenlayout platziert werden, aber dennoch änderbar sein sollen. In den meisten Fällen haben eingeschränkte Benutzeraccounts aber keinen Zugriff auf das Seitenlayout, was dann zu einem kleinen Dilemma führt.
Über diese Taktik lassen sich Menüs, Logos, SEO-Texte oder Social Media-Links in Header und Footer editieren - genauso wie komplexere Seiteninhalte, die nicht als Platzhalter funktionieren. Denkbar sind aber auch Texte in Formularen, auf die sonst kein Zugriff besteht. Die Möglichkeiten sind vielfältig - auch für den Admin der Website.
Die Extension ist zurzeit für Contao 4.4+ und Contao 5.0x verfügbar und unter https://extensions.contao.org/?q=node&pages=1&p=terminal42/contao-node zu finden.
Seiten als Favorit setzen
Ein kleines, aber feines Gimmick hat mit Contao 5 Einzug gehalten: Die Favoriten.
Jede Userin und jeder User kann sich Deep Links als eigene Favoriten speichern. Ob es sich dabei um einen Artikel, einen Newsbeitrag, ein bestimmtes Event oder die Sammlung an FAQ's handelt, ist so ziemlich egal. Jede Route innerhalb von Contao lässt sich abspeichern und mit einem Namen versehen. So erspart man sich das lästige Durchhangeln zu den Inhalten, die man regelmäßig bearbeitet.
Ein Favorit lässt sich über das ☆ Stern-Symbol in der oberen Leiste anlegen. Alle vorhandenen Favoriten werden dann im Hauptmenü angezeigt, wo sie bequem erreichbar sind.
Arbeiten mit Styles und CSS-Klassen
Ein immer wiederkehrendes Problem ist die Arbeit mit verschiedenen Varianten eines Designs. Seien es so banale Dinge wie unterschiedliche Hintergrundfarben für Artikel, eine Hero-Section oder vielfältige Darstellungen von News-Teasern - dem Content Team wird dabei einiges abverlangt. Sobald Darstellungen variieren können oder ein Designsystem mit verschiedenen Komponenten zum Einsatz kommt, ist der Umgang mit CSS-Klassen gefragt.
An dieser Stelle kann man den einfachen Weg gehen, den Kolleginnen und Kollegen einen Styleguide in die Hand drücken und viel Glück wünschen. Oder aber wir investieren etwas Zeit in die Einrichtung einer maßgeschneiderten Auswahl an möglichen Styles und erhöhen dadurch den Komfort für alle.
Der CSS-Styles-Selektor
Die Extension Contao 4 Css Style Selector bundle, die für Contao 4.1+ und Contao 5.0+ verfügbar ist, schließt genau diese Lücke. Nach der Installation über den Contao Manager oder die Shell werden beliebige CSS-Stile angelegt.
Mit einer aussagekräftigen Bezeichnung und der Zuweisung zu bestimmten Elementen bekommen Redakteure ein starkes Werkzeug an die Hand, mit denen sie schnell und sicher die richtigen CSS-Klassen setzen. Selbst mit Responsivität oder Utility-Klassen lässt sich einfacher umgehen.
Der Style-Selektor ist für die Verwendung auf Elementebene gedacht. Das CSS wirkt sich dadurch auf komplette Artikel, deren Inhalte, Formulare & Co. aus.
Auswahl von eigenen Formaten im TinyMCE
Mit dem CSS Style Selector Bundle können wir eigene Formate für Contao-Elemente definieren. Für Formatierungen innerhalb von Texten benötigen wir jedoch eine weitere Anpassung des TinyMCE, die sich im späteren Betrieb aber voll auszahlen wird. Auch hier geben wir den Content Editoren eine kuratierte Liste an Möglichkeiten vor, aus denen später nur noch ausgewählt werden muss.
Zum Erstellen der Auswahlliste ergänzen wir das Template be_tinymce.html5. Hier hilft uns die Option style_formats weiter. Eigene Regeln lassen sich über das folgende Array erstellen:
style_formats: [
{
title: 'CSS-Stil Auswahl',
items: [
{
title: 'Style A',
classes: 'my-class-a'
},
{
title: 'Style B',
classes: 'my-class-b'
},
{
title: 'Style C',
classes: 'my-class-c my-class-c--modifier'
},
...
]
}
],
style_formats_merge: true,
Mit der Option style_formats_merge: true sorgen wir dafür, dass unsere neuen Styles zu den Standardformaten im Format-Menü hinzugefügt werden. Setzen wir style_formats_merge auf false oder ist sie nicht vorhanden, überschreiben wir das komplette Menü.
Neben der Erweiterung des Menüs können wir die neuen Styles auch als Dropdown zur Toolbar hinzufügen, indem wir der toolbar-Option das Keyword styles an der gewünschten Stelle hinzufügen:
toolbar: 'undo redo | link unlink | styles | image | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
Die Doku hilft bei weiteren Fragen: https://www.tiny.cloud/docs/tinymce/5/format-custom/
Effizient mit Bildern umgehen
Schnell noch das Bild für den neuen Artikel von der "Grafik" hochladen und dann veröffentlichen. Doch der Upload verweigert seinen Dienst, weil die Datei zu groß ist. Also muss zusätzlich das Bildbearbeitungsprogramm oder ein Cloud-Tool bemüht werden, bevor der Upload gelingt. Fehlt noch ein SEO-optimierter Alt-Text und der Artikel kann endlich online gehen. Am Ende ist eine halbe Stunde vergangen, die man lieber mit anderen Dingen verbracht hätte.
So oder so ähnlich erging es bestimmt jedem schon. Vielleicht sogar öfter als einem lieb ist.
Ein paar Einstellungen und 2-3 Extensions bieten Abhilfe, um den Umgang mit Bildern und anderen Dateien deutlich zu vereinfachen - und damit auch zu beschleunigen.
Upload optimieren
Contao bietet das Hochladen von Dateien per Drag'n'Drop an. Neben einzelnen Dateien lassen sich auch ganze Ordner in den Upload ziehen. Mit den richtigen Einstellungen ersparen wir uns die Nutzung eines zusätzlichen Tools, um Dateien per FTP oder SSH auf den Server zu laden.
In den System-Einstellungen werden die Bedingungen dafür definiert. Dort werden die erlaubten Dateitypen, die maximale Dateigröße und die maximale Bildbreite und -höhe festgelegt.
Welche Bildformate zum Upload erlaubt werden, hängt natürlich von den Bedingungen der Website ab. Mehr als JPG, PNG, WebP oder SVG werden vermutlich nicht benötigt, weshalb es eine Überlegung wert ist, GIF und andere Formate aus der Liste zu entfernen. Ganz so restriktiv müssen wir beim Upload aber nicht sein, denn in den Bildgrößen, die im Theme definiert werden, können wir eine automatisierte Konvertierung der Bildformate einstellen.
Interessant ist noch die Einstellung zur Dateigröße. Hier bietet es sich ebenfalls an, eher großzügiger als zu einschränkend zu sein, denn die Bildgrößen des Themes rechnen die Bilder im Anschluss herunter und optimieren so die Ladezeiten der Seiten. Ein Wert um die 10 MB, also 10485760 Bytes, hat sich in vielen Projekten bewährt. So lassen sich auch mal Bilder von Smartphones direkt und ohne Zwischenschritt uploaden.
Contao-Bildgrößen definieren
Über das Theme der Website erreichen wir die Bildgrößen. Passend zum Zweck und Einsatzort des Bildes im Frontend lassen sich dort beliebige Formate definieren.
Für meine Begriffe ist die Bezeichnung Bildgröße hier definitiv zu kurz gegriffen, denn einstellen lässt sich viel mehr als nur die reinen Abmessungen des Bildes. Wie im Bereich Upload optimieren bereits angedeutet, können wir über die Bildgrößen vielfältige Einstellungen vornehmen, die jedem Beteiligten allerhand Arbeit abnehmen. Einmal definiert, wählt die Redakteurin einfach nur die passende Bildgröße aus einer Liste aus und der Rest erledigt das System. Selbst dieser Schritt kann wegfallen, wenn das richtige Format bereits in den Modul-Einstellungen voreingestellt ist.
Für jede Contao-Bildgröße haben wir eine Vielzahl an Optionen, die uns zur Verfügung stehen:
- Standardbreite und -höhe
- Responsive Bildgrößen mittels Media Queries für unterschiedliche Auflösungen
- Nutzung bei bestimmten Pixeldichten
- Lazy Loading
- Formatkonvertierung, z.B. von GIF zu WebP oder
- Grad der Kompromierung bzw. die sich daraus ergebende Qualität
... um nur einige zu nennen. Gerade die Einstellungen für die responsiven Bildgrößen lassen viel Raum für Performance-Optimierungen.
Und das Beste ist:
Niemand vom Content Team muss sich mit den technischen Details auseinandersetzen, wenn es nicht sein muss!
Alt-Texte pflegen
Im Laufe der Zeit fallen eine Menge Dateien an, die meisten davon werden Bilder sein.
Contao ermöglicht es uns, die Metadaten einer Datei sehr detailiert zu bearbeiten, worunter neben dem Alt-Text auch Titel, Caption und eine Lizenz-URL fällt. Wir können diese Informationen sogar für jede Sprache einzeln setzen. Leider aber sehen wir in der Dateiverwaltung nicht, ob ein Bild bereits ein Alt-Text hat oder nicht. In diese Lücke springt die Erweiterung Contao Alt Editor Bundle, hier der Link dazu: https://extensions.contao.org/?q=contao+alt+text&pages=1&p=lukasbableck/contao-alt-editor-bundle.
Nach der Installation über den Contao Manager oder Composer weist der neue Menüpunkt Alt-Text Editor den Weg zu Dateien ohne Alternativtexte, um diese schnellstens zu schreiben. Ein sehr nützliches Tool, um nicht den Überblick zu verlieren.
Die Extension ist ab Contao 5.3+ installierbar.
Alt-Texte mit Hilfe von Künstlicher Intelligenz generieren lassen
Bildbeschreibungen zu verfassen kann aufwendig und zeitraubend sein - vor allem, wenn sie mit bestimmten Keywords zur SEO-Optimierung ausgestattet sein sollen. Auch hier hilft uns eine Extension weiter.
Wer immer wieder viele Alternativtexte für Bilder erstellen muss, könnte darüber nachdenken, diese Aufgabe für etwas Geld an eine KI auszulagern. Die Erweiterung SEO Alt Text Generator bindet einen Cloud-Dienst an, der automatisch - auch für ganze Ordner-Uploads - SEO-optimierte Texte generiert.
Die Ergebnisse können sich sehen lassen. Zum Testen habe ich dieselben Bilder benutzt wie bei meinen Recherchen zum Blog-Post Alt-Texte generieren mit Künstlicher Intelligenz. Damals waren die generierten Texte bei vielen kostenlosen Diensten durchaus gut bis sehr gut, aber noch ausbaufähig. Wie sich die KI hinter dem Dienst des SEO Alt Text Generators schlägt, teile ich hier, damit sich jeder selbst ein Bild machen kann. Alle generierten Texte sind auf Deutsch und ohne vorgegebenen SEO-Keywords. Die KI soll den reinen Inhalt des Bildes erkennen und beschreiben.
Lesetipp
Eine nützliche Hilfe zum Erstellen von Alt-Texten ist KI. Es gibt einige wenige hilfreiche Dienste, die teils kostenfrei benutzbar sind oder auch in das eigene CMS integriert werden können. Wer sich näher mit dem Thema KI und Alt-Texte beschäftigen möchte, dem sei der folgende Beitrag empfohlen.
Artikel lesen: Alt-Texte generieren mit Künstlicher Intelligenz
Das erste Bild in der Reihe erkennt die KI korrekt und liefert als generierten Text Ein umgedrehter Bus steht vertikal neben einer Palme vor modernen Hochhäusern in einer australischen Stadtlandschaft. ab.
Die Frau im Bild wird mit Eine Frau mit wehenden Haaren posiert vor einem rosa Hintergrund für das Brisbane Comedy Festival. erkannt.
Auch das Ergebnis zum dritten Bild entspricht dem Inhalt relativ gut. Nach der Analyse wurde der Text
Eine lebendige Website für eine Webdesign-Agentur zeigt eine auffällige pinke Blume und frische grüne Blätter im Hintergrund.
zurückgeliefert.
Beim letzten Bild ist die Angabe Ein beeindruckender Felsvorsprung im Grampians-Nationalpark bietet einen atemberaubenden Ausblick über die Landschaft. eine treffende Beschreibung des Bildinhalts.
Die Extension ist für Contao 4.13+ und 5.0+ zu haben. Um den Dienst zu nutzen, muss man sich registrieren, einen API Key erstellen und diesen in den System-Einstellungen hinterlegen. Jede Nutzung kostet einen Credit, was derzeit einem Cent entspricht. Die ersten 25 Credits sind kostenlos.
Zusammenfassung
Es gehört nicht allzu viel dazu, Contao so einzurichten, dass die Arbeit mit Inhalten schneller und effizienter wird. Vieles bietet Contao von Haus aus und muss "nur" eingerichtet werden.
Durch gezielte Optimierungen - etwa eine schlanke Benutzer- und Rechteverwaltung, angepasste TinyMCE-Konfigurationen, zentrale Inhalte mit Platzhaltern oder Nodes sowie strukturierte Arbeit mit Bildern - lassen sich viele Prozesse vereinfachen. Wichtig dabei: Jede Maßnahme zielt darauf ab, Routineaufgaben zu beschleunigen, Fehlerpotenzial zu reduzieren und die Freude am Arbeiten zu erhöhen. Wer diese Schritte konsequent umsetzt, kann mit Contao eine Umgebung schaffen, die sowohl technisch als auch organisatorisch überzeugt. Und die Spaß macht!