TemplaVoila FCE: Klassen für Container per Dropdown bzw. Select-Field im Backend auswählbar machen
Wer mittels TemplaVoila eigene Contentelemente erstellt, stößt früher oder später auf folgende Problemstellung:
Es soll verschiedene Varianten eines Flexible Content Elements geben, die sich nur durch Textfarben oder Hintergründe unterscheiden. Der Quellcode der Elemente differiert nur durch verschiedene Klassen des Elternelements (z.B. <div class=”red”> oder <div class=”blue”>). Eine wenig elegante Lösung wäre es nun, für jede dieser Situationen eine eigenes CE zu erstellen, da dies das Backend unnötig aufbläst und zudem mehr Zeit in Anspruch nimmt.
TemplaVoila bietet die Möglichkeit, diese Klassen per Select-Field in der Editieransicht des Contentelements auswählbar zu machen.
Zunächst benötigen wir wie gewohnt ein HTML-Template für unser FCE, beispielsweise folgende simple Variante:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flexible Content Element</title> </head> <body> <div class="hier-wird-geswitcht"> <h1>Test</h1> </div> </body> </html>
Die Klasse der DIV, die unsere Überschrift umgibt, fungiert später als “Schalter” für die Farbe der Headline. “hier-wird-geswitcht” wird dabei durch die Auswahl im Backend ersetzt.
Das Mapping
Jetzt geht es an das Mapping unseres FCE in TemplaVoila. Wir gehen den gewohnten Weg über die Filelist und wählen im Kontextmenü “TemplaVoila” aus. Jetzt gelangen wir zur Maske, die uns das Erstellen der Felder für die Inhalte erlaubt.
Wir benötigen für diese HTML-Vorlage zwei Felder; eines für die Klasse und eines für den Text der Überschrift.
Dem Feld für die Klasse muss der Mapping Type “Attribute” und das Element-Preset “Selector Box” zugeordnet werden, wie im folgenden Screenshot zu sehen:
Die Überschrift erhält den Mapping Type “Element” und das Preset “Plain Input Field”.
Jetzt mappen wir den Body der HTML-Vorlage als Root. Das Feld “Klasse” mappen wir auf die <div class=”hier-wird-geswitcht”>.
Kleine Anmerkung: Falls die entsprechende DIV Ihrer späteren eigenen Vorlage über mehr Attribute als “class” verfügt (z.B. zusätzlich “id”), achten Sie darauf, dass im Action-Select-Field, das richtige Attribut zum Überschreiben gewählt ist (siehe Screenshot).
Das Feld Überschrift mappen wir “inner” auf das H1-Element.
Das Mapping ist abgeschlossen, jetzt müssen wir uns um das Select-Field kümmern, das die Auswahl der Klasse in der Editieransicht ermöglicht. Klicken Sie hierzu auf den Text “Form” unterhalb des Attribut-Elements – Sie gelangen jetzt zu der Ansicht im folgenden Screenshot:
Geben Sie im ersten Feld ein Label für Ihr “Klassenauswahl-Select-Field” an, z.B. “Farbe auswählen”.
Das zweite Feld beinhaltet die Konfiguration des Select-Fields und wird von TYPO3 mit folgenden Standardwerten befüllt:
<type>select</type> <items type="array"> <numIndex index="0" type="array"> <numIndex index="0"></numIndex> <numIndex index="1"></numIndex> </numIndex> <numIndex index="1" type="array"> <numIndex index="0">Value 1</numIndex> <numIndex index="1">Value 1</numIndex> </numIndex> <numIndex index="2" type="array"> <numIndex index="0">Value 2</numIndex> <numIndex index="1">Value 2</numIndex> </numIndex> <numIndex index="3" type="array"> <numIndex index="0">Value 3</numIndex> <numIndex index="1">Value 3</numIndex> </numIndex> </items> <default>0</default>
Eine einzelne Auswahlmöglichkeit des Selectfields verfügt demnach über folgende Aufbau:
<numIndex index="1" type="array"> <numIndex index="0">Value 1</numIndex> /*Bezeichnung im Select Field */ <numIndex index="1">Value 1</numIndex> /*Klassenbezeichnung*/ </numIndex>
Somit ergibt sich für unser Beispiel folgende Konfiguration:
<type>select</type> <items type="array"> <numIndex index="0" type="array"> <numIndex index="0"></numIndex> <numIndex index="1"></numIndex> </numIndex> <numIndex index="1" type="array"> <numIndex index="0">Blau</numIndex> <numIndex index="1">blue</numIndex> </numIndex> <numIndex index="2" type="array"> <numIndex index="0">Rot</numIndex> <numIndex index="1">red</numIndex> </numIndex> </items> <default>0</default>
Der erste num-Index-Array ohne Wertepaar sorgt in Verbindung mit dem Defaut-Value ganz unten dafür, dass standardmäßig keine Klasse ausgewählt ist.
Kopieren Sie nun diese Konfiguration in das Feld “Form configuration” und speichern Sie die neue Vorlage als Content-Element.
Das war es auch schon! Wenn Sie das neu erstellte Element im Backend einfügen und editieren, steht Ihnen das “”Klassenauswahl-Select-Field” zur Verfügung. Jetzt müssen Sie lediglich die entsprechenden CSS-Notationen für die Klassen “blue” und “red” im Stylesheet ergänzen und fertig ist der Farbwahlschalter. Entsprechend der dort getätigten Auswahl, wird die Klasse des Elternelements im Frontend nun auf “blue” oder “red” gesetzt, bzw. leer gelassen wenn keine Auswahl erfolgt.
Viel Spaß damit!
Related posts:
- Workshop TemplaVoilà – Teil 2: Eigene Content-Elemente erstellen Nachdem der Workshop in T3NNr. 13 gezeigt hat, wie Seiten-Templates...
- Templa Voila – Spalten im Backend layouten und anordnen Wenn man mit Templa Voila arbeitet, hat man backend-technisch schon...
- Firefox 3.5, TYPO3 4.3 und Templavoila 1.4.1: Leere Seite beim Anlegen eines neuen Contentelements Wer mit dem Firefox 3.5 ein neues Inhaltselement im TYPO3-Backend...
- TemplaVoila – Tutorial Teil 1 – Templates erstellen und mappen In den letzten beiden T3N-Magazinen (http://t3n.yeebase.com – Open Source und...
- Tutorial: Erstellen einer Mobile Version für Ihre Website mit TYPO3 & TemplaVoila Dieses Tutorial wurde von TYPO3-Coreteam-Member Dmitry Dulepov auf dessen Blog...
Related posts brought to you by Yet Another Related Posts Plugin.
Vielen Dank für das Tutorial.
Gestern habe ich noch an mir gezweifelt und heute ist die Anleitung hier und meine Probleme sind gelöst!
Gedankenübertragung?
Tolles Tutorial, Danke!
Einzig, ich habe eine Frage zum Befüllen von verschachtelten FCEs:
Ausgangspunk > ich habe eine Box in der rechten Randspalte. In diese Box soll der Redakteur beliebig viele Module integrieren können. Also z.B. als erstes ein CE für Videos, danach eine Linkliste über den RTE, etc.
Lege ich ein ganz normales FCE mit Root und einem Element (Voreinstellung Element als “Seite-Inhaltselement”) an, dann kann ich im TV-Modul direkt auf das Plus Icon drücken und ein CE auswählen.
Da ich aber nun die Möglichkeit schaffen möchte, dass der Editor mehrerer solcher Elemente unterbringen kann, habe ich das FCE aufgebohrt mit “Abschnitt von Elementen” und “Container von Element”. Darin befindet sich letztlich wieder ein FCE-Element mit oben genannter Auswahl “Seite-Inhaltslement”.
Wenn ich nun das FCE in der rechten Randspalte anlege, habe ich nun die Möglichkeit, mehrere Inhalte auszuwählen. Soweit so gut. Doch nun zu meinem eigentlich Problem. Ich will hier auch auf das “Hinzufügen-Icon” klicken können, um direkt CEs anlegen zu können. Stattdessen bekomme ich auf dieser Ebene aber nur die Auswahl, einen Datensatz von irgendwo her zu laden. Ich möchte aber die Datensätze direkt im Modul anlegen können, wie auch bei einem normalen Element. Warum funktioniert das nicht oder was mache ich falsch?