TYPO3-Templates können mit dem Autoparser oder gar „zu Fuß“ nur mit TypoScript erstellt werden. Doch es gibt mehrere Gründe dafür, den klassischen Weg zu verlassen. Manchen ist Typo­Script zu kompliziert oder zu abstrakt und unhandlich. Andere wünschen sich mehr Flexibilität und möchten den Redakteuren ihrer Website ein einfacheres Interface zur Verfügung stellen. Letztere finden mit TemplaVoilà [1] was sie suchen. Aber selbst wenn es zunächst so aussieht, als könne man mit TemplaVoilà eine Website „zusammen klicken“, stellt sich schnell heraus, dass es doch nicht ganz so einfach ist und dass Typo­Script keineswegs ausgedient hat. Ein guter Einstieg ins Thema ist der Podcast von Kasper Skårhøj. In einem einstündigen Film wird eine komplette Website erstellt [2] (bei Problemen beim Abspielen hilft der kostenlose VLC Media Player [3] ). Hier wird nun das Template „YAML für TemplaVoilà“ erläutert sowie die Integration in TYPO3, womit die interaktive Gestaltung per Mausklick ein Stück näher rückt. Das Template kann kostenlos herunter geladen werden [4]. Unter derselben Adresse findet sich auch eine detaillierte Beschreibung zum Umgang mit YAML. Im Artikel aus Platzgründen weggelassene Details werden ebenfalls behandelt. Weitere Fragen können gerne im Forum [5] gestellt werden.

Der Template Zauberer hat heute frei

Auch wenn es zunächst einfacher wäre, kommt der TemplaVoilà-Wizard hier nicht zur Verwendung, denn er legt neben der Seitenstruktur auch Inhalte an, die nicht benötigt werden. Außerdem hilft es enorm, ein Verständnis dafür zu entwickeln, was man gerade tut. Der Lerneffekt ist deutlich größer, wenn alle erforderlichen Schritte selbst durchgeführt werden.

Der Seitenbaum zeigt die Grundstruktur.

Die Rootpage ist ein Shortcut zur Seite Home und enthält das Main Template. Template Storage speichert später wie gewohnt den TypoScript-Code für die einzelnen Elemente (Menüs, Header, Footer usw.). Die TemplaVoilà Datenstruktur (DS) und die Template-Objekte (TO) befinden sich im Storage Folder. Sie werden automatisch dort abgelegt, weil er in der Rootpage als „Allgemeine Datensatzsammlung“ ausgewählt wurde.

Im Setup-Teil des Haupttemplates muss sich mindestens folgender Code befinden, damit TemplaVoilà funktionieren kann:

page = PAGE
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Datenstruktur und Template Objekte

Die Datenstruktur definiert, welche Felder (fields) mit der HTML-Vorlage verbunden werden. Das Template Objekt steuert dagegen, welche der Felder mit welchen HTML-Elementen (Tags) verknüpft sind.

Eine neue Datenstruktur wird mit Hilfe von TemplaVoilà erstellt.

Das Verknüpfen der Felder mit HTML-Tags wird Mapping genannt. TYPO3 kann jedes verknüpfte Feld mit dynamischem Inhalt füllen. Dabei gibt es zwei Arten des Mappings: Inner (Tag bleibt stehen) und Outer (Tag wird entfernt). Ein Beispiel für Outer-Mapping wäre eine Überschrift, die in der Vorlage zwar als <h3> gekennzeichnet ist, auf der Webseite jedoch nicht zwingend vom Typ <h3> sein muss. Der Tag wird also entfernt und per TypoScript dem jeweiligen Element voran- und der schließende Tag nachgestellt (Wrap).

TemplaVoilà zeigt ein fertiges Mapping und zwei spezielle Felder.

Die beiden rot markierten Felder in der vorigen Abbildung beziehen sich nicht auf HTML-Tags, sondern enthalten den Namen der zugehörigen CSS-Dateien sowie die bei YAML bereits enthaltenen CSS-Hacks für den Internet Explorer. Da die Seitenvorlage dadurch „weiß“, welche CSS-Dateien sie braucht, entfällt das lästige Hinzufügen der Header Parts nach jedem Ändern der Datenstruktur (Select HTML header parts). Die Werte werden verwendet, um mit TypoScript die notwendigen Links zu den Stylesheets in den <header> Bereich des jeweiligen HTML-Dokuments zu schreiben.

Das Template erscheint in der Vorschau mit Dummy-Text.

Bevor die Datenstruktur und das Template Objekt gespeichert wird, kann eine Vorschau angesehen werden. Die statischen Beispielinhalte, die in der HTML-Vorlage enthalten waren, sind verschwunden, dafür wurden Dummy-Texte eingesetzt, die in den Feldern frei definierbar sind.

TypoScript Objects und Content Elements

Alle Felder, die als TypoScript Obejct Path definiert wurden, können wie gewohnt mit TypoScript angesprochen werden. Andere Felder, die als Content Elements festgelegt wurden, tauchen im Backend auf und können mit den normalen Inhaltselementen (Text, Text mit Bild, PlugIns usw.) gefüllt werden. Das ist ein entscheidender Vorteil, den TemplaVoilà bietet, weil beliebig viele Backend-Spalten möglich sind, und zwar abhängig von der ausgewählten HTML-Vorlage: Nur die Spalten werden angezeigt, die auch mit Inhalt gefüllt werden können. Das erhöht die Übersichtlichkeit für den Redakteur enorm.

Header, Menüs, Sprachumschaltung und viele andere Elemente auf der Seite werden weiterhin mit TypoScript erzeugt. Da helfen keine Wizards. Aber wer weiß, was die Zukunft bringen wird. Als Beispiel der TypoScript Code, der für die Button-Navigation im oberen Bereich der Website zuständig ist:

lib.buttonNavigation = HMENU
lib.buttonNavigation {
 entryLevel = 0
 1 = TMENU
 1 {
 noBlur = 1
 wrap = <ul>|</ul>
 NO.ATagTitle.field = abstract // description // subtitle
 NO.allWrap = <li>|</li>
 NO.linkWrap = <span>|</span>
 NO.ATagBeforeWrap = 1
 NO.stdWrap.htmlSpecialChars = 1
 ACT = 1
 ACT < .NO
 ACT.allWrap = <li id="current">|</li>
 }
}

Ohne Fleiß kein Preis

Das Ganze funktioniert nur dann, wenn fehlerfreie CSS-Dateien verwendet werden und eine gut vorbereitete HTML-Vorlage mit semantisch korrektem HTML-Code auch ohne TYPO3 bereits Sinnvolles anzeigt. Gut strukturierte HTML-Vorlagen [6] sind eine der wichtigsten Voraussetzung für den erfolgreichen Einsatz in TemplaVoilà.

Flexible Content Elements erlauben unzählige Spalten, die zusätzlich aber auch noch übersichtlich bleiben.

YAML enthält vorgefertigte Subtemplates, die in jeder Inhalts-Spalte eingesetzt werden können und somit abwechselnd ein- und mehrspaltigen Text (auch Tabellen, Bilder usw.) in ein und derselben Inhalts-Spalte erlauben. Die beste Voraussetzung für dieses Feature von TemplaVoilà sind Flexible Content Elements (FCEs).

Flexible Content Elements

Auf konventionelle Art bräuchte man eine Menge Eingabe-Spalten im Backend, um das abgebildete Beispiel zu erreichen. Mit TemplaVoilà sind es genau zwei: Links und Rechts. Der mehrspaltige Inhalt wurde mit FCEs realisiert. Eines hat die Teilung 33-66, das Andere 33-33-33. Das dreispaltige FCE links ist das gleiche wie das auf der rechten Seite. Die Breite der Spalten sind per CSS frei definierbar. Ebenso kann die Höhe festgelegt und auf eine bestimmte Länge begrenzt werden, wenn es gewünscht ist. Ansonsten passen die Spalten sich dem Inhalt an.

Die darüber hinaus verfügbaren CSS-Klassen, die mit dem RTE zusätzlich zugewiesen werden können, setzen der Fantasie und dem Gestaltungsspielraum kaum Grenzen. Und da FCEs normale Inhaltselemente sind, kann alles, was mit TYPO3 überhaupt möglich ist, zum Inhalt dieser Spalten werden. Auch die Ausgabe von PlugIns, Bildern, Tabellen und vieles mehr ist möglich.

Ein FCE wird im Backend von TYPO3 ausgewählt.

Erzeugen von FCEs

Flexible Content Elements erfordern, wie auch die eingangs beschriebenen Seiten-Templates, eine HTML-Vorlage, die das Aussehen des Elements vorgibt. Es wird, wie beschrieben, eine Datenstruktur und eine Template Objekt erstellt und das Mapping durchgeführt. Gespeichert wird es aber nicht als Page Template, sondern als FCE. Dadurch steht es anschließend im Backend bei der Auswahl der bekannten Inhaltselemente zusätzlich zu Verfügung.

Das TemplaVoilà Control-Center zeigt die Gestaltungselemente an.

Das Einsatzgebiet der FCEs ist nicht nur auf die in YAML enthaltenen Subtemplates beschränkt. Richtig interessant wird es, wenn in HTML vordefinierte Elemente zum Einsatz kommen. Mit Sections können bestimmte Teile innerhalb des FCE beliebig oft wiederholt werden. Der Redakteur kann das Design nicht beeinflussen, sondern erfasst lediglich Daten in Form von Texten, Bildern oder Links. Im erwähnten Podcast von Kasper wird das Vorgehen ausführlich demonstriert.

Fazit

Die derzeit verfügbare Version von TemplaVoilà ist ein ebenso stabiles wie flexibles Werkzeug, das den Administrator in die Lage versetzt, auf die Wünsche des Designers noch besser einzugehen und optisch wie technisch hochwertige Websites mit geringerem Zeitaufwand zu produzieren. Damit ist TYPO3 zu einem der leistungsfähigsten CM-Systeme heran gereift, das zusätzlich die Erstellung komplexer und zugleich übersichtlicher Websites gewährleistet. Auch deswegen muss es sich keinesfalls hinter sehr teuren, kommerziellen Lösungen verstecken.

YAML ist in der aktuellen Version 2.5.2 ebenso ausgereift und stabil. Mit YAML erstellte HTML-Vorlagen sehen in jedem unterstützten Browser (das ist die gesamte Palette der aktuellen bis hin zum Internet Explorer 5) weitgehend identisch aus. YAML ist für nicht-kommerziellen Einsatz kostenlos und damit die ideale Ergänzung zu TYPO3 und TemplaVoilà.