Anzeige
Anzeige
UX & Design
Artikel merken

Teil 2: Flexible Templates mit TemplaVoilà: TYPO3 Templates mit YAML

Ist TypoScript inzwischen ein alter Hut und „zaubert“ man Websites heutzutage interaktiv mit der Maus? Leider ist das auch mit TemplaVoilà nicht möglich. Hat man aber das Konzept verstanden, wird die Template Erstellung mit TYPO3 sehr flexibel und schnell. Nachdem in der letzten Ausgabe beschrieben wurde, wie YAML mit Hilfe des Template-Autoparsers in TYPO3 integriert wird, kommt in Teil 2 TemplaVoilà zum Einsatz.

6 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

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.

Anzeige
Anzeige

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

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

Listing 1

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.

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

Anzeige
Anzeige

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.

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.

Anzeige
Anzeige

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:

TYPOSCRIPT
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>
 }
}

Listing 2

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

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

Anzeige
Anzeige

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.

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige