Der visuelle Templating-Mechanismus von TemplaVoila stellt ein komfortables und flexibles Werkzeug dar. Diese Funktionalität kann auch dazu verwendet werden, eigene Inhaltselemente zu definieren. Im Folgenden wird die Erstellung eines Posting-Elements beschrieben, dass aus Datenfeldern für den Titel, ein Bild, beliebigen Freitext und für den Autor besteht.

Gehen sie in das Modul Datei > Dateiliste und laden sie das HTML-Template fce.html hoch. Klicken sie auf das HTML-Symbol neben dem Dateinamen um das Kontext-Menü zu öffnen. Klicken sie auf "TemplaVoila".



Sie können wie gewohnt die Datenfelder der Data Structure erstellen. Folgende Datenfelder benötigen sie:
field_title, field_image, field_text und field_user.



Hier einige Dinge die sie beim Anlegen der Datenfelder beachten sollten:

• Als "Mapping-Type" können sie bei allen Feldern "Element" auswählen.
• Je nach Datenfeld sind unterschiedliche "Editing Types" zu wählen. Bei field_title und field_user können sie den Typ "Plain input field" festlegen. Das Feld field_text benötigt den Typ "Text area for bodytext".
  

Einen Sonderfall stellt das Datenfeld field_image für das Bild dar. Wählen sie in der DropDown-Liste "Editing Type" den Eintrag "Image field" aus.
Im Feld "Mapping rules" können sie nun das HTML-Tag angeben, auf das explizit "gemappt" werden soll. Wenn sie hier "img" eingeben, können sie im Mapping-Modus nur img-Tags auswählen. In großen und unübersichtlichen HTML-Templates kann dieses Feature sehr nützlich sein.



Die folgenden Abbildung zeigt die fertige Data Structure. Klicken sie nun auf den Button "Save as" um die Änderungen zu speichern.



Geben sie einen Namen für das neue Inhaltselement ein (z.B. Posting). Achten sie darauf das sie bei "Template Type" den Typ "Content Element" ausgewählt haben. Dadurch wird kein neues Page Template sonder ein Flexible Content Element erstellt. Klicken sie zum Erstellen auf den Button "CREATE TO and DS".



Gehen sie nun im Modul Web > TemplaVoila auf den "Storage Folder" um eine Übersicht aller Data Structures / Template Objects zu erhalten. Im Karteireiter "Flexible CE" sehen sie nun das neue Flexible Content Element Posting. Natürlich können sie für die Data Structure Posting auch mehrere Template Objects anlegen um z.B. für die selben Daten unterschiedliche Darstellungsvarianten zu ermöglichen.
Klicken sie nun auf "Update mapping" um die HTML-Elemente des HTML-Templates auf die Datenfelder der Data Structure zu mappen.



Der Mapping-Prozess funktioniert im Prinzip wie in der Detailseite Mapping des Moduls Erstellen eines Webauftritts mit TemplaVoila beschrieben.
Folgende Grafik zeigt, welche Datenfelder sie auf welche HTML-Elemente mappen sollen.

1. Zuerst muss der Container ROOT auf das div-Tag des Postings gemappt werden.
2. Der Titel wird auf das h2-Tag gemappt.
3. Das img-Tag wird mit dem Bild ersetzt. Durch die definierte "Mapping rule" kann hier nur ein img-Tag ausgewählt werden.
4. Der Paragraph wird durch den Freitext des Postings ersetzt.
5. Der Name des Autors wird auf das span-Tag gemappt.
   

Speichern sie die Mapping-Informationen ab und gehen sie in das Modul Web > Seite. Legen sie nun auf einer beliebigen Seite (z.B. Homepage) ein neues Inhaltselement an (siehe Abbildung).



Wählen sie nun das Flexible Content Element Posting aus.



Sie können nun die diversen Textfelder befüllen und ein Bild auswählen. Die folgende Abbildung zeigt den Zusammenhang zwischen der Eingabemaske des FCEs und der Ausgabe im Frontend.



Speichern sie die Änderungen ab und verlassen sie die Eingabemaske. Wie die folgende Abbildung zeigt, wurde nun im Content-Bereich "Page content" ein neues Flexible Content Element vom Typ Posting angelegt. Sie können beliebig viele neue FCEs in jedem der dargestellten Bereiche anlegen.