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:

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:


Hier klicken zum Vergrößern

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


Hier klicken zum Vergrößern

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:


Hier klicken zum Vergrößern

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:

Eine einzelne Auswahlmöglichkeit des Selectfields verfügt demnach über folgende Aufbau:

Somit ergibt sich für unser Beispiel folgende Konfiguration:

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.


Hier klicken zum Vergrößern

Viel Spaß damit!

5 Gedanken zu “TemplaVoila FCE: Klassen für Container per Dropdown bzw. Select-Field im Backend auswählbar machen

  1. 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?

  2. 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?

  3. Danke für das Tutorial!

    Kleine erweiterte Frage: ich habe in meinem FCE mehrere Werte die letztendlich alle vom gleichen Schalter abhängen. Kann ich eine einzelne Auswahl verwenden um z.B. die Klassen mehrerer elemente im FCE zu veränden? Ich befürchte mal das geht schon über die Mächtigkeit eines FCE hinaus?

  4. bin gerade über die seite hier (paar jahre später) gestolpert und habe ein ähnliches vorhaben wie hier beschrieben, jedoch mit mehreren, kombinierbaren optionen in der select box.

    die übergebenen klassen sind mit komma getrennt

    class=”commercial,web,animation”

    ich hätte sie aber natürlich gerne ohne.. kann ich den separator irgendwo ändern?

    tausend dank falls jemand eine idee hat, ansonsten wünsch ich euch nachträglich ein gutes 2011 :D

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">