TemplaVoilá

Flexibles Templating mit TemplaVoilá

Neben der Erstellung von Vorlagen mit Markern und Subpart findet TemplaVoilá eine immer weitere Verbreitung.

Das Prinzip von TemplaVoilá ist folgendes:

Zunächst erstellt man eine Datenstruktur (DS). Diese Datenstruktur ist eine XML Struktur die mehrere Felder bereitstellt. Felder können zum Beispiel sein "maincontent", "leftcontent" und "rightcontent".

Für eine Datenstruktur kann man mehrere Templateobjekte (TO) erstellen.
Im Templateobjekt wird konfiguriert, welche HTML Datei verwendet werden soll um die Inhalte einzufügen.

TemplaVoilá DS und TO

Der größere Aufwand ist das erstellen der Datenstruktur. Die Erstellung und das Mapping des Templaobjektes geht relativ schnell. Im Backend Seitenmodul erscheinen nur die Felder die im aktuellen Layout auch tatsächlich gemapped sind. Dadurch lassen sich Datenstukturen meisst leicht für viele verschiedene Templateobjekte nutzen.

TemplaVoilá einrichten

Um TemplaVoilá verwenden zu können sind folgende Schritte notwendig.

  • TemplaVoilá aus dem TER installieren
  • Sysfolder für TemplaVoila anlegen
  • Hauptseiten Template so konfigurieren, dass TemplaVoilá die Seite rendert

Um das Hauptseitentemplate so zu konfigurieren das TemplaVoilá die Seite rendert ist nur folgende kleine Änderung notwendig:

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

Eine einfache TemplaVoilá Datenstruktur anlegen

Wenn TYPO3 aus dem TER installiert wurde und ein Sysfolder angelegt wurde. So kann die erste Datenstruktur erstellt werden. Dazu ist das TemplaVoilá Sysfolder über das TYPO3 Listenmodul zu öffnen und ein neuer Datenstruktur Record zu erstellen.

 

Im Bild wird über das TYPO3 Listenmodul eine TemplaVoila Datenstuktur in einen Sysfolder angelegt.
Anlegen eine TemplaVoilá Datenstuktur
Detailansicht einer TemplaVoila Datenstuktur
TemplaVoilá Datastructure Details

Das Formular einer Datenstuktur ist relativ einfach gehalten. Man kann der DS ein Titel, eine Kategorie, eine Vorschaubild, ein Backendlayout und eine Data Structure geben.

Das zentrale ist die Datastructure in die die XML Konfiguration gehört.
Zum Anfang reicht es aus einen "Titel"  die "Category" und ein "Data Structur XML" zu definieren.

Als Category ist die Option "Page Template" zu verwenden. Hinter der Option "Flexible Content Element" verbirgt sich das mächtige Konzept von flexiblen Inhalteselements kurz FCEs. Aus FCEs werden wir später auf dieser Seite eingehen.

Durch ein Backendlayout kann eine Vorgabe gemacht werden, wie die einzelnen Felder der Datenstuktur im Backend gerendert werden. Das erhöht den Komfort für Redakteure da sie leichter erfassen können wo der im Backend eingegebene Inhalt auf der Webseite sichtbar ist.

Die folgende Datenstuktur ist eine sehr einfache TemplaVoilá Datenstruktur die nur die Felder "menu" und "content" bereitstellt:

<T3DataStructure>
    <meta type="array">
        <langChildren type="integer">1</langChildren>
        <langDisable type="integer">1</langDisable>
    </meta>
    <ROOT type="array">
        <tx_templavoila type="array">
            <title>ROOT</title>
            <description>Wählen sie den Rootknoten der Webseite.</description>
            <tags>body</tags>
        </tx_templavoila>
        <type>array</type>
        <el type="array">
            <field_content type="array">
                <tx_templavoila type="array">
                    <title>Main Content Area</title>
                    <description>Wähle den Container wo 
                            der Inhalt der Webseite erscheinen soll.
                    </description>
                    <sample_data type="array">
                        <numIndex index="0">Lorem ipsum dolor sit amet, 
                             consectetuer adipiscing elit. 
                        </numIndex>
                    </sample_data>
                    <eType>ce</eType>
                    <tags>table:outer,td:inner,div:inner,p,h1,h2,h3,h4,h5</tags>
                    <oldStyleColumnNumber>0</oldStyleColumnNumber>
                    <TypoScript>
                           10= RECORDS
                           10.source.current=1
                           10.tables = tt_content
                    </TypoScript>
                </tx_templavoila>
                <TCEforms type="array">
                    <config type="array">
                        <type>group</type>
                        <internal_type>db</internal_type>
                        <allowed>tt_content</allowed>
                        <size>5</size>
                        <maxitems>200</maxitems>
                        <minitems>0</minitems>
                        <multiple>1</multiple>
                        <show_thumbs>1</show_thumbs>
                    </config>
                    <label>Main Content Area</label>
                </TCEforms>
            </field_content>         
            <field_menu type="array">
                <tx_templavoila type="array">
                    <title>Main menu</title>
                    <description>Suche den Container in den 
                              das Menü kommen soll
                    </description>
                    <sample_data type="array">
                        <numIndex index="0">Hier kommt das 
                           Menü herein
                        </numIndex>
                    </sample_data>
                    <eType>TypoScriptObject</eType>
                    <tags>table:inner,ul,div,tr,td</tags>
                    <eType_EXTRA type="array">
                        <objPath>lib.mainMenu</objPath>
                    </eType_EXTRA>
                    <TypoScriptObjPath>lib.mainMenu</TypoScriptObjPath>
                </tx_templavoila>
            </field_menu>
        </el>
    </ROOT>
</T3DataStructure>

Was wird in dieser Datenstruktur eigentlich konfiguriert?

Das Feld content ist so konfiguriert, das Inhalte aus der Tabelle tt_content verwendet werden.

Das Feld menu ist so konfiguriert das es den Inhalt des TypoScript Pfades "lib.mainMenu" rendert. Wir müssen später dafür sorgen, dass dieser TypoScriptPfad auch tatsächlich ein Menü bereithält.

Templateobjekt erstellen

Bevor wir das Templateobjekt erstellen sollten wir zunächst unsere HTML-Vorlage auf den Webserver hochladen. Ein guter Ort ist dafür der Ordner "fileadmin/templates".

Um ein möglichst einfaches Beispiel zu verwenden nutze ich folgendes einfaches HTML Template:

<html>
   <head>
      <title>Titel</title>
   </head>
   <body>
      <div id="menu">
      </div>
      <div id="content">
      </div>
   </body>
</html>

Dieses Template ist im Order "fileadmin/templates/" unter dem Dateinamen "demo.html" zu speichern. Danach kannst du über das Listenmodul das Templateobjekt erstellen.

Im Templateobjekt musst du folgende Angaben machen:

  1. Title: Aussagekräftiger Titel z.b. Mainpage
  2. File reference: Wähle hier die Datei aus die wir eben angelegt haben (filadmin/templates/demo.html)
  3. Datastructure: Wähle hier die Datenstuktur aus, die im vorherigen Schritt angelegt wurde.

Danach kann das Templateobject gepeichert werden.

In diesem Bild ist zu sehen, wie man ein TemplaVoila Templateobjekt anlegen kann.
TemplaVoilá Templateobject anlegen
In diesem Bild ist zu sehen, wie Titel, Dateireferenz und Datenstuktur dem Templateobjekt zugewiesen werden.
Details zum Templateobjekt konfigurieren

Felder der Datenstuktur in bereiche der Vorlage(TO) mappen

Der letzte Schritt ist der Mappingprozess. Dieser wird gestartet indem über die Backendnavigation das TemplaVoila Modul geöffnet wird und das ensprechende Sysfolder ausgewählt wird.

Im Mapping Modul ist zunächst das Templateobjekt auzuwählen.
Für dieses Template wird dann der Rootknoten gemapped. Dazu wird der für den Rootknoten der Menüpunkt Map ausgewählt und in der Vorlage der <body> Tag des HTML ausgewählt. Danach muss man noch den Mode auswählen und bestätigen.

Es gibt den Mode "inner" und "outer". Inner bedeutet, dass der gemappte Inhalt in den Container eingefügt wird. Der Mode "outer" bedeutet das das gemappte Element durch den Inhalt ersetzt wird.

Nachdem der Mode gesetzt wurde, sollte das Mapping gespeichert werden. Die Auswahl des Knoten ist für die Elemente "Main Content Area" und "Main Menu" zu wiederholden. Dazu sind die div's "menu" und "content" vorgesehen.


Der TemplaVoilá Mappingprozess
Mappen des Rootknoten
Inner Mode setzen
Das fertige gemappte Template

Der ganze Mappingprozess hört sich zugegebenermaßen relativ kompliziert an. Da im TemplaVoila Modul sehr visuel gearbeitet wird, sind die Schritte auch schwierig zu beschreiben. Aber du wirst merken, dass das Mapping mit ein wenig Übung schnell von der Hand geht.

Der große Vorteil an diesem Prozess ist, dass der Templatedesigner keine Ahnung von TYPO3 haben muss. Um die Templates in das TYPO3 CMS zu übernehmen sind keine Anpassungen der HTML Dateien selbst notwendig. Aus diesem Grund wird hier der Prozess extrem erleichtert.

Das TemplaVoilá Template verweden.

Jetzt sind noch folgende Schritte notwendig um das TemplaVoila Template zu verwenden:

  1. In den Optionen der Rootseite muss sichergestellt sein, dass das TemplaVoilá Sysfolder als "generall Record Storagepage" verwendet wird.
  2. In den Seitenoptionen muss ebenfalls die Datentruktur "demo" zu anzeige ausgewählt werden.
  3. Im TypoScript Templatedatensatz muss css_styled_content inkludiert sein.

Danach steht dem rendern der Webseite durch TemplaVoilá nichts mehr im Wege :)

Contentsliding - Inhalten in TemplaVoilá Feldern vererben

Manchmal ist es sinnvoll einen Bereich der Seite so zu gestalten, dass der Inhalt der Seite vererbt wird. Dazu gibt es im TYPO3 Core die Eigenschaft "slide" des Recordelements.

Um dieses Feature zu nutzen, ist in der Datenstruktur die Konfiguration des Feldes anzupassen. Als Beispiel zeige ich hier die Konfiguration unseres Seitenfooters:

<field_content_footer type="array">
     <tx_templavoila type="array">
           <title>Footer Content Area</title>
           <description>Pick the HTML element in the template where you want to place the footer content of the site.</description>
           <sample_data type="array">
               <numIndex index="0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque porta erat vitae nisl. In hac habitasse platea dictumst. Aliquam ac urna. Morbi magna mauris, semper ut, varius in, convallis vitae, nulla. Proin massa lorem, mollis eget, rutrum vitae, commodo id, risus. Curabitur scelerisque risus eget odio. Proin laoreet blandit elit. Aenean varius, sapien laoreet dapibus volutpat, risus lorem ornare wisi, lobortis venenatis nisl augue sed purus. Nam suscipit viverra justo. Suspendisse tincidunt. Nullam vel quam.</numIndex>
           </sample_data>
           <eType>ce</eType>
            <tags>table:outer,td:inner,div:inner,p,h1,h2,h3,h4,h5</tags>
            <oldStyleColumnNumber>3</oldStyleColumnNumber>
            <TypoScript>
			10 = CONTENT
			10.table = tt_content
			10.select.where = colPos=3
			10.slide = -1
             </TypoScript>
     </tx_templavoila>
     <TCEforms type="array">
           <config type="array">
                  <type>group</type>
                   <internal_type>db</internal_type>
                   <allowed>tt_content</allowed>
                   <size>5</size>
                   <maxitems>200</maxitems>
                   <minitems>0</minitems>
                    <multiple>1</multiple>
                    <show_thumbs>1</show_thumbs>
               </config>
               <label>Bottom Content Area</label>
    </TCEforms>
</field_content_footer>                     

Im wesentlich gibt es folgende Unterschiede zur normalen Konfiguration:

  • Die oldStyleColumnNum wurde auf 3 geändert. Dadurch werden neue Contentelemente mit dieser Spalte angelegt.
  • Statt dem RECORDS cObject wird CONTENT verwendet, da dieses die Eigenschaft slide bietet.
  • In der where clause werden nur Contentelemente mit colPos 3 verwendet.

Navigation