Anwenderfreundliche Individualisierungen des TYPO3-Backends
“TYPO3 ist zu kompliziert!” – das haben wir alle schon irgendwann gehört oder gelesen. Und ja, in manchen Punkten mag die Kritik durchaus berechtigt sein. Oft haben Redakteure aber schlechte Erfahrungen gemacht, die eher auf ein stiefmütterlich behandeltes TYPO3-Backend zurückzuführen sind.
Außen hui, innen pfui?
Wir haben leider schon (zu) oft TYPO3-Installationen übernommen und gesehen, bei denen viel Wert auf ein stylisches Frontend gelegt wurde, aber keinerlei Anpassungen im Backend vorgenommen wurden.
Der Kunde wird mit einem überfrachteten System alleine gelassen, wobei viele Standard-Funktionen des TYPO3-Core im Frontend keinerlei Auswirkungen haben. “Layout 1” im Inhaltselement? Das gehört entfernt (oder umbenannt, sofern es denn wirklich genutzt wird).
Lasst uns daher einmal anschauen, was wir im TYPO3-Backend alles konfigurieren und verbessern können.
Die absoluten Basics
- Nutzt Backend-Benutzergruppen, um Zugriffsrechte sinnvoll zu definieren und zu beschränken. Kein Redakteur sollte Administrationsrechte besitzen.
- Installiert die Backend-Sprachen, die eure Redakteure sprechen. Und liefert Übersetzungen für eure projektspezifischen Elemente und Felder.
Zeigt jedem nur, was er benötigt
Der TYPO3-Core stellt bereits eine ganze Reihe von Inhaltselementen, Datensatztypen und Modulen zur Verfügung. Die einzelnen Datensätze besitzen teils sehr viele Felder und Optionen für verschiedenste Anwendungsfälle.
Vieles davon ist nicht in jedem Projekt relevant. Manches muss nur einem ausgewählten Personenkreis bereitgestellt werden.
Grundsätzlich sollten die Zugriffsrechte über Backend-Benutzergruppen konfiguriert werden. Wenn Felder gar nicht in Anwendung sind, sollten sie per Page TSconfig zusätzlich komplett ausgeblendet werden – das hilft auch uns Administratoren und Integratoren bei der langfristigen Betreuung.
Felder ausblenden
Manche Felder sind wohl nur noch aus historischen Gründen in TYPO3 enthalten, andere werden nur in Ausnahmefällen benötigt. Die vier Felder aus den Seiteneigenschaften sind hier exemplarisch genannt:
TCEFORM {
pages {
layout.disabled = 1
keywords.disabled = 1
author.disabled = 1
author_email.disabled = 1
}
}
Felder lassen sich bei Bedarf auch nach Element-Typ (z.B. dem CType) deaktivieren oder anpassen. Hiermit wird das Subheader-Feld für alle Inhaltselemente außer “Überschrift” und “Text” ausgeblendet:
TCEFORM {
tt_content {
subheader.disabled = 1
subheader.types {
header.disabled = 0
text.disabled = 0
}
}
}
Inhaltselemente deaktivieren
Auch die verfügbaren Inhaltselemente lassen sich per Page TSconfig konfigurieren. Wir bevorzugen an dieser Stelle keepItems
(statt removeItems
). So haben wir eine bessere Kontrolle und Übersicht darüber, welche Inhaltselemente am Ende verfügbar sind.
Zudem gruppieren wir uns die Elemente anhand ihrer Quelle bzw. ihres Typs:
TCEFORM {
tt_content {
CType {
# TYPO3 Core:
keepItems = header, text, uploads, list, form_formframework, menu_sitemap_pages, shortcut
# Container:
keepItems := addToList(container_1col, container_2col_50_50, container_3col)
# Sitepackage:
keepItems := addToList(hero, quote, card_group, timeline, accordion)
# Third-party extensions:
keepItems := addToList(news_pi1, news_newsdetail)
}
}
}
Gebt Hilfestellungen
Manche Optionen sind besser verständlich, wenn zum Feld-Label auch eine kurze Beschreibung gegeben ist. Diese kann man per TCA, aber auch mit Page TSconfig ergänzen.
TCEFORM.tx_myextension_domain_model_speaker {
hidden.description = LLL:EXT:sitepackage/Resources/Private/Language/Backend.xlf:tx_myextension_domain_model_speaker.hidden.description
}
Stellt Elemente nur dort bereit, wo sie sinnvoll sind
Verfügbarkeit von Inhaltselementen
Mit der Extension “content_defender” könnt ihr steuern, welche Inhaltselemente in Backend-Layouts (und Container-Elementen) verwendet werden dürfen.
Inhaltselemente (CType
), aber auch Plugins (list_type
) lassen sich bei Bedarf in jeder Inhaltsspalte explizit erlauben oder verbieten. Auch die maximale Anzahl von Elementen in einer Spalte ist definierbar.
Damit könnt ihr die korrekte Anwendung eurer Inhaltselemente sicherstellen:
- Es kann Hero-/Header-Elemente geben, die nur zu Beginn der Seite eingesetzt werden sollen
- Verschachtelte Container-Elemente (oder Gridelemente) können zu Problemen im Layout führen
- Komplexere Inhaltselemente sind in schmalen Spalten oft fehl am Platz; etwa eine selbst schon mehrspaltige Card Group
- Spezielle Inhaltselemente könnten beispielsweise nur für den Einsatz in einer Seitenleiste oder in mehrspaltigen Containern vorgesehen sein
Begrenzung weiterer Datensatz-Typen
Ihr habt eine Seite vom Typ “Ordner” angelegt, in denen Redakteure Veranstaltungen zentral pflegen können. Warum sollte er dort auch Glossareinträge anlegen können? Beschränkt die Erstellung neuer Elemente in den Seiteneigenschaften mit Page TSconfig:
mod.web_list {
allowedNewTables = tx_myextension_domain_model_event, sys_note
}
Generell gilt: Globale Konfigurationen gehören ins Sitepackage (dateibasiert und versionierbar). In einzelnen Bereichen des Seitenbaums angewendete TSconfig-Einstellungen dürfen hingegen durchaus in den Seiteneigenschaften (also in der Datenbank) gesetzt werden. Conditions im Sitepackage sind auch möglich – den besten Lösungsweg könnt ihr fallabhängig wählen.
Liefert sinnvolle Defaultwerte für Felder
Bleiben wir beim oben genannten Beispiel der Veranstaltungen. Diese sind im Projekt umfangreicher, daher habt ihr jetzt für jede Veranstaltungsart (Webinar, Workshop, Messe, …) einen eigenen Ordner erstellt.
In jedem Ordner könnt ihr mit Page TSconfig nun individuelle Standardwerte für Veranstaltungen setzen: den Typ, die Workshop-Sprache – alles, was für die Veranstaltungsart mehrheitlich gilt.
TCAdefaults.tx_myextension_domain_model_event.event_type = webinar
TCAdefaults.tx_myextension_domain_model_event.workshop_language = de
So schnell habt ihr euren Redakteuren wieder etwas Arbeit abgenommen.
Optimiert den Richtext-Editor (für einzelne Elemente)
Generell gilt: Der Texteditor sollte auf das jeweilige Projekt zugeschnitten werden. Die notwendigen Textstile und alle weiteren Optionen lassen sich per YAML konfigurieren.
Es gibt aber schnell Anwendungsfälle, bei denen der “große” RTE zu viele Freiheiten bietet. Im Textfeld eines Teaser-Elements werden vielleicht Fettschreibung und das Soft-Hyphen benötigt. Eine Tabelle eher nicht.
In einigen Fällen sind auch Links im Richtext-Feld nicht sinnvoll – etwa, wenn das gesamte Element im Frontend bereits durch ein separates Linkfeld verlinkt wird.
Daher sollte für solche Fälle immer eine separate RTE-Konfiguration erstellt und dem Element zugewiesen werden (Dokumentation). Der so reduzierte Texteditor entlastet den Redakteur, vermeidet Fehler und Missverständnisse.
Nutzt die Möglichkeiten zur Individualisierung
Hilfreiche Icons
Icons können den Redakteur bei der Pflege unterstützen. Ein gutes Beispiel sind Auswahlfelder für (Bild-)Ausrichtungen oder Hintergrundfarben.
Im TCA lässt sich ein optionales Icon für Select-Felder einfach ergänzen:
'backgroundcolor' => [
'label' => 'Background color',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
[
'label' => 'None',
'value' => '',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Settings/color-none.svg'
],
[
'label' => 'Blue',
'value' => 'blue',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Settings/color-blue.svg'
],
[
'label' => 'Orange',
'value' => 'orange',
'icon' => 'EXT:sitepackage/Resources/Public/Icons/Settings/color-orange.svg'
]
]
],
'l10n_mode' => 'exclude',
],
Die Icons könnten jeweils ein einfaches SVG mit eingefärbtem Rechteck sein:
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="#5930ab" x="0" y="0" width="18" height="18"/>
</svg>
Man darf natürlich auch etwas mehr Zeit und Liebe investieren und einen Farbtropfen oder vergleichbares Symbol verwenden. 👨🎨
Erweiterte TCA-Feldkonfigurationen
Ihr könnt auch ein Auswahlfeld mit einem Colorpicker verbinden, falls der Redakteur bei der Farbwahl mehr Freiheiten genießt.
Worauf ich mit diesem Beispiel hinaus will: Schaut euch an, was TYPO3 alles an möglichen Feld-Konfigurationen bietet. Installiert euch die Styleguide-Extension, die eine große Anzahl von TCA-Beispielen umfasst.
Spätestens mit Content Blocks: Erstellt optimierte Backend-Previews für Inhaltselemente
Wer eigene Inhaltselemente mit Content Blocks erstellt, wird die EditorPreview.html im Source-Verzeichnis gefunden haben. Mit diesem Fluid-Template war es noch nie so einfach, die Backend-Vorschau eines Inhaltselementes individuell zu konfigurieren und zu gestalten.
Zwei große Vorteile sehe ich hier:
1. Wiedererkennbares Aussehen
Die Backend-Vorschau der Inhaltselemente kann das Design im Frontend widerspiegeln. Auf diese Weise findet der Redakteur schnell die Stelle, die er überarbeiten möchte.
Das Frontend-Styling sollte für die Darstellung im Backend etwas angepasst werden: Schriftgrößen können verringert werden; der Aufbau darf durchaus abweichen.
Bei einem Slider-Element könnte man die einzelnen Slides beispielsweise in einem Grid anordnen und den ersten, zuerst sichtbaren Slide dabei größer darstellen.
Wer braucht da noch Frontend-Editing?
2. Individuelle Editierfunktionen
Per Default ist der Vorschautext verlinkt mit dem gesamten Inhaltselement. Dies lässt sich über ViewHelper aber bequem anpassen.
Bei Inhaltselementen wie Accordions oder Card Groups, die Inline-Elemente (IRRE) besitzen, können wir in Fluid die einzelnen Kindelemente direkt verlinken. So kann der Redakteur eine einzelne Card bearbeiten, ohne die ganzen Felder des Elternelements oder die weiteren Cards beachten zu müssen. Ein Beispiel hierfür bringt Content Blocks bereits mit. Gerade bei Inline-Elementen mit einer größeren Anzahl von Feldern wird die Eingabemaske dadurch übersichtlicher.
Was sich bei einigen Inhaltselementen ebenfalls anbietet, ist die Ergänzung einer Konfigurationsleiste. Hier könnt ihr den Bearbeitungsmodus für eine frei definierte Liste von Feldern verlinken. Bei einem Slider-Element könnten das beispielsweise die Einstellungen Autoplay und Intervall sein. Bei einer Card Group entsprechend die Cards pro Reihe und eine ggf. pflegbare Hintergrundfarbe.
Überlegt euch eigene Lösungen
Manchmal stößt man trotz aller bereitgestellten Konfigurationen an Grenzen. Da es genug APIs im Core gibt, können wir Sonderfälle dennoch umsetzen. Möglich sind etwa eigene TCA-Feldtypen (durchaus aufwändiger). Manchmal genügt aber schon eine Prise CSS.
Ein einfaches Beispiel aus unseren Projekten:
Bei einem unserer Kunden werden an bestimmten Stellen der Website zwei bis vier Signets ausgegeben. Für Fälle mit starken Hoch- oder Querformaten gibt es verschiedene Bildausrichtungen.
- Im Frontend nutzen wir dazu ein variables CSS-Grid
- Im Backend haben wir für jede Ausrichtung ein Icon mit farbigen Flächen ergänzt – wie oben beschrieben eine Standard-Funktion des TCA, technisch identisch zur Bildausrichtung bei “Text & Medien”
- Die vertikal gelisteten Bildreferenzen werden mit diesen Farben markiert, damit die Zuordnung deutlich wird – hierzu haben wir einfach ein eigenes Stylesheet im Backend ergänzt
Schlusswort
Die hier präsentierten Konfigurationen zeigen längst nicht alle Möglichkeiten. Blättert daher einfach mal durch die TSconfig-Dokumentation und installiert euch die Styleguide-Extension. Ihr werdet dort viele Anregungen finden, wie ihr euer TYPO3-Projekt für Redakteure einfacher, logischer und ansprechender gestalten könnt. Eure Kunden werden es euch danken.
Wir freuen uns, wenn Ihr diesen Beitrag teilt.
Kommentare
Keine Kommentare gefunden.