Zum Inhalt springen
Marketing Factory Digital GmbH
Kontakt
Logo Marketing Factory Digital GmbH
  • Agentur
    • Aktuelles
    • Über uns
    • Geschichte
  • Leistungen
    • Beratung, Analyse und Strategie
    • Programmierung und Entwicklung
      • Schnittstellen
      • PIM-/ERP-Anbindungen
      • Individualentwicklungen
      • Seamless CMS Integration
    • Hosting und Betreuung
      • Cloud-Strategien
      • Hosting Partner der Marketing Factory
    • Leistungen mit Dritten
  • Technologie
    • TYPO3
      • Aktuelle TYPO3-Versionen
    • Shopware
    • IT-Sicherheit
      • DDoS-Protection
      • Continuous Upgrading
      • Privacy First
    • Tech Stack
      • Bekenntnis zu Open Source
      • Technologieauswahl
      • PHP-Ökosystem
      • Containerisierung & Clustering
      • Content Delivery Networks
      • Suchtechnologien
  • Referenzen
    • Projekte
    • Kunden
      • Kundenliste
    • Screenshot der Homepage der neuen Maxion Wheels WebsiteNEU: Relaunch der Corporate Website von Maxion Wheels
  • Community
    • Community-Initiativen
  • Blog
  • Kontakt
  • Deutsch
  • English

Sie sind here:

  1. Blog
  2. Anwenderfreundliche Individualisierungen des TYPO3-Backends
Screenshot des TYPO3-Backend: optimierte Vorschau eines Slider-Inhaltselements
  • TYPO3
  • Tutorial
  • Development
27.08.2024

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.

Übersicht

  • Die absoluten Basics
  • Zeigt jedem nur, was er benötigt
  • Felder ausblenden
  • Inhaltselemente deaktivieren
  • Gebt Hilfestellungen
  • Stellt Elemente nur dort bereit, wo sie sinnvoll sind
  • Verfügbarkeit von Inhaltselementen
  • Begrenzung weiterer Datensatz-Typen
  • Liefert sinnvolle Defaultwerte für Felder
  • Optimiert den Richtext-Editor (für einzelne Elemente)
  • Nutzt die Möglichkeiten zur Individualisierung
  • Hilfreiche Icons
  • Erweiterte TCA-Feldkonfigurationen
  • Spätestens mit Content Blocks: Erstellt optimierte Backend-Previews für Inhaltselemente
  • Überlegt euch eigene Lösungen
  • Schlusswort

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)
        }
    }
}
Zeige größere Version von: Backend-Schalter "Referent deaktivieren" mit ergänzender Beschreibung "Inaktive Redner sind im Auswahlfeld der Veranstaltungen nicht verfügbar."

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

Zeige größere Version von: Screenshot eines Backend-Layouts mit mehreren Inhaltsspalten sowie einem zweispaltigen Container-Element. In den Spalten werden die Konfigurationen gezeigt, mit denen die Verwendung von Inhaltselementen gesteuert wird.
Eine vereinfachte(!) Darstellung: In der oberen Inhaltsspalte wird ein einzelnes Element vom Typ "Keyvisual" erlaubt. Im Bereich "Main content" darf wiederum alles genutzt werden außer dem Keyvisual.
Das Container-Element besitzt eine große Spalte links, in der das Keyvisual sowie die Card Group nicht erlaubt sind. Verboten ist zudem die Verschachtelung mehrerer Container. In der rechten Spalte dürfen nur Text- und spezielle Teaser-Elemente verwendet werden.

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

Zeige größere Version von: Screenshot eines Auswahlfeld, bei dem das Icon eines blauen Farbtropfens neben der aktuellen Auswahl angezeigt wird

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. 👨‍🎨

Zeige größere Version von: Dieser Screenshot zeigt gleich zwei Colorpicker-Eingabefelder mit ergänzendem Auswahlfeld. Die zwei Farbwerte werden für den Light Mode und Dark Mode der Website verwendet. Beim zweiten Eingabefeld ist der Colorpicker eingeblendet. Die zwei Auswahlfelder zeigen jeweils den Text "Blue (primary color)". In den Feldern steht jeweils der Hexadezimalwert, der sich für die Farbschemas unterscheidet.
Colorpicker mit zusätzlichem Auswahlfeld für vordefinierte Farbwerte. Hier gleich zweimal nebeneinander, für die beiden Farbschemas unserer eigenen Website.

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.

Zeige größere Version von: Screenshot des Slider-Elements auf der Website
Frontend-Ausgabe des Sliders: Das erste, aktive Bild wird groß dargestellt. Die nachfolgenden Slides werden als Thumbnails am unteren rechten Rand angezeigt.
Zeige größere Version von: Screenshot des Slider-Elements im TYPO3-Backend
Die Vorschau im Backend: Durch das große erste Vorschaubild wird das Slider-Element sofort wiedererkannt.
Eine blaue Konfigurationsleiste unterhalb zeigt die aktuellen Autoplay- und Intervall-Einstellungen. Mit Klick auf die Leiste öffnet sich die Eingabemaske dieser beiden Felder.
Zeige größere Version von: Screenshot eines Accordion-Elements im TYPO3-Backend
Accordion-Darstellung im Backend: Für die einzelnen Einträge genügt die Ausgabe des Titels; das Pfeil-Symbol rechts dient nur zur Wiedererkennung und hat keine Funktion. Jeder Eintrag verlinkt auf seinen individuellen Bearbeitungsmodus.
Zeige größere Version von: Bearbeitungsmodus eines einzelnen Accordion-Eintrags. Sichtbar sind das Titelfeld und der Texteditor für den Beschreibungstext.
Wenn der Redakteur einen Accordion-Eintrag anklickt (linkes Bild), erhält er die Eingabemaske für dieses einzelne Element. Übersichtlich, oder?
Die gesamte Accordion-Gruppe kann er weiterhin über das Stift-Symbol am Element bearbeiten.

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.

Zeige größere Version von: Screenshot des Signet-Inhaltselements im TYPO3-Backend
In der Liste der Bildreferenzen sind die drei Einträge farbig markiert. Darunter kann der Redakteur die gewünschte Bildausrichtung wählen. Als Hilfestellung besitzt jede Ausrichtung ein Icon mit entsprechender farbiger Markierung der Positionen.
Zeige größere Version von: Screenshot der Signets im Frontend. Das erste, querformatige Signet steht zentriert in der ersten Zeile. Die zwei weiteren, hochformatigen Signets sind in der zweiten Zeile nebeneinander positioniert.
Die Ausgabe der Signets im Frontend ("Bester Arbeitgeber 2024" wurde als horizontales Beispiel fix selbstgebastelt 😅)

Ü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.

Sebastian Klein

Steht irgendwo zwischen Front- und Backend. Mit einem Faible für Usability und Dokumentation. Immer auf der Suche nach Good Practices.

Weitere Beiträge dieses Autors

Blog als RSS-Feed abonnieren

Verwandte Beiträge

  • Container-Elemente sinnvoll erweitern
  • Automatische Updates in unseren Projekten
  • Einbindung der Static Templates über das TYPO3-Sitepackage
  • Relaunch der Website unseres Kunden Maxion Wheels auf Basis von TYPO3 12.4 LTS

Wir freuen uns, wenn Ihr diesen Beitrag teilt.


Kommentare

Keine Kommentare gefunden.

Kommentar verfassen.

Ich bin darauf hingewiesen worden, dass die Verarbeitung meiner Daten auf freiwilliger Basis erfolgt und dass ich mein Einverständnis ohne für mich nachteilige Folgen verweigern bzw. jederzeit gegenüber der Marketing Factory Digital GmbH per Post (Marienstraße 14, D-40212 Düsseldorf) oder E-Mail (info@marketing-factory.de) widerrufen kann.

Mir ist bekannt, dass die oben angegebenen Daten so lange gespeichert werden, wie ich die Kontaktaufnahme durch Marketing Factory wünsche. Nach meinem Widerruf werden meine Daten gelöscht. Eine weitergehende Speicherung kann im Einzelfall erfolgen, wenn dies gesetzlich vorgeschrieben ist.

  • Datenschutzerklärung
  • Impressum

© Marketing Factory Digital GmbH

Bildnachweise
  1. "Screenshot: Single Select Color": © (MFD) / Marketing Factory Digital GmbH
  2. "Screenshot: Colorpicker": © (MFD) / Marketing Factory Digital GmbH
  3. "Screenshot: Slider Backend": © (MFD) / Marketing Factory Digital GmbH
  4. "Screenshot Slider Frontend": © (MFD) / Marketing Factory Digital GmbH