TYPO3 – TemplaVoila, Teil I
von Robert Steindl
In TYPO3 ist der Template Auto-Parser zusammen mit dem Template Selector bereits ein großer Schritt hin zu einer komfortablen Template-Verwaltung. Eine Einschränkung bleibt damit allerdings bestehen: TYPO3 bietet genau vier Positionen für Seitenelemente (Links, Rechts, Normal und Rand). Diese Einschränkung zu umgehen und damit komplexere Seitenstrukturen zu ermöglichen, war die Haupttriebfeder für die Entwicklung von TemplaVoila.
Als Ausgangsbasis dient dieselbe Vorlage wie für den Template Auto-Parser. Die HTML-Datei enthält also einen Header-Teil mit einem Link zu einer externen CSS-Datei, Abschnitte für ein Haupt- und ein Untermenü sowie einen Content-Teil, der mit symbolischem Text gefüllt ist.
Die Installation folgt dem üblichen Muster. Ist sie erfolgreich, sehen Sie in der Modulliste, dass sich das Icon für das Seitenmodul geändert hat. TemplaVoila bietet aber auch die Möglichkeit an, zusätzlich das Standard-Seitenmodul zu aktivieren. Zumindest zu Beginn sollten Sie diese Option aktivieren, um bei Bedarf darauf zurückgreifen zu können.
Um einen Speicherort für die zu erstellenden Templates zu haben, richten Sie im Seitenbaum einen neuen SysFolder ein. Anschließend editieren Sie die Root-Seite Ihres Projekts und geben im Abschnitt Optionen den gerade angelegten Ordner im Feld Allgemeine Datensatzsammlung ein.
Nun legen Sie ein neues Haupttemplate für Ihr Projekt an mit folgendem Inhalt:
page = PAGE page.typeNum = 0 page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page
Das reicht aus, um den Inhalt der Seite komplett durch TemplaVoila darzustellen. Lediglich zusätzliche Objekt wie Menüs müssen noch definiert werden.
Zur Darstellung nutzt auch TemplaVoila ein statisches Template, typischerweise css_styled_content. Wie bei den anderen Template-Verfahren muss also auch hier im Reiter Enthält die entsprechende Auswahl getroffen werden.
Ein Template in TemplaVoila anlegen
Damit TemplaVoila das HTML-Template mit Inhalten füllen kann, muss die nötige Kopplung zu den Inhalten von TYPO3 erstellt werden.
In TemplaVoila geschieht dies auf zwei Ebenen:
Die Datenstruktur (DS) legt fest, welche Elemente verwendet werden (beispielsweise ein Menü, eine Textspalte, ein Bildelement usw.).
Das Template-Objekt (TO) bestimmt, wie die Elemente der Datenstruktur den HTML-Objekten der Template-Datei zugeordnet werden.
Die Datenstruktur
Um Datenstruktur und Template-Objekt anzulegen, gehen Sie im Datei-Modul zu dem Ordner, in dem das HTML-Template liegt, und öffnen durch Klick auf das Icon das Kontextmenü. Dort wählen Sie den Eintrag TemplaVoila.
Das öffnet das sogenannte Mapping Tool. Hier legen Sie zunächst die Datenstruktur fest. Dazu klicken Sie in das Eingabefeld unter ROOT und geben einen Namen ein, z. B. mainmenu (der Vorsatz field_ wird von TemplaVoila automatisch vergeben). Ein Klick auf Add öffnet die Einstellungen für das Mapping.
Der Mapping Type bestimmt die Art des neuen Eintrags. Der Normalfall ist das Element, d. h. ein TYPO3-Inhaltsobjekt wird einem HTML-Element des Templates zugeordnet. Alternativ kann ein Container angelegt werden, der selbst wieder eine Gruppe von Elementen aufnehmen kann. Das bereits vorhandene ROOT-Objekt ist ein solcher Container. Und schließlich lässt sich sogar einem Attribut eines HTML-Elements ein Wert zuordnen. Wir werden dies später benutzen, um beispielwiese Links zu definieren.
Title, Mapping Instructions und Sample Data werden in der Mapping-Liste bzw. der Vorschau angezeigt und helfen dabei, die Funktion eines Eintrags deutlich zu machen.
Der Editing Type legt fest, wie das Feld später gefüllt werden kann. Die Auswahl reicht dabei vom einfachen Eingabefeld über den Richtext-Editor bis hin zu Typoscript-Objekten. Text- oder Bildelemente erscheinen später beim Bearbeiten einer Seite als Formularfelder und lassen sich so bequem mit Inhalten füllen.
Dieser Text ist dem Buch “TYPO3 – Das Praxisbuch für Entwickler” von Robert Steindl entnommen, das im Franzis-Verlag erschienen ist. Das Buch ist hier direkt bestellbar.
Artikel bewerten
(No Ratings Yet)
Loading ...
[...] im ersten Teil dieses Tutorials angesprochenen Editing Types von TemplaVoila bieten Webdesignern und -entwicklern viele [...]