Entwicklung & Design

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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
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?

Jan Christe
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…

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

Alex
Alex

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