Direkt zum Seiteninhalt springen
b13 GmbH

Hauptstätter Str. 59
70178 Stuttgart
Germany +49 (0) 711 460 589 70 [email protected]
Localization Workspaces TYPO3

Die elegante Funktionalität von TYPO3-Overlays

Lokalisierung und Content-Staging meistern
Benni Mack
RSS Feed
Abstrakte Darstellung überlappender Browserfenster und UI-Elemente, die das Konzept von Overlays in der Webentwicklung veranschaulicht.

In diesem Blogbeitrag wird das Konzept des „Overlays“-Mechanismus in TYPO3 erklärt, mit einigen detaillierten Einblicken, wie die TYPO3 Core Engine mit dieser Funktion unter der Haube umgeht.

Einführung in Overlays

Overlays werden in zwei wichtigen Funktionen von TYPO3 verwendet:

  • Lokalisierung von Daten. Lokalisierung in ihrer einfachsten Form ist eine 1:1-Übersetzung jedes einzelnen Inhalts auf deiner Website.
  • Inhaltsbereitstellung von Daten („Workspaces“). Workspaces sind ein Mechanismus zum Hinzufügen oder Ändern von Inhalten, zur Vorschau und für einen definierten Veröffentlichungs-Workflow, bevor deine Besucher neue Inhalte auf deiner Website sehen.

Bühne frei für Overlays

Erstmalige Einrichtung: Nur Englisch, Live-Inhalte

Beginnen wir mit einem einfachen Beispiel: eine Website auf Englisch, ohne Übersetzungen und ohne Workspaces. Ein Inhaltselement (Datensatz des Typs „tt_content“) wird auf der Website in der „Standardsprache“ und als „Live-Datensatz“ angezeigt. In der Datenbank hat dieser Datensatz eine „uid“, eine numerische Darstellung des Inhalts, auf den verwiesen oder verlinkt werden kann. In unserem Beispiel hat dieser Datensatz die uid=13.

Screenshot des Originalelements im TYPO3-Backend
Inhaltselement in Standardsprache (uid=13).

Hinzufügen einer Übersetzung

Fügen wir nun eine zweite Sprache, beispielsweise „Hebräisch“, zur Website hinzu.

Als Nächstes aktualisieren wir unser Inhaltselement, indem wir den Inhalt ins Hebräische übersetzen. Dies ist die „übersetzte Sprache“ und es handelt sich immer noch um einen „Live-Datensatz“, sodass der Inhalt öffentlich ist, sobald wir auf die Schaltfläche „Speichern“ klicken.

Screenshot des übersetzten Elements im TYPO3-Backend
Inhaltselement, in eine andere Sprache übersetzt (uid=14).

Intern wird ein neuer Datensatz, uid=14, erstellt, der auf uid=13 als „Übersetzungs-Elternteil“ (normalerweise ein Feld namens „l10n_parent“) verweist, bei dem es sich um den „Standardsprache“-Datensatz handelt.

Hinzufügen eines Workspace zur Kombination

Fügen wir einen benutzerdefinierten Arbeitsbereich mit dem Namen „Staging-Arbeitsbereich“ hinzu, damit wir an unveröffentlichten Inhalten arbeiten können, ohne die Live-Website zu beeinträchtigen. Hier sehen wir alle Inhalte des aktuellen „Live-Arbeitsbereichs“, bis etwas geändert wird. Wenn etwas in der „Standardsprache“ geändert wird, wird eine Kopie dieses Datensatzes mit uid=15 erstellt. Diese Kopie, die wir „versionierter Datensatz“ nennen, befindet sich im Workspace ID=1 und ist mit dem „Live-Datensatz“ verbunden, der in der Datenbank in einem Feld namens „t3ver_oid“ (oid steht für Online-ID) gespeichert ist.

Screenshot eines aktualisierten Elements in einem TYPO3-Arbeitsbereich
Inhaltselement in Standardsprache, jetzt in einem TYPO3-Workspace (uid=14) bearbeitet.

Wir können nun eine Vorschau des geänderten („versionierten“) Inhalts anzeigen und auch die Übersetzung ändern. Auf diese Weise erhalten wir eine weitere Kopie (uid=16), diesmal aus der „Übersetzungssprache“ des „Live-Datensatzes“, wodurch dieser zum „versionierten Datensatz der Übersetzungssprache“ wird.

Screenshot der betroffenen Zeilen in unserem Beispiel in der Datenbank
Liste der Datenbankeinträge für unser Beispiel aus der TYPO3-Tabelle „tt_content“.

Die Mechanik und das Schöne an Overlays

Hier werden Overlays eingesetzt. TYPO3 verwendet Overlays im Hintergrund, wenn eine Seite mit Inhalten in einer Übersetzung oder in einem Arbeitsbereich (oder in beiden) in der Vorschau angezeigt wird.

Damit dies funktioniert, verfügt TYPO3 über ein „Context“-Objekt, in dem der aktuelle Workspace (ID) und die Sprache (ID) gespeichert sind. TYPO3 ruft zunächst immer die „Standardsprache des Live-Datensatzes“ ab (Sprache=0 und Workspace=0) und überprüft dann für jeden einzelnen Datensatz, ob es einen versionierten Datensatz dieser „Standardsprache“ gibt (durch Suche nach einem Datensatz mit „t3ver_oid=13“ und „t3ver_wsid=1“), und ersetzt alle Informationen dieses Datensatzes durch den versionierten Datensatz. Die tatsächliche „uid“ wird jedoch beibehalten.

Dies wird in TYPO3 als „Overlays“ bezeichnet. 
Wenn kein versionierter Datensatz gefunden wird, bleibt TYPO3 bei der Live-Version.

Die technische Raffinesse von Overlays: Durch das Beibehalten der „uid“ bleibt jede Referenz oder jeder Link zu diesem Inhalt weiterhin mit der „Live-Version“ verbunden, sodass TYPO3 nicht alle Links ersetzen und anpassen muss, wenn ein versionierter Datensatz erstellt wird.
Wenn der TYPO3-Editor die hebräische Übersetzung anfordert, sucht TYPO3 nach einem „Sprach-Overlay“ und prüft, ob in der „Live-Version“ ein Datensatz vorhanden ist, dessen „Übersetzungs-Elternteil“ auf uid=13 (die Live-Standardsprache) gesetzt ist. Im Staging-Workspace wird auch die hebräische Version auf einen versionierten Datensatz überprüft.

Eine vereinfachte Ansicht von Overlays sieht so aus:

Beispiel 1 – Hebräische Übersetzung des Live Workspace
  • Inhalt in der Standard-Sprache
    • Lokalisierter hebräischer Inhalt
Beispiel 2 – Hebräische Übersetzung im „Staging“ Workspace
  • Inhalt in der Standardsprache
    • Versionierter Datensatz
      • Lokalisierter hebräischer Inhalt
        • Versionierter Datensatz des lokalisierten Datensatzes

TYPO3 erledigt all dies im Hintergrund. Mit der TYPO3 Core API zum Lesen (PageRepository) und Schreiben (DataHandler) wird all dies für dich erledigt!

Vorteile des Overlay-Mechanismus

TYPO3 fragt immer zuerst die „Standardsprache“ des „Live Workspace“ ab.

Dies ist einer der Hauptgründe, warum das Konzept einer „Standardsprache“ und ihre Verbindung dazu existiert. Darüber hinaus ermöglicht dies eine weitere Funktion von TYPO3: Fallbacks.

Auch wenn man vor allem über Fallbacks im TYPO3-Ökosystem liest, sind Fallbacks eigentlich eine Folge von Overlays — eine Funktion, die möglich ist, weil TYPO3 auf Overlays aufbaut.

Wenn keine Sprachüberlagerung gefunden werden kann, kannst du entscheiden, was passiert.

Die sogenannten „Fallback-Modi“ bei der Konfiguration einer Seitensprache werden nun angewendet:

  • Strikt-Modus: Wenn keine hebräische Übersetzung gefunden wird, zeige nicht einmal die Standardsprache an. Der nicht übersetzte Inhalt wird einfach nicht angezeigt.
  • Fallback-Modus: Wenn keine hebräische Übersetzung gefunden wird, zeige die englische Version an.
  • Freier Modus: Die Standardsprache nicht abfragen (= keine Overlay-Technologie verwenden). Dies ist nützlich, wenn deine Sprache nicht an die Standardsprache gebunden ist.

Außerdem habe ich den Begriff „Floating Records“ geprägt — Datensätze innerhalb einer Übersetzung, die kein Overlay haben, können weiterhin gerendert werden. Stell dir ein Teaser-Element auf einer Seite vor, das nur in der polnischen Version angezeigt werden soll — das ist ein Floating Record. Dieser Datensatz folgt jedoch nicht der Sortierung und Reihenfolge des Overlay-Mechanismus.

In Workspaces werden nur geänderte oder neu erstellte Datensätze dupliziert.

Anstatt die gesamte Datenbank für die Versionierung zu klonen, verwaltet TYPO3 die versionierten Inhalte automatisch für dich, indem es nur die geänderten Inhalte kopiert.

Beim Veröffentlichen eines Workspace werden lediglich Inhalte ausgetauscht.

Während des Veröffentlichungsprozesses behält TYPO3 die „Live-Version“ bei und tauscht lediglich die geänderten Felder in die vorhandenen Live-Datenbankeinträge aus.

Zusammenfassung

Inzwischen solltest du verstehen, warum TYPO3 so leistungsstark ist. Die Verwendung der nativen APIs von TYPO3 erledigt alles für dich. Wenn du daran interessiert bist, dein Projekt gemeinsam mit uns zu betrachten, können wir prüfen, ob dein Projekt die TYPO3-APIs richtig nutzt. Ruf uns an. 

Kontakt aufnehmen

Geschrieben von:

Lächelnder Mann mit kurzen Haaren und einem Bart, der ein weinrotes Hemd trägt, steht in einer modernen Innenumgebung mit unscharfen Hintergrundelementen.

Der Mitbegründer von b13 und Leiter des TYPO3 CMS Core Developement, Benni Mack, bestimmt maßgeblich unsere technischen Best-Practises. Er ist zuständig für den Aufbau und die Wartung unserer technischen Infrastruktur und koordiniert unseren Beitrag zum Open-Source-Projekt. Sein wesentliches Werkzeug: TYPO3

Benni Mack CTO
mehr von Benni Mack

Ähnliche Artikel