Logo

Handbuch TYPO3

Inhaltsverzeichnis

  1. Einleitung
    1. Was ist TYPO3?
    2. Die Begriffe "Backend" und "Frontend"
    3. Der Cache
    4. Optimale Browser
  2. Das Backend
    1. Login
    2. Übersicht
    3. Modulleiste
      1. Überblick
      2. Seite
      3. Anzeigen
      4. Liste
      5. Dateiliste
    4. Navigationsleiste
    5. Arbeitsbereich
    6. Kopfleiste
  3. Mit Seiten arbeiten
    1. Seitentypen
    2. Symbole im Seitenbaum Arbeitsbereich
    3. Seitenkontextmenü
    4. Seiten anlegen
      1. Im Modul Seite
      2. Im Modul Liste
      3. Mehrere Seiten erstellen
    5. Seiten verbergen und freigeben
    6. Seiten im Seitenbaum verschieben
    7. Seitenvorschau
    8. Seite löschen
    9. Seiteneigenschaften
      1. Symbole für das Bearbeitungsformular
      2. Das Seitenformular
    10. Menü-Teaser
    11. Seiten übersetzen
  4. Mit Inhaltselementen arbeiten
    1. Was ist ein Inhaltselement?
    2. Symbole im Inhaltsbereich
    3. Inhaltselemente hinzufügen
    4. Inhaltselemente kopieren
    5. Inhaltselemente ausschneiden
    6. Inhaltselemente verbergen
    7. Inhaltselemente löschen
    8. Text & Medien
      1. Bild hinzufügen
    9. Akkordeon
      1. Akkordeon-Einträge anlegen
      2. Akkordeon-Einrag mit Informationen befüllen
    10. Text Teaser ohne Icon
    11. Linkliste
    12. Liste Downloads/Materialien
    13. Fakten-Modul
    14. Teaser
      1. Highlight Teaser
      2. 3er Teaser
    15. Bühnenslider
      1. Statischer Inhalt
      2. Content aus der DWI-DB
      3. Videoanleitung
    16. Podcast
    17. Podcast-Liste
  5. DWI-DB: Contentpool
    1. Konzept
      1. Übersicht
      2. Erkunden
      3. Temporäre Abfrage
      4. Wiederverwendbare Abfragen (Reusable Request)
      5. Registrierte Templates
      6. Reusable Request Plugin
      7. Videoanleitung
    2. Endpunkte
  6. FAQ
  7. Glossar

Einleitung

Das Handbuch ist aktuell noch in Überarbeitung!

Das vorliegende Handbuch liefert eine allgemeine Einführung zum Umgang mit dem Content Management System (CMS) TYPO3 für Redakteure. Die ersten Kapitel beschreiben dabei projektunabhängig die TYPO3 Version 12, während sich die daran anschließenden Kapitel auf projektspezifische Besonderheiten beziehen. Im letzten Kapitel Glossar finden Sie eine Übersicht über die geläufigsten Symbole und deren Bedeutung im Backend aufgelistet.

Das Handbuch ist als Nachschlagewerk konzipiert, um den Redakteur bestimmte Fragen zu beantworten. Deshalb gibt es an manchen Stellen Dopplungen, die bei chronologischem Durcharbeiten des Handbuchs nicht notwendig wären.

Was ist TYPO3?

TYPO3 ist ein Open-Source Content-Management-System. Open-Source bedeutet, dass der Quelltext für jeden frei verfügbar ist und von jedem für seine Zwecke abgeändert werden kann. TYPO3 ist hauptsächlich in der Programmiersprache PHP geschrieben. Die Entwicklung wurde 1997 von Kasper Skårhøj begonnen und wird seit 2001 als Open-Source Projekt von vielen Entwicklern vorangetrieben. Mittlerweile ist die aktuelle Long-Term-Support-Version TYPO3 12.4 LTS.

Die Begriffe "Backend" und "Frontend"

Mit dem Begriff "Backend" wird die Benutzeroberfläche bezeichnet, in welcher verschiedene Aufgaben zur Konfiguration der Webseite erledigt werden können. Darunter fallen beispielsweise das Anlegen, Berabeiten und Löschen von einzelnen Seiten oder das Hinzufügen von Bildern und verschiedenen Inhaltselementen. Der Begriff "Frontend" meint hingegen die Webseite an sich. Also das, was der Besucher sieht, wenn er eine bestimmte Seite ansteuert.

Der Cache

TYPO3 verwendet verschiedene Caches. Caches sind Zwischenspeicher, die bestimmte Daten abspeichern, da ansonsten bei jeder Verwendung eine Neuberechnung notwendig wäre. So werden beispielsweise die Inhalte einer bestimmten Seite zwischengespeichert, um zu verhindern, dass für jeden neuen Besucher der Seite neu berechnent werden muss, welche Inhalte die Seite anzeigen soll. Daher kann es manchmal notwendig sein, den Frontend-Cache zu löschen, damit eine Änderung an den Inhaltselementen auch angezeigt wird.

Optimale Browser

Grundsätzlich kann das Backend in folgenden, aktuellen Versionen der Browser betrieben werden:

  • Chrome
  • Firefox
  • Safari
  • Mircosoft Edge

Am empfehlenswertesten sind dabei die aktuellsten Versionen von Chrome und Firefox, da diese erfahrungsgemäß am wenigsten Probleme verursachen.

Das Backend

Login

Der Zugang zum TYPO3 Backend ist durch einen Login-Maske beschränkt. Diese erreichen Sie, wenn Sie zu der vollständigen Adresse der Webseite (z.B. www.beispiel-webseite.de) noch /typo3 hinzufügen. Also: 'www.beispiel-webseite.de/typo3. Um sich anzumelden, müssen Sie in der Login-Maske lediglich auf den Button Im Backend anmelden klicken.

Übersicht

Kopfleiste

Die Kopfleiste oben rechts im Backend dient zum schnellen Zugriff auf einige wichtige Funktionen des TYPO3-Backends, unabhängig davon, in welchem Modul Sie sich gerade befinden.

Modulleiste

Im linken Bereich des Backends befindet sich die Modulliste. Hier wird der gewünschte Arbeitsbereich ausgewählt. Die Module sind unterteilt in Haupt- und Untermodule.

Navigationsleiste

Rechts neben der Modulleiste befindet sich die Navigationsleiste. Sie bildet vorwiegend den Seitenbaum der Website ab.

Arbeitsbereich

Der Inhalts-/Arbeitsbereich im TYPO3 Backend befindet sich immer auf der rechten Seite. Hier können Sie Inhalte einstellen/bearbeiten.

Modulleiste

Der Zugriff auf die einzelnen Module ist abhängig von den Rechten, die der einzelne Redakteur besitzt. Administratoren haben Zugriff auf alle verfügbaren Module.

Überblick

Web

  • Seite: Seiten und Seiteninhalte können angelegt und bearbeitet werden
  • Anzeigen: stellt die Frontend-Ansicht im Inhaltsbereich des Backendes dar 
  • Liste: zeigt alle Datensätze der ausgewählten Seite an

Datei

  • Dateiliste: Dateien, Bilder und Videos können hier hochgeladen, verschoben oder gelöscht werden

Seite

In diesem Modul können Sie die Seiten anlegen, bearbeiten und löschen. Im Arbeitsbereich können Sie außerdem Inhaltselemente auf den jeweiligen Seiten anlegen, bearbeiten und löschen.

Anzeigen

Mithilfe dieses Moduls können Sie sich anzeigen lassen, wie die einzelnen Seiten im Frontend für den Besucher der Webseite aussehen. Das Anzeige-Modul ermöglicht somit die Betrachtung der Frontend-Ansicht ohne das Backend zu verlassen bzw. eine neue Seite öffnen zu müssen.Dabei können Sie zwischen verschiedenen Formaten und Größen wechseln, um beispielsweise zu prüfen, wie die Seite ausgegeben wird, wenn Sie in einem Smartphone oder Tablet aufgerufen wird. Zur diesem Modul gibt es keine weitere Dokumentation, denn die Bedienung ist selbsterklärend und sehr intuitiv.

Liste

In diesem Modul finden Sie Seiten, Inhaltselemente und Datensätze in Tabellenform dargestellt. Sie können hier ebenso wie im Modul Seite Seiten anlegen, berbeiten und löschen. Darüber hinaus ist dasselbe auch mit Inhaltselementen möglich. Im Gegensatz zum Modul Seite können Sie je nach Ihren Benutzerrechten auch noch andere Datensätze anlegen. Dazu zählen beispielsweise Kategorie, News-Datensätze oder Datensätze für andere Erweiterungen. Meistens sind im Seitenbaum spezielle Ordner angelegt, die für genau eine Art dieser Datensätze bestimmt sind.

Dateiliste

Innerhalb dieses Moduls können Sie die notwendigen Dateien für Ihre Webseite verwalten. Da es bei vielen Dateien sehr schnell unübersichtlich wird, gibt es die Möglichkeit, Ordner anzulegen. Somit kann eine übersichtliche Struktur angelegt werden, um Dateien und Bilder möglichst schnell zu finden.

Navigationsleiste

In diesem Bereich wird die jeweilige Navigation des ausgewählten Moduls angezeigt. Im Modul Seite wird beispielsweise der Seitenbaum der Webseite angezeigt. Je nach Rechten des Redakteurs können hier auch nur einzelnen Seitenbäume oder Seiten der Webseite angezeigt werden.

Den Seitenbaum kann man sich wie einen Baum mit Ästen, die wiederum Äste haben können, welche wiederum Äste haben können, usw. vorstellen. An oberster Stelle steht die Hauptseite, von welcher alle anderen Seiten ausgehen. Jede Seite kann dabei mehrere Unterseiten besitzen, welche wiederum Unterseiten besitzen können.

Arbeitsbereich

In diesem Bereich werden je nach ausgewähltem Modul unterschiedliche Dinge angezeigt. Im Modul Seite sieht man beispielweise die Inhaltselemente auf der jeweiligen Seite, während man im Modul Dateiliste den Inhalt des ausgewählten Ordners sieht.

Kopfleiste

Die Kopfleiste stellt verschiedene Funktionen und Informationen bereit. Über das Kachel-Icon auf der linken Seite können Sie die Modulansicht auf- und zuklappen. Im zugeklappten Zustand sind nur die Symbole der jeweiligen Module zu sehen. Im Bereich mit dem TYPO3 Logo wird der Name der Webseite und die verwendete TYPO3 Version angezeigt (im Beispielbild DKFZ Intranet TYPO3 Version 11.5.16). Auf der rechten Seite finden Sie folgende Funktionen in der Kopfleiste:

  • Lesezeichen, die Sie bereits angelegt haben.
    Sie finden das Sternsymbol auf jeder Seite im Backend und können per Klick auf das Icon Lesezeichen anlegen.
  • Cache löschen, damit eine Änderung an den Inhaltselementen auch angezeigt wird.
  • Geöffnete und kürzliche verwendete Dokumente
  • Hilfe mit Schnellzugriff auf Redakteurshandbuch, Styleguide sowie allgemeine Informationen zum TYPO3 CMS
  • Benutzername und Ihr Nutzerbild
    Je nach Ihren Benutzerrechten können Sie hier mit Klick auf Ihren Namen die Benutzereinstellung öffnen.
  • Suche, mit welcher Sie im gesamten System nach Seiten, Inhaltselementen, Dateien oder Datensätzen suchen können.

Mit Seiten arbeiten

Seitentypen

Je nach Ihren Benutzerrechten werden Ihnen verschiedene Seitentypen angezeigt. Grundsätzlich ist für die meisten Redakteure nur die Standard Seite relevant.

  • Wurzel-Seite: Normale Standard Seite, welche den Anfang eines Seitenbaums darstellt.
  • Standard: Stellt die normale Standard Seite dar.
  • Backend-Benutzerbereich: Wird für Seiten benutzt, die nur im Backend angesehen werden können. 
  • Verweis: Beinhaltet einen Link/Verweis auf eine andere, interne Seite.
  • Einstiegspunkt: Verweist ebenso wie der Verweis auf eine andere Seite.
  • Link zu externer URL: Wird benutzt, um einen Verweis/Link auf eine externe Seite hinzuzufügen.
  • Ordner: Wird benutzt, um Datensätze abzulegen (z.B. Artikel Datensätze).
  • Papierkorb: Kann als Ablagestelle für Datensätze und für Seiten, die nicht mehr genutzt werden, aber noch nicht gelöscht werden sollen gebraucht werden.
  • Trennzeichen für Menü: Wird häufig zur optischen Strukturierung des Seitenbaums genutzt. Ansonsten kann es genutzt werden, um ein Trennzeichen in einem Seitenmenü zu repräsentieren.

Symbole im Seitenbaum Arbeitsbereich

  • Blendet alle möglichen Seitentypen ein.
  • Öffnet ein Suchfeld, in welchem der Seitenbaum mithilfe eines Suchbegriff gefiltert werden kann.
  • Aktualisiert den Seitenbaum.

Seitenkontextmenü

  • Ansehen: Zeigt eine Seite im Frontend an.
  • Bearbeiten: Öffnet das Seitenformular zur Bearbeitung einer Seite.
  • Neu: Neue Seite anlegen.
  • Info: Zeigt Informationen über eine Seite an.
  • Kopieren: ermöglicht die Kopie einer Seite, danach kann die Seite wiederum durch Rechtsklick auf eine bestimmte Seite entweder auf gleicher Ebene oder aber als Unterseite dieser angelegt werden.
  • Auschneiden: Schneidet eine Seite aus. Diese kann wiederum durch einen Rechtsklick an der gewünschten Stelle eingefügt werden.
  • Weitere Optionen: Zeigt weitere Optionen an
  • Deaktivieren: Deaktiviert eine Seite, sodass diese im Frontend nicht mehr sichtbar ist.
  • Löschen: Löscht eine Seite aus dem Seitenbaum.
  • Verlauf/Rückgängig: Öffnet das Formular, das den Bearbeitungsverlauf einer Seite zeigt und ermöglicht es, einen oder mehrere Bearbeitungsvorgänge rückgängig zu machen.
  • Cache dieser Seite löschen: Löscht den Cache für die ausgewählte Seite.

Seiten anlegen

Es gibt verschiedene Möglichkeiten, eine Seite zu erstellen. Im Folgenden werden die gebräuchlichsten beschrieben. Grundsätzlich spielt es keine Rolle, welche Methode Sie verwenden. Daher können Sie die Methode, die Ihnen am intuitivsten erscheint, verwenden.

Im Modul Seite

  • Klicken Sie auf oberhalb des Seitenbaums. Klicken Sie auf und halten Sie die Maus gedrückt. Nun kann an die gewünschte Stelle verschoben und eingefügt werden.
  • Klicken Sie mit einem Rechtsklick auf eine Seite und wählen Sie die Zeile mit und der Beschriftung Neu aus. Nachdem Sie einen Namen vergeben haben und Speichern geklickt haben, wird die Seite nach und auf derselben Ebene der Seite, auf die Sie den Rechtsklick ausgeführt haben, abgepeichert.
  • Wenn Sie die Bearbeitungsmaske eines Inhaltselement geöffnet haben können Sie in den oberen Leiste mit Klick auf eine neue Seite erstellen. Die Seite wird nach und auf derselben Ebene der Seite, deren Bearbeitungsformular gerade geöffnet ist, angelegt.
  • Nach dem gleichen Muster lässt sich mit Rechtsklick auf in der Pfadanzeige oder unterhalb des Bearbeitungsformulars eine neue Seite anlegen.

Funktioniert mit derselben Vorgehensweise auch aus dem Liste-Modul heraus.

Im Modul Liste

  • Klicken Sie in der Tabelle mit den Seiten auf . Nun können Sie mit einem Klick auf den Pfeil die Position, an welcher die neue Seite angelegt werden soll, bestimmen. 
  • Klicken Sie in der Übersicht des Menüs auf . Hier können Sie zwischen Seite (in), welches eine Seite unterhalb der ausgewählten Seite erstellt, Seite (nach), welches eine Seite nach der ausgewählten Seite erstellt und Seite (Position auswählen), bei welcher die Position der Seite im Seitenbaum manuell ausgewählt werden kann, wählen.

Mehrere Seiten erstellen

  • Klicken Sie per Rechtsklick auf eine Seite im Seitenbaum, unterhalb derer Sie mehrere Seiten anlegen wollen. Wählen Sie im Menü Weitere Optionen… aus. Wählen Sie dann Mehrere Seiten erzeugen aus.

Seiten verbergen und freigeben

Neu angelegte Inhaltsseiten werden standardmäßig verborgen. Um die Seite im Frontend freizugeben, klicken Sie auf diese mit der rechten Maustaste. Wählen Sie dann Aktivieren im Kontextmenü. Um eine bereits aktivierte Seite wieder zu verbergen, wählen Sie im Kontextmenü dann Deaktivieren.

Seiten im Seitenbaum verschieben

Um die Reihenfolge der Seiten im Seitenbaum zu ändern, können Sie die einzelnen Seiten einfach per Drag & Drop verschieben. Klicken Sie mit der linken Maustaste auf die zu verschiebende Seite und ziehen Sie diese bei gedrückt gehaltener Maustaste zu der Seite, in oder unterhalb welcher die ausgewählte Seite eingefügt werden soll.

Wollen Sie die Seite auf der gleichen Seitenebene einfügen, warten Sie bis eine Linie erscheint. Die Seite wird hinter oder vor der Seite eingefügt, auf welcher Sie die Maustaste loslassen.

Wollen Sie die Seite eine Seitenebene tiefer verschieben, warten Sie bis ein blauer Hintergrund erscheint. Die Seite wird dann unterhalb der Seite, auf welcher Sie die Maustaste losgelassen haben, eingefügt.

Seitenvorschau

Um sich eine Seite als Vorschau anzusehen, klicken Sie im Seitenbaum mit der rechten Maustaste auf den Titel der Seite. Im Kontextmenü wählen Sie dann Anzeigen. Alternativ können Sie die Seite im Seitenbaum auswählen und dann im Arbeitsbereich oben links die Schaltfläche klicken.

Es öffnet sich ein neuer Browser-Tab und eine Vorschau der Seite wird geladen.

Seite löschen

Um eine Seite zu löschen, wählen Sie diese im Seitenbaum aus und klicken Sie mit der rechten Maustaste auf diese. Wählen Sie im Kontextmenü Löschen aus und bestätigen Sie die Rückfrage anschließend mit Ja.

Seiteneigenschaften

Symbole für das Bearbeitungsformular

In den Seiteneigenschaften werden nicht die Inhalte der Seite bearbeitet, sondern zusätzliche Informationen wie z. B. der Seitentitel.

In die Seiteneigenschaften gelangt man, indem man im Seitenbaum über den Rechtsklick im Dropdown-Menü auf Bearbeiten geht oder wenn man sich im Seitenmodul in der zu bearbeitenden Seite befindet: Über dem Inhaltsbereich auf klicken.

  • Wenn die Webseite mehrere Sprachvariante anbietet, kann im Dropdown-Menü oben links ausgewählt werden, in welcher Sprache (Deutsch oder Englisch) das Inhaltselement bearbeitet werden soll.
  • Schließen: Schließt das Seitenformular.
  • Speichern : Speichert die aktuelle Seitenformular Version ab.
  • Anzeigen: Öffnet die ausgewählte Seite in einem neuem Fenster im Frontend.
  • Neu: Ermöglicht das Anlegen einer neuen Seite ( siehe Anlegen einer neuen Seite ).
  • Löschen: Löscht die aktuelle Seite. • : Öffnet das Bearbeitungsformular in einem neuen Fenster.
  • Teilen:
    • : Erzeugt ein Lesezeichen auf das geöffnete Formular.
    • : kopiert die URL dieser Seite
  • : Zeigt einen kurzen Hilfetext zur Bedeutung des jeweiligen Formulars an.

Im Seitenformular können Sie verschiedene Einstellungen vornehmen. Das Seitenformular ist in mehrere Tabs unterteilt. Welche Tabs Sie sehen und bearbeiten können, hängt von Ihren Benutzerrechten ab.

Das Seitenformular

Im Seitenformular können Sie verschiedene Einstellungen vornehmen. Das Seitenformular ist in mehrere Reiter unterteilt.

Reiter Allgemein:

Menü-Teaser

Seitentyp

Hier kann der Typ der Seite geändert werden und auf Standard-Seite mit Menü-Teaser umgestellt werden.

1 2
1. Überschrift

Es ist möglich, dass die Menü-Teaser eine Überschrift erhalten, wie z.B. "Weitere Informationen"

2. Menü-Teaser

Es können maximal 3 Menü-Teaser angelegt werden. Diese Element können deaktiviert, gelöscht und in der Reihenfolge verschoben werden.

1 2 3
1. Link

Mit einem Link verweisen Sie entweder auf eine Seite oder direkt auf ein Inhaltselement auf einer Seite.

2. Linktitel

Mit dem Titel können sie weitere Informationen geben, wohin der Link führt.

3. Icon

Jeder Teaser sollte ein Icon erhalten und Sie können aus einem Portfolioa von Icons auswählen, die aktuell auf der gesamten Website genutzt werden.

Seiten übersetzen

Wenn Sie eine Seite im Seitenbaum übersetzen möchten, wählen Sie in der oberen Menüleiste des Moduls Web > Seite die Funktion Sprachvergleich. Verwenden Sie dann das Auswahlfeld, um eine neue Übersetzung der Seite zu erstellen. 

Anschließend wird das Formular mit den Feldern für die übersetzte Seite angezeigt. Die meisten Felder sind dieselben wie für die Seite der Standardsprache. Unterhalb der Felder wird der Inhalt der Standardsprache angezeigt.

Wenn eine Seite keine Übersetzung hat (d.h. keinen Datensatz „Alternative Seitensprache“), kann ihr Inhalt nicht übersetzt werden.

Es gibt zwei Strategien für die Übersetzung von Inhalten auf Seiten:

Verbundener Modus

Durch die Übersetzung von Inhalten wird eine direkte Verbindung zwischen der Originalsprache und der Sprache hergestellt, in die Sie übersetzen. Das bedeutet, dass das Verschieben eines Elements oder das Festlegen von Metainformationen wie Start- oder Endzeit vom ursprünglichen Inhalt übernommen wird und Sie diese Werte nicht für ein übersetztes Inhaltselement festlegen können. Übersetzte Datensätze behalten die Verbindung zu ihrem ursprünglichen Sprachdatensatz. Dieser Modus eignet sich am besten für einen strengen Übersetzungsworkflow.

Freier Modus

Beim Kopieren von Inhalten werden die Inhaltselemente aus der Quellsprache übernommen und Kopien in einer anderen Sprache erstellt. Das bedeutet, dass Sie Inhaltselemente zwar frei verschieben können, aber später nicht den Vorteil haben, vorgenommene Änderungen in der Ausgangssprache vergleichen zu können. Verwenden Sie diesen Modus, wenn der Inhalt der übersetzten Seiten stark von der Originalsprache abweichen kann und Sie diese Freiheit bei der Gestaltung Ihrer übersetzten Website haben möchten.

Wenn Sie mit der Übersetzung einer Seite beginnen, werden Sie im Modul „Web > Seite“ nach dieser Auswahl gefragt, wenn Sie auf die Schaltfläche „Übersetzen“ klicken.

Die Schaltfläche „Übersetzen“ entspricht dem verbundenen Modus, die Schaltfläche „Kopieren“ dem freien Modus.

Mit Inhaltselementen arbeiten

Was ist ein Inhaltselement?

Ein Inhaltselement ist eine Einheit im Backend einer TYPO3-Seite, die Inhalte einer bestimmten Art enthält und deren visuelle Erscheinung festgelegt ist. Eine einzelne Seite kann dabei aus mehreren Inhaltselementen bestehen (z.B. Text & Medien, Akkordeon, Linkliste).

Symbole im Inhaltsbereich

  • : Zeigt die aktuelle Seiten im Frontend an
  • : Öffnet das Seiteneigenschaften-Formular 
  • : Löscht den Cache der aktuell ausgewählten Seiten

Inhaltselemente hinzufügen

Inhaltselemente besitzen mehrere Felder, welche bearbeitet werden können. Die Felder dienen dazu, das Inhaltselement zu konfigurieren und mit Text und Bildern zu befüllen, um so die gewünschte Ausgabe im Frontend zu erzielen.

Um Inhaltselemente anzulegen, wählen Sie in der Modulleitse das Modul Web Seite aus. Navigieren Sie im Seitenbaum zu der Seite, auf welcher Sie das Inhaltselement anlegen möchten. Im Arbeitsbereich wird der strukturelle Aufbau mit eventuell schon vorhandenen Inhaltselementen angezeigt.

Wählen Sie den Bereich, an welchem Sie das Inhaltselement einfügen möchten aus, indem Sie dort auf Inhalt klicken. Je nach gewähltem bereich und Benutzerrechten können Sie nun zwischen verschiedenen Inhaltselementen wählen. Meistens gibt es noch verschiedene Tabs, in welchen Inhaltselemente unterschiedlichen Typs angezeigt werden (u.a. Typischer Seiteninhalt und Container). Klicken Sie auf das Inhaltselement, das Sie einfügen möchten. Dadurch öffnet sich das Eingabeformular, in welchem zum Beispiel Überschriften, Text und Bilder eingefügt werden können.

Inhaltselemente kopieren

Wird ein Inhaltselement kopiert und an einer neuen Position eingefügt, ist dieses neue Inhaltselement vollkommen unabhängig von seinem Ursprungselement. Das bedeutet, dass es bei einer Anpassung des Ursprungselements zu keinen Auswirkungen auf die Kopie kommt. Dies gilt ebenso umgekehrt. Klicken Sie mit der rechten Maustaste bei einem Inhaltselement auf das jeweilige Icon des Inhaltselements. Dadurch öffnet sich das Kontextmenü.

Wählen Sie hier die Option Kopieren aus. Sie können dieses kopierte Element auf jeder Seite an gewünschter Position einfügen. Wechseln Sie dazu an die Stelle, an der die Kopie eingefügt werden soll. Klicken Sie auf und bestätigen Sie im Dialog die Abfrage mit Klick auf den Button Einfügen.

Inhaltselemente ausschneiden

Klicken Sie mit der rechten Maustaste bei einem Inhaltselement auf das jeweilige Icon des Inhaltselements. Um das Element auszuschneiden, klicken Sie im sich öffnenden Kontextmenü auf Ausschneiden. Sie können das ausgeschnittene Element auf jeder Seite an der gewünschten Position einfügen. Klicken Sie auf , um das Inhaltselement einzufügen.

Inhaltselemente verbergen

Klicken Sie mit der rechten Maustaste bei einem Inhaltselement auf das jeweilige Icon des Inhaltselements. Um das Inhaltselement im Frontend zu verbergen, klicken Sie im Kontextmenü auf Deaktivieren.

Inhaltselemente löschen

Klicken Sie mit der rechten Maustaste bei einem Inhaltselement auf das jeweilige Icon des Inhaltselements. Um das Inhaltselement zu löschen, klicken Sie im Kontextmenü auf Löschen. Bestätigen Sie anschließend die Rückfrage mit Klick auf den Button Löschen.

Text & Medien

Das "Text & Media"-Element ist das am häufigsten verwendete Content Element und stellt ein vielseitiges Werkzeug bei der Gestaltung Ihres Webauftritts dar. Im Inhaltselement "Text & Media" können Sie neben Texten auch Bilder oder Videos auf Ihrer Seite einbauen.

Für die Erstellung von Inhalten steht Ihnen der Rich Text Editor (RTE) zur Verfügung, mit einer ähnlichen Oberfläche wie bereits bekannte Textverarbeitungsprogramme. Sie finden den Editor z.B. im Inhaltselement "Text & Media" im Reiter "Allgemein".

 

 

1 2 3
1. Überschrift

Jedes Inhaltselement hat genau eine Überschrift. Bei Bedarf kann auch eine Dachzeile, die über der Überschrift erscheint, hinterlegt werden.

2. Überschriften im Fließtext

Im Textfeld können weitere Überschriften formatiert werden. Mittels dieses Feldes legen Sie die Hierarchieebene (H2-H5) der Überschrift fest.

3. Text formatieren

Mittels Fettung, kursiv oder Aufzählungszeichen kann der Text aufgelockert werden.

Bild hinzufügen

Unter der Überschrift Medien können Sie ein Bild hinzufügen, in dem Sie auf den Button Mediendatei hinzufügen klicken. Wählen Sie anschließend aus dem Verzeichnisbaum den entsprechenden Ordner aus und klicken Sie auf die gewünschte Medien-Datei. 

Metadaten zum Bild werden direkt an der Datei in der Dateiliste gepflegt und automatisch ausgelesen. Im Inhaltselement selbst können diese Eigenschaften jedoch bei Bedarf überschrieben werden.

Eine weitere Bearbeitung des Bildes erfolgt mittels des Bildeditors direkt im TYPO3. Sie können den Ausschnitt des Bildes frei festlegen und eines der vorgegebenen Seitenverhältnisse auswählen. Klicken Sie auf "Akzeptieren", um die Bearbeitung abzuschließen. Das Originalbild wird damit nicht verändert.

Für dieses Inhaltselement ist das Bildformat 3:2 ausgewählt. Im Reiter Medien können Sie zudem die Position des Bildes zum Textelement bestimmen. Für dieses Element sind folgende Positionen möglich: 

  • Bild neben dem Text links
  • Bild neben dem Text rechts
  • Bild unten mittig

Die verschiedenen Positionierungen der Bilder wird im Stylguide dargestellt. 

Akkordeon

Das Akkordeon eignet sich gut dafür Informationen strukturiert und übersichtlich darzustellen.

Zunächst können Sie eine Überschrift und bei Bedarf eine Dachzeile (Label: erscheint über der Überschrift) hinzufügen. Zudem kann noch Text hinzugefügt werden. 

Insgesamt kann dem ganzen Akkordeon ein Bild hinzugefügt werden. 

Unter der Überschrift Medien können Sie ein Bild hinzufügen, in dem Sie auf den Button Mediendatei hinzufügen klicken. Wählen Sie anschließend aus dem Verzeichnisbaum den entsprechenden Ordner aus und klicken Sie auf die gewünschte Medien-Datei. Eine weitere Bearbeitung des Bildes erfolgt mittels des Bildeditors. Der Bildeditor ermöglicht die Anpassung des Bildes direkt im TYPO3 Backend.

Akkordeon-Einträge anlegen

Es können beliebig viele Einträge innerhalb des Akkordeons angelegt werden

1 2
1. Einträge anlegen

Neue Akkordeon-Einträge anlegen

2. Einträge bearbeiten

Die Einträge können aktiviert und deaktiviert werden, gelöscht, direkt nach einem Eintrag ein neuer Eintrag erstellt werden (+) oder mittels der Pfeile nach oben oder unten positioniert werden. Durch die horizontalen Linien kann der Eintrag auch eine andere Stelle positioniert werden.

Akkordeon-Einrag mit Informationen befüllen

Ähnlich wie bei dem Inhaltselement Text & Medien können mittels des Rich Text Editor (RTE) die Texte formatiert werden. 

  • es können Überschriften (h2-h5) eingefügt werden
  • fett
  • kursiv
  • hoch- oder tiefstellen
  • alles auswählen
  • Verlinkung
  • Aufzählungsliste
  • nummerierte Liste
  • Positionierung des Textes, wie linksbündig usw.
  • Sonderzeichen

Text Teaser ohne Icon

Dachzeile

Die Dachzeile erscheint über der Überschrift.

Text

Im Textfeld werden die weiteren Information hinterlegt.

Verlinkung

Der Teaser dient dazu um auf andere Inhalte zu verweisen und somit kann ein Link auf die jeweilige Seite hinzugefügt sowie einen Linktext angegeben werden.

Linkliste

Bei der Linkliste wird unterschieden zwischen:

  • Internen Links (leiten innerhalb der eigenen Seitenweiter)
  • Externen Links (leiten außerhalb des DWI weiter)
1 2 3
1. Überschrift

Es kann eine Überschrift vergeben werden.

2. Text

Es können weitere Informationen zur Linkliste angegeben werden.

3. Links anlegen

Es können beliebig viele Links angelegt werden. Jeder Link kann einen separaten Titel erhalten und dann muss die URL bzw. per Auswahlfenster die Seite oder ein Element auf einer Seite angegeben werden, wohin verlinkt werden soll.
Die Links können zudem aktiviert und deaktiviert oder gelöscht werden. Zudem kann die Reihenfolge der Links verändert werden.

Liste Downloads/Materialien

1 2 3
1. Überschrift

Es kann optional eine Überschrift angegeben werden.

2. Text

Es kann optional weitere Informationen zur Liste angegeben werden.

3. Download-Links anlegen

Die Materialien, die zum Download bereit gestellt werden soll, müssen zunächst über das Dateilisten-Modul hochgeladen werden. Es können Bilder (jpg. png) und Dokumente (pdf) verlinkt werden. Zu jedem Link kann ein Titel hinterlegt werden.

Fakten-Modul

Das Faktenmodul dient dazu, um Daten kurz und knapp darzustellen. 

Die Überschrift des Faktenmoduls wird nicht im Frontend ausgespielt. 

Es können mind. 2 und max. 4 Fakten-Einträge erstellt werden. Wenn Sie Fakten aus der DWI-DB darstellen möchten, nutzen Sie bitte das Plugin "Reusable Request".

Der Titel des Faktes wird größer als die Beschreibung (Text) dargestellt. 

Teaser

Highlight Teaser

Eine Darstellung und Verwendung des Highlight Teasers finden Sie im Styleguide

1 2
1. Überschrift

Die Überschrift wird im Frontend nicht dargestellt.

2. Teaser hinzufügen

Dem Teaser kann eine Dachzeile hinzugefügt werden, die über der Überschrift erscheint. Der Titel ist die Überschrift und weitere Informationen können als Unterüberschrift hinzugefügt werden.
Für weitre Informationen steht ein Textfeld zur Verfügung. Zudem muss ein Verlinkung angegeben werden, um auf die Seite weitergeleitet zu werden. Zudem kann ein Bild hinzugefügt werden.

3er Teaser

Eine Darstellung und Verwendung des 3er-Teasers finden Sie im Styleguide

1 2
1. Überschrift

Die Überschrift wird im Frontend nicht dargestellt.

2. Teaser hinzufügen

Dem Teaser kann eine Dachzeile hinzugefügt werden, die über der Überschrift erscheint. Der Titel ist die Überschrift und weitere Informationen können als Unterüberschrift hinzugefügt werden.
Für weitre Informationen steht ein Textfeld zur Verfügung. Zudem muss ein Verlinkung angegeben werden, um auf die Seite weitergeleitet zu werden. Zudem kann ein Bild hinzugefügt werden.

Bühnenslider

Der Bühnenslider dient als Startseiten Einstiegselement, um aktuelle Absprünge auf andere Inhalte der Seite zu ermöglichen. 

Dabei wird in statischer und dynamischer Content entschieden. Der statische Inhalt wird redaktionell komplett im TYPO3 gepflegt und kann in diesem System beliebig angepasst werden.

Der dynamische Content kommt aus dem Contentpool der DWI-DB über die API Schnittstelle. Hier werden vorhandene Daten ausgewählt, welche als Bühnenslidereintrag präsentiert werden. 

1
1. Plug-In

Das "Bühnenslider" Plug-In als neues Inhaltselement platzieren.

Zudem gibt es die Option der “Zufallsorientierung”: Wenn diese Option aktiviert ist, werden die Ergebnisse zufällig sortiert ausgegeben.

 

Statischer Inhalt

Bei diesem Eintragstypen werden alle Inhalte redaktionell eingetragen und verwaltet. 

1 2
1. Eintrag-Typ

Auswahl als "Statischer Content"

2. Inhalte

Definition der verschiedenen Attribute für den Eintrag.

Der Eintrag wird nun im Frontend beispielsweise wie folgt ausgespielt: 

Content aus der DWI-DB

Für die dynamischen Daten aus der DWI-DB wird der Eintragstyp “Content aus der DWI-DB” gewählt, um die bereits vorhandenen Daten über die API Schnittstelle zu beziehen und ggf. noch redaktionell anzupassen. 

Die Konzepte für den API Client der DWI-DB sind unter t3://page?uid=220 ausführlich beschrieben. 

Im Folgenden wird die Einbindung einer Weinsicht als Bühnenslider dokumentiert. 

Für die Darstellung eines einzelnen Datensatzes aus der DWI-DB benötigen wir die ID der Weinsicht. Damit können wir die Abfrage im TYPO3 entsprechend konfigurieren. 

1
1. ID

Die ID des Eintrags findet sich in der DWI-DB um Tab "Intern" wider.

Im Backend Modul “API Client” wird im API Explorer der Endpunkt für die Weinsicht ausgewählt: 

Detailabfrage

Auswahl des Endpunkts für die Weinsichten als einzelne Detailabfrage

Im ersten Schritt wird die Temporäre Abfrage konfiguriert: 

1. ID

Die ID aus der DWI-DB wird als Filterwert eingetragen.

2. Abschicken

Die vorbereitete Abfrage wird testweise als Temporäre Abfrage abgeschickt.

3. Ergebnis

Die API Daten sind unter "Ergebnis" einsehbar.

Endpunkt URL

Durch Abschicken der Temporären Abfrage wurde die Endpunkt URL zusammengebaut und aktualisiert.

Im zweiten Schritt wird die Wiederverwendbare Abfrage definiert. Diese benötigen wir für die Auswahl im Plug-In.  

1 2 3
1. Konfiguration

Name und Beschreibung für die Wiedererkennung des Eintrags.

2. Registriertes Template

Damit die Abfrage auch im Bühnenslider erlaubt ist, muss hier das "Allgemein, Bühnenslider-Eintrag" Template ausgewählt werden.

3. Speichern

Die Wiederverwendbare Abfrage wird abgespeichert.

Im Plug-In des Bühnensliders kann nun die Wiederverwendbare Abfrage (Reusable Request) ausgewählt werden. 

1 2 3 4
1. Eintrag-Typ

Um Daten aus der DWI-DB im Bühnenslider anzuzeigen, muss hier der Typ "Content aus der DWI-DB" ausgewählt werden.

2. Registrierte Templates

Für die Darstellung der Daten aus der DWI-DB wird hier das Template "Allgemein, Bühnenslider-Eintrag" genutzt.

3. Reusable Request

Die zuvor angelegte Wiederverwendbare Abfrage sollte nun in der Liste mit auftauchen und kann ausgewählt werden. Damit sind das Layout und die Daten zusammen gefügt und der Bühnenslider-Eintrag ist funktionstüchtig.

4. Überschreibungen

Optional können alle Attribute, die dynamisch mit den Daten aus der DWI-DB befüllt werden, im unteren Teil des Plug-Ins überschrieben werden. So ist es möglich redaktionell einzelne Bestandteile anzupassen, um beispielsweise saisonale Hinweise zu geben.

Der Eintrag ist nun konfiguriert und sieht beispielsweise wie folgt aus: 

Videoanleitung

Das Anlegen eines dynamischen Bühnenslider-Eintrags aus der DWI-DB ist in folgendem Video noch ein mal exemplarisch präsentiert:

Podcast

1
1. Medium

Unter Plugins kann ein Medium, also ein Podcast, hinzugefügt werden.

Mit dem Plugin Medium kann eine Podcast-Folge auf einer Inhaltsseite hinterlegt werden.

1
1. Überschrift

Es ist wichtig, dass die Inhaltselemente generell Überschriften erhalten, um sie auch bei internen Verlinkungen genau zuordnen zu können.

1 2
2. Auswahl des Mediums

Unter dem anzuzeigenden Medium kann aus den vorhandenen Podcasts gewählt werden.

Podcast-Liste

1
1. Medienliste

Unter Plugins kann eine Medienliste hinzugefügt werden.

1 2
2. Verweis auf Datensätze

Unter Record Storage Page können die Datensätze, wie z.B. die DWI Podcasts oder SZ-Podcasts, ausgewählt werden, die als Liste angezeigt werden sollen.

DWI-DB: Contentpool

Konzept

In diesem Abschnitt wird das generelle Konzept des API Clients der DWI-DB vorgestellt.

 

 

Übersicht

Das folgende Schema zeigt den Ablauf der Konfiguration, um Daten von der API Schnittstelle ins TYPO3 Frontend zu bringen.

Wir verfolgen einen sehr generischen Ansatz, um die Daten, welche von der DWI DB API bereitgestellt werden, frei konfigurierbar im TYPO3 nach zu nutzen. Damit sind wir zukünftig flexibel aufgestellt, wenn es darum geht, Änderungswünsche oder gefilterte Daten darzustellen.

Die Verwaltung des API Clients und alle dazugehörigen Abfragen findet im Backend Modul “API Client” statt. 

1 2 3 4
1. Explorer

Der Explorer dient zur Erkundung der verfügbaren API Endpunkte.

2. Spezifikation

Hier kann die technische API Spezifikation zu Analysezwecken eingesehen werden.

3. Abfragenübersicht

Alle wiederverwendbaren Abfragen werden hier verwaltet und können in einer Listenübersicht eingesehen werden.

4. Cache

Dieses Modul gibt einen Überblick über die gecachten Elemente und ermöglicht es den Cache manuell zu leeren und neu aufzubauen.

Erkunden

Zum Testen der API Endpunkte werden die Temporären Abfragen genutzt. Hierfür gilt der Explorer als Einstiegspunkt, welcher erlaubt, im "API Client" TYPO3 Backend Modul die Schnittstelle zu erkunden und die Endpunkte aktiv zu filtern, um die reine Daten-Ergebnismenge zu sichten.

Im Backend Modul wählt man "Explore API", um auf die Übersicht der Endpunkte zu gelangen. Die Endpunkte definieren die unterschiedlichen Datenmodelle innerhalb der DWI-DB. Hierbei wird in Listenausgabe (zB "/api/{locale}/accommodation_types") und Detailausgabe (zB "/api/{locale}/accommodation_types/{id}") unterschieden.

Eine Listenausgabe liefert als Ergebnis immer eine Menge an Daten, zum Beispiel mehrere News Datensätze. Das Listenresultat kann über diverse Filtermöglichkeiten eingegrenzt werden, um beispielsweise alle News einer bestimmten Kategorie zu erhalten. Welche Filter zur Verfügung stehen, sind Endpunkt spezifisch und finden sich auf der Seite der “Temporären Abfrage”. 

Eine Detailausgabe liefert immer ein spezielles Ergebnis und wird mittels einer eindeutigen ID adressiert. So erhält man beispielsweise alle Daten einer News mit der ID 172, um diese auf einer Detailseite anzuzeigen.

Die API ist generell in englischer Sprache definiert, insofern sind auch die Endpunkte mit englischen Bezeichnungen aufgelistet.

ToDo: Übersicht der Endpunkte, Übersetzung in deutsche Begriffe

Wählt man einen speziellen Endpunkt aus, gelangt man auf die Übersichtsseite zu diesem Request / dieser Abfrage. 

Die Übersichtsseite einer Abfrage ist zweigeteilt und besteht aus den folgenden Bestandteilen:

1 2
1. Temporäre Abfrage

Dieser Abschnitt ist zum Austesten des API Endpunkts vorgesehen. Hier können die verfügbaren Filter ausprobiert und das Datenbasierte Resultat eingesehen werden.

2. Wiederverwandbare Abfrage

Wurde innerhalb der Temporären Abfrage eine Abfrage erstellt, welche sich im Frontend wiederfinden soll, wird diese Konfiguration abgespeichert. Dies passiert innerhalb der Wiederverwandbaren Abfrage.

Temporäre Abfrage

Auf der linken Seite kann die temporäre Abfrage getestet werden. Dafür stehen je nach Endpunkt diverse Filter zur Verfügung. Sobald man eine Abfrage abschickt, kann man unter dem Punkt "Ergebnis" die unverarbeiteten Ergebnisdaten der API sichten. 

1. Filter

Hier kann man verschiedene Filterwerte für den API Endpunkt definieren, zum Beispiel die ID für eine Kategorie, nach der gefiltert werden soll.

Abschicken

Dieser Button schickt die Anfrage an die API ab.

3. Ergebnis

Hier werden die strukturierten Daten von der API ausgegeben, welche durch die API Anfrage generiert wurden.

Wiederverwendbare Abfragen (Reusable Request)

Die temporäre Abfrage dient als Vorstufe für die wiederverwendbare Abfrage. Hat man eine temporäre Abfrage abgeschickt und ist mit den von der API zurückgelieferten Daten zufrieden, kann man diese temporäre Abfrage dauerhaft und zur Wiederverwendung abspeichern.

Dazu nutzt man das Formular auf der rechten Seite in der Übersichtsseite des Requests / der Abfrage. Dort werden weitere Angaben zur wiederverwendbaren Abfrage hinterlegt. Unter anderem können dort die Caching Zeiten definiert werden, um eine gezielte Performance zu ermöglichen. 

Entscheidend ist die Konfiguration der erlaubten registrierten Templates, also der Definition welche Darstellungsmöglichkeiten es für diese Daten gibt. Dies schränkt die Auswahl innerhalb des Plugins ein, damit es nicht zu Misskonfigurationen kommt. 

1. Name

Hier sollte ein aussagekräftiger Name für die Wiederverwendbare Abfrage gewählt werden.

2. Beschreibung

Optional kann noch eine erläuternde Beschreibung für die Intention der Abfrage hinterlegt werden.

3. Endpunkt URL

Diese URL wird durch die Temporäre Abfrage befüllt und ist entscheidend für die technische Verarbeitung der Anfrage.

4. Cache

Optional kann die Cache Lebensdauer hinterlegt werden, also wie lange eine Abfrage zwischengespeichert wird im TYPO3 bevor die eigentliche API wieder nach neueren Daten angefragt wird.

5. Erlaubte Templates

Für die Darstellung der API Daten im Frontend gibt es bereits eine Reihe von vorgefertigten Templates zur Auswahl. Da aber nicht jedes Datenobjekt von der API mit jedem Template harmoniert, muss hier eine Zuordnung vorgenommen werden. Diese Auswahl steht dann im Plugin zur Verfügung.

Erstellen/Speichern

Dieser Button erstellt die neue Wiederverwendbare Abfrage oder speichert die vorhandene Wiederverwendbare Abfrage ab.

Die Caching Zeiten definieren die Aktualität der Daten. Aus Performancegründen sollten Daten, welche sich nicht häufig ändern, wie beispielsweise Weinwissen, eine hohe Cache Zeit haben. Datensätze, welche generell aktuell gehalten werden müssen, wie beispielsweise Veranstaltungen oder News, sollten eine niedrige Cache Zeit besitzen.

Registrierte Templates

ToDo: Registrierte Templates

Reusable Request Plugin

Um nun die vorbereiteten Daten (Wiederverwendbare Abfrage) und das vorbereitete Layout (registriertes Template) zusammenzubringen wird das Plugin "Reusable Request" genutzt. 

1
1. Plug-In

Auswahl des Plug-Ins als neues Inhaltselement.

Im ersten Teilschritt wählt man in den Plugin Einstellung das darzustellende Layout aus allen verfügbaren registrierten Templates aus. Die Liste kann man filtern sowie sich ein Vorschaubild anzeigen lassen. 

Hat man das gewünschte Template ausgewählt, muss man die Konfiguration zwischenspeichern. Danach stehen dem Nutzer die dazu passenden registrierten Templates zur Auswahl, welche auf der Übersichtsseite der wiederverwendbaren Abfrage explizit erlaubt worden sind. 

Hier wählt man nun die gewünschte Datenquelle für das Layout aus. Über das Linksymbol am rechten Rand kann man noch mal in die Konfiguration der Abfrage gelangen. 

Hat man die passende Abfrage gewählt, muss die Konfiguration zwischen gespeichert werden. Nun kann man bereits im Frontend eine passende Ausgabe der Daten sehen. 

Videoanleitung

Endpunkte

Die Übersicht der Endpunkte findet sich im Backend Modul “API Client” unter Explore API. 

Im Folgenden werden die für die Redaktion relevanten Endpunkte sowie Übersetzungen aufgelistet. 

Endpunkt BezeichnungErläuterung
eventsVeranstaltungen
growing_areasAnbaugebiete
highlightsHöhepunkte der Weinkultur
hikesWeinwanderungen
importersImporteure
knowledgeWeinwissen
merchantsHändler
newsNews
storiesWinzergeschichten

FAQ

Glossar

ToDo