In dem ersten Teil dieser Serie haben wir eine HTML-Vorlage mittels des TemplaVoila Wizards dynamisert. Im zweiten Teil haben wir den Header und die Sidebar der Vorlage gemappt.

In dem heutigen Teil der Serie “Dynamisierung mit TemplaVoila” beschäftigen wir uns damit, den Header unseres Design per TypoScript zu setzen. Weiterhin wollen wir uns für die Sidebar ein flexibles Contentelement erstellen.

Beginnen wir mit dem TypoScript für den Header. In der HTML-Vorlage wird der Header wie folgt erzeugt:

<h1><a href="#">Center Stage</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>

Wir wollen, dass die erste Überschrift “TV Demo” lautet und die zweite Überschrift aus dem aktuellen Seitentitel generiert wird. Das TypoScript dazu sieht wie folgt aus:

1 lib.header = COA
2 lib.header.10 = HTML
3 lib.header.10.value = <h1><a href="#">TV Demo</a></h1>
4 lib.header.20 = TEXT
5 lib.header.20.data = page:title
6 lib.header.20.wrap = <h2><a href="#"> | </a></h2>

In Zeile eins erzeugen wir das Objekt “lib.header” und weisen ihm die Klasse “COA” zu. Diese Klasse dient dazu, mehrere Unterobjekte in einem Objekt zusammen zu fassen.

In Zeile 2 und 3 erzeugen wir ein Unterobjekt “lib.header.10″, dass uns die erste Zeile des Headers liefert. Wir benutzen dazu die Klasse “HTML” mit der Eigenschaft “value”.

In Zeile 4 erzeugen wir ein weiteres Unterobjekt “lib.header.20″ der Klasse “TEXT“.

In Zeile 5 benutzen wir die Eigenschaft “stdWrap” dieser Klasse, um den Seitentitel der aktuellen Seite auszulesen.

In Zeile 6 wrappen wir den Seitentitel mit den nötigen HTML-Tags die in der Vorlage verwendet werden.

Dieses TypoScript fügen wir in unser Main template ein. Nun sollte der Header dynamisch ausgegeben werden.

Als nächstes wollen wir die Sidebar mit Inhalten füllen können. Normale Inhaltselemente können wir schon für diese Stelle eingeben. Allerdings sind die Elemente der Vorlage etwas komplizierter aufgebaut:

<div class="boxed">
<h2 class="title">News & Events</h2>
<div class="content">
Der Content der Box
</div>
</div>

Eine Box für die Rechte Seite besteht immer aus einem umfassenden “div”, das die Klasse “boxed” trägt.

Die Überschrift der Box ist von einem “h2″ mit der Klasse “title” umschlossen.

Der eigentliche Inhalt der Box wird von einem “div” mit der Klasse “content” umfasst.

Wir werden dieses Konstrukt nun nachbauen. Der Redakteur kann dann in einem neuen Content Element eine Überschrift für die Box ausfüllen und ein Content Element in die Box einfügen.

Im ersten Schritt erzeugen wir unter “fileadmin/templates” eine Datei contentelemente.html. In dieser Datei speichern wir den HTML-Code für die Box von oben.

Danach mappen wir dieses Contentelement mittels TemplaVoila.

Nun können wir in die rechte Spalte ein Inhaltselement unseres selbst erstellten Typs einfügen:

Ich hoffen, Ihr seid nun in der Lage, weitere Elemente selber zu mappen.

Die Einführung in TemplaVoila ist damit beendet. Ich werde sicherlich weiter Artikel zu dem Thema veröffentlichen. Schaut einfach mal wieder rein!

Popularity: 8%