Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 18

Workshop – Eigene Inhaltselemente erstellen: Flexibler Content mit TemplaVoilà

Ein äußerst praktisches Feature von TemplaVoilà ist die Möglichkeit, eigene Inhaltselemente zu definieren. Diese lassen sich anschließend mit nur einem Klick in eine auf TemplaVoilà basierende Seite einfügen. Der Workshop demonstriert dies und erklärt Schritt für Schritt, wie man dabei vorgeht.

Voraussetzung für dieses Tutorial ist, dass TemplaVoilà als Erweiterung installiert ist. Außerdem lassen sich die im Tutorial entwickelten Flexible-Content-Elements (FCE) nur in Seiten nutzen, die eine TemplaVoilà-Vorlage verwenden. Für dieses Tutorial wurde TemplaVoilà in Version 1.3.7, die aktuellen Beta von TYPO3 4.3 sowie eine XAMPP-Installation in Version 1.7.2 eingesetzt. Sämtliche Dateien und Quelltexte finden Sie über den Softlink am Ende des Artikels, den Sie lediglich unter t3n.de/magazin/softlinks/ eingeben müssen.

Zielsetzung

Ziel des Tutorials ist es, zwei FCEs zu erstellen, wie sie in der Kontextspalte einer Website benötigt werden könnten. Das erste FCE soll eine Quellenliste darstellen, die aus einer Überschrift, einer Beschreibung und einer beliebigen Anzahl von Verweisen besteht. Das zweite FCE hat die Form einer Glossarliste. Es besitzt ebenfalls eine Überschrift und eine Beschreibung. Anschließend folgt eine beliebige Anzahl von Definitionen, die aus einem Definitionsterm und dessen Erläuterung bestehen.

Hierfür werden zunächst zwei HTML-Vorlagen geschrieben. Die erforderlichen CSS-Stile werden innerhalb der Vorlagen als Dokumentstile definiert und zusätzlich in einer externen CSS-Datei zusammengefasst, um sie später einfacher dem Seiten-Template hinzufügen zu können. Alle beteiligen Dateien (HTML, CSS und eingesetzte Hintergrundgrafiken) werden im Fileadmin im Ordner „templates“ abgelegt.

Abbildung 1: Screenshots der beiden erstellten Content-Elemente. Links die Quellenliste, rechts die Glossarliste.
Abbildung 1: Screenshots der beiden erstellten Content-Elemente. Links die Quellenliste, rechts die Glossarliste.

Beginn des Mappingprozesses

Als erstes soll das Quellenlisten-FCE gemappt werden. Dies beginnt direkt im Fileadmin. Klicken Sie auf das Icon der HTML-Vorlage „fce_quellenliste.html“ und wählen Sie den Kontextbefehl „TemplaVoilà” (Abb.2, links). Als erstes müssen Sie den Root-Container des FCE mappen. Dies ist jedoch nicht, wie für eine Seitenvorlage erforderlich, das BODY-Element, sondern der DIV-Container, der den Inhaltsblock umgrenzt.

Am besten arbeiten Sie in der Quelltextansicht des Mappers (Mode: HTML Source). Wählen Sie das Element „<div class="quelle">“ (Abb.2, rechts). Wählen Sie den Mapping-Mode „OUTER“ für das Element. Dies bewirkt, dass der DIV-Container später als Teil des FCEs ins Dokument ausgegeben wird. Klicken Sie auf Set, um das erste Mapping zu bestätigen.

Abbildung 2: Auswahl der Vorlage für das Mapping (links), Mapping des Root-Containers (rechts).
Abbildung 2: Auswahl der Vorlage für das Mapping (links), Mapping des Root-Containers (rechts).
Nun soll ein Feld für die Überschrift erzeugt werden. Dies wird ein sogenanntes „Element“ sein, das für einen auszugebenden Inhalt des FCE steht. Nennen Sie es „field_thema“. Seinen Inhalt soll der Bereich über ein einfaches Texteingabefeld erhalten, das beim Einsetzen des FCEs in die Seite vom Redakteur gefüllt wird. Als „Editing Type“ wird daher „Plain Input Field“ gewählt. Das Zielelement „H3“ wird über die „Advanced Mapping Rules“ mitgeteilt.

Mappen Sie nun den H3-Container und wählen diesmal „INNER“ als Mapping Modus. Dies bewirkt, dass bei der Ausgabe das Innere des gemappten HTML-Elements durch die Inhalte ersetzt wird, der Tag selbst jedoch, wie in der Vorlage, erhalten bleibt (man mappt für Inhaltsausgabe auf INNER, wenn die gemappte Struktur erhalten bleiben soll, auf OUTER, wenn sie durch die Inhalte ersetzt werden soll. Beim Root-Container ist es genau umgekehrt).

Der zweite Mappingpunkt gilt der Beschreibung der Quellenliste – diese soll in einen P-Container ausgegeben werden. Benennen Sie das folgende Feld mit „field_beschreibung“. Da hier mehr Text eingegeben werden soll, wählen Sie als „Editing Type“ „Text Area for Bodytext“ – dies erzeugt im Backendformular ein Textarea-Eingabefeld. Mappen Sie den P-Container der Vorlage auf „INNER (Exclude Tag)“. Der folgende Schritt wird interessanter, weil es nun darum geht, im FCE eine wiederholbare Struktur zu definieren.

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Alex

Sorry, ich hatte wohl nicht bis zu Ende gelesen :-) Ist alles richtig :-)

Alex

Hi,

im Beitrag steht:

Wählen Sie den Mapping-Mode „OUTER“ für das Element. Dies bewirkt, dass der DIV-Container später als Teil des FCEs ins Dokument ausgegeben wird.

Ist doch so nicht richtig. Es wird alles ersetzt inklusive des umgebenden div-Containers, d.h. er wird nicht mit ausgegeben.

Jan Christe

Hallo Lutz, danke für Dein positives Feedback. Der Softlink ist 2473. Der direkte Download-Link: https://t3n.de/magazin/fileadmin/listings/t3n_listings_2473.zip Viel Spaß beim nachbauen...

Lutz Wulfestieg

Ausgezeichneter Artikel und dazu noch leicht verständlich. Ich würde die FCE´s gerne nachbauen, kann aber leider die Softlink-ID nicht finden?

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst