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

Workshop TemplaVoilà – Teil 2: Eigene Content-Elemente erstellen

Nachdem der Workshop in T3NNr. 13 gezeigt hat, wie Seiten-Templates erstellt und gemappt werden, geht es diesmal darum, eigene Content-Elemente zu konzipieren. Mit Hilfe von TemplaVoilà ist es sehr einfach, diese zu erstellen und dem Redakteur zur Verfügung zu stellen.
Weiterlesen

Maximale Bildgröße für FCE in TemplaVoila

In vielen meiner Webs benutze ich TemplaVoila – hier setze ich FCE zum unterteilen der Seiten ein z.B. 50%-50%. Jedoch hatte ich immer das Problem das man beim einpflegen von Bildern  darauf achten muss wie breit die Spalten sind. Benutze man zu große Bilder wurde dadurch der <div> Container aufgeschoben und zerstörte die Darstellung. Die in den Konstanten angegebene “Max Image Width” [styles.content.imgtext.maxW] galt ja nur für den gesamten Content Bereich.

Um im TemplaVoila eine “Max Image Width” zu vergeben muss man lediglich wenige Zeilen Code unter “Data processing” im Feld TypoScript Code einfügen (5.maxImageWidth = 370 nach bedarf anpassen) :

5 = LOAD_REGISTER
5.maxImageWidth = 370
10= RECORDS
10.source.current=1
10.tables = tt_content
15 = RESTORE_REGISTER

Own FCE with image and text

My first chapter is done! In this i show how to create an FCE using TemplaVoila which creates a ContentElement. This CE is an image with text on it, linked to a page and is wrapped with an alt-Tag for the image. The editor simply chooses an imaged, choose a link and enter a Text which is used on the image and also is used as an alt-Tag for the image.

See the tutorial here!