Das Mapping von Inhaltcontainern

Um eine neue HTML-Vorlage mit TemplaVoilà zu verwenden, muß zunächst eine neue Datenstruktur (DS) erstellt werden. Es versteht sich von selbst, dass die HTML-Vorlage fertig sein muß, das heißt sie entspricht vom Design her bereits den Anforderungen.

Die Vorlage enthält also Container (seien es Tabellen oder DIVs) die nur Beispiel-Inhalte enthalten. Sie wissen aber bereits jetzt, welche Container später mit dynamsichem Inhalt gefüllt werden müssen und wie die Webseite später auszusehen hat. TemplaVoilà ist keinesfalls ein Werkzeug zum Designen von Seiten. Je genauer Sie sich über das Endergebnis im Klaren sind, um so einfacher und schneller wird die Arbeit mit TemplaVoilà von der Hand gehen.

Die beschriebenen Schritte sind durch Screenshots ergänzt. Sie können jedes Bild vergrößern, klicken Sie hierzu auf die jeweilige Abbildung.

Von der HTML-Vorlage zur Datenstruktur

Unten sehen Sie eine (stark vereinfachte) HTML-Vorlage. Die von TYPO3 dynamisch zu ersetzenden Bereiche sind rot hervorgehoben. Wir möchten also die umgebenden DIV-Container stehen lassen und nur den Inhalt ersetzen (Inner Mapping).

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div id="page_margins">
  5.       <div id="page" class="hold_floats">
  6.         <div id="header">
  7.           <p>Dummy Text</p>
  8.         </div>
  9.         <div id="nav">
  10.           <div id="nav_main">
  11.             <p>Dummy Navigation</p>
  12.           </div>
  13.         </div>
  14.         <div id="main">
  15.           <div id="col1">
  16.             <div id="col1_content" class="clearfix">
  17.               <h2>Spalte #col1</h2>
  18.               <p>...</p>
  19.             </div>
  20.           </div>
  21.           <div id="col3">
  22.             <div id="col3_content" class="clearfix">
  23.               <div id="col3_innen" class="floatbox">
  24.                 <h2>Spalte #col3</h2>
  25.                 <p>Dummy Text</p>
  26.               </div>
  27.             </div>
  28.           </div>
  29.         </div>
  30.         <div id="footer">
  31.           <p>Dummy Text</p>
  32.         </div>
  33.       </div>
  34.     </div>
  35.   </body>
  36. </html>

Datenstruktur erzeugen

Erzeugen einer neuen Datenstruktur
Abbildung 1: Neue Datenstruktur.

Speichern Sie Ihre Vorlage im Verzeichnis fileadmin/template/ und klicken Sie dann im Modul Datei auf Dateiliste. Es erscheint die Ordnerstruktur, die sich unterhalb von fileadmin befindet. Ein Klick auf den Ordner template, zeigt im rechten Frame die vorhandenen Vorlagen an. Wenn Sie nun auf das Icon, das neben dem Dateinamen steht, klicken und in dessen Kontext-Menü TemplaVoila auswählen, gelangen Sie in den Bereich, wo Sie die Datenstruktur erstellen können.
Mappen Sie zuerst das Root-Element. Da es sich um eine Seitenvorlage handelt, ist das Root-Element der <body> Tag. Abbildung 4 zeigt die fertig gemappte Datenstruktur.

Elemente mappen

Bereiche der HTML-Vorlage mappen.
Abbildung 2: Einen Bereich mappen.

Als nächstes legen Sie fest, welche Bereiche (DIV-Container) mit welchen fields verbunden werden sollen. Das nebenstehende Bild zeigt das Mappen des Containers <div id="header"> zum Feld field_header.

Als Mapping Type wählen Sie Element. Die Felder Title, Mapping instructions und Sample Data (22 chars) sind nur informativ und haben keine technischen Auswirkungen. Interessant wird es beim Feld Editing Type: Hier legen Sie fest, was TYPO3 verwendet um Inhalte in den Container zu schreiben.

Da der Header (Kopfbereich) der Seite mit TypoScript erzeugt werden soll haben wir als Editing Type TypoScript Object Path gewählt und festgelegt dass das Objekt lib.header heißen soll. Im Ordner Template Storage ist ein TypoScript Template gespeichert (+ext lib.header), das folgenden Inhalt hat (gekürzt):

  1. ...
  2. lib.header = COA
  3. lib.header.10 < plugin.tx_macinasearchbox_pi1
  4. lib.header.20 = HTML
  5. lib.header.20.value = <div id="topnav">
  6. lib.header.30 = HTML
  7. lib.header.30.value = {$headerSkiplinkHtmlCode}
  8. lib.header.40 = HMENU
  9. lib.header.40 {
  10.   special = list
  11.   special.value = {$headerNavigationIncludeList}
  12.   1 = TMENU
  13.   1 {
  14.     noBlur = 1
  15.     wrap = |
  16.     NO = 1
  17.     NO.ATagTitle.field = abstract // description // subtitle
  18.     NO.linkWrap = |&nbsp;&#124;&nbsp; |*| |&nbsp;&#124;&nbsp; |*| |
  19.     NO.allWrap = |
  20.     NO.stdWrap.htmlSpecialChars = 1
  21.     CUR < .NO
  22.     CUR = 1
  23.     CUR.allWrap = <strong>|</strong>
  24.     CUR.doNotLinkIt = 1
  25.     CUR.stdWrap.htmlSpecialChars = 1
  26.   }
  27. }
  28. lib.header.50 = HTML
  29. lib.header.50.value = </div>
  30. lib.header.60 = HTML
  31. lib.header.60.value = {$headerImageHtmlCode}

Auch mit TemplaVoilà ist es also möglich, Inhaltselemente wie gewohnt mit TypoScript zu erzeugen. Der einzige Unterschied besteht darin, dass die Objekte nicht mit temp. sondern mit lib. beginnen.

Der Editing Type TypoScript Object Path ist also nichts anderes als die subparts, die Sie bereits von der Arbeit mit dem Template Auto-parser kennen.

Editing Types

Editing Type Content Elements
Abbildung 3: Editing Type Content Elements

Einer der großen Vorteile von TemplaVoilà besteht darin, dass Sie nicht mehr auf Backend-Spalten angewiesen sind, wie das bei der konventionellen Arbeitsmethode der Fall war. Benötigen Sie einen Container, den der Redakteur mit beliebigen Inhalten füllen soll (Text, Text mit Bild, Plugins usw.), benutzen Sie den Editing Type Content Elements. Das hat zur Folge, dass auf der betreffenden Seite eine "Backend Spalte" sichtbar wird. Davon können beliebig viele erzeugt werden und es sind immer nur die sichtbar, die wirklich gebraucht werden. Im Gegensatz zur konventionellen Methode, wo alle Backend Spalten auf jeder Seite sichtbar sind, auch wenn sie zur Vorlage gar nicht passen.

Es existieren eine ganze Reihe von Editing-Types von denen Sie wahrscheinlich niemals alle benötigen werden. Die wichtigsten sind sicherlich Content Elements und TypoScript Object Path. Hier eine Liste aller Editing-Types mit einer kurzen Erklärung:

  • Plain Input Field
    Ein einzeiliges Eingabefeld zur Texteingabe.
  • Header Field
    Eine Überschrift. Die Besonderheit dieses Elements ist, dass die Überschrift automatisch den selben Link erhält wie das Link field, sofern es ebenfalls vorhanden ist.
  • Header Field, Graphical
    Wie das Header Field, nur grafisch. Es enthält also eine Grafik oder ein Bild.
  • Text area for bodytext
    Ein mehrzeiliges Eingabefeld zur Texteingabe. Damit kann der Redakteur gezwungen werden, an dieser Stelle ausschließlich Text einzugeben, ohne die Möglichkeit diesen zu formatieren.
  • Rich text editor for bodytext
    Hier wird eine Instanz des RTE zur Verfügung gestellt. Der Redakteur hat also alle darin erlaubten Getaltungsmöglichkeiten.
  • Link field
    Hier kann eine URL eingeben werden, also ein Link zur einem fremden Web oder ein Link auf eine interne Seite.
  • Integer value
    Eine Zahl ohne Nachkommastellen. Denkbar wäre hier zum Beispiel eine Tabellenzelle, die der Redakteur mit Werten füllt.
  • Image field
    Eine Grafik oder ein Bild.
  • Image field, fixed W+H
    Eine Grafik oder ein Bild mit vorgegebenen Abmessungen.
  • Content Elements
    Hier können alle verfügbaren Inhaltselemente verwendet werden. Text, Text mit Bild oder Plugins. Diesen Editing Type werden Sie wahrscheinlich am häufigsten verwenden.
  • Selector box
    Eine Auswahlbox, mit der der Redakteur aus einer beliebigen Anzahl von Optionen eine auswählen kann. Die Optionen müssen direkt im XML-Quellcode der Datenstruktur definiert werden.
  • [ NONE ]
    Es wird überhaupt nichts angezeigt. Nützlich ist dieser Typ, wenn Sie einen Container, der in der Vorlage vorhanden ist, durch nichts ersetzen möchten.
  • TypoScript Object Path
    Hier besteht die Möglichkeit, den Inhalt mittels TypoScript zu erzeugen. Diesen Editing Type wählen Sie also für Menüs und alle Elemente, die nicht vom Redakteur beeinflusst werden sollen, sondern auf jeder Seite vorhanden sind.

Wenn Sie nicht genau verstehen, was jeder Editing Type genau ist, probieren Sie es einfach aus. Auf diese Weise werden Sie sehr schnell verstehen, wofür Sie sie verwenden können und welche Eigenschaften sie genau haben.

Vorschau der Datenstruktur

Fertig gemappte Datenstruktur
Abbildung 4: Fertig gemappte Datenstruktur
Voransicht mit Dummy-Text
Abbildung 5: Vorschau mit Dummy-Text

Wenn alle DIV-Container gemappt sind, können Sie das Ergebnis in einer Vorschau kontrollieren, bevor Sie die Datenstruktur speichern. Klicken Sie hierzu auf die Schaltfläche Preview und es erscheint eine Vorschau, wie in Abbildung 5 gezeigt.

In dieser Voransicht (Preview) wird der Inhalt aller Container, die Sie gemappt haben, durch den Beispiel-Inhalt (Sample Data) ersetzt. Es ist also eine Kontrolle, ob das Mapping wie gewünscht funktioniert.

Es ist außerordentlich wichtig, dass bereits jetzt der in der HTML-Vorlage enthaltene Inhalt, der nur zur Demonstration des Designs diente, komplett durch den Beispiel-Inhalt ersetzt wird. Ist das nicht der Fall, hat es keinen Zweck weiter zu machen, weil das Template dann auf keinen Fall richtig funktionieren wird.

Eventuell vorhandene Fehler können Sie beheben, indem Sie auf die Schaltflächen Re-Map (neu mappen) bzw. Ch.Mode (Ändern des Mapping-Typs von Inner auf Outer und umgekehrt) klicken.

Sie können Änderungen durchführen, indem Sie auf das Bleistift-Symbol klicken oder ein Element komplett löschen (Mülleimer Symbol). Beide Symbole sind auf den Abbildungen aus Platzgründen nicht zu sehen.

Datenstruktur speichern

Speichern der Datenstruktur
Abbildung 6: Speichern der Datenstruktur
Template Type
Abbildung 6a: Template Type

Die Datenstruktur muß nun gespeichert werden, damit sie als Vorlage für Webseiten zur Verfügung steht. Klicken Sie auf die Schaltfläche Save as (Abbildung 6) und Sie gelangen zum Dialog, der in Abbildung 6a dargestellt ist.

Hier tragen Sie einen frei wählbaren Namen für die neue Seitenvorlage ein und legen fest, welcher Template Type verwendet werden soll. Da wir hier eine Seitenvorlage erstellen, wählen Sie bitte Page Template. Zum Schluß klicken Sie auf CREATE TO and DS um beides (Template Object und Data Structure) zu erstellen und zu speichern.

Der Template Type "Content Element" dient zum Erzeugen von sogenannten FCEs (Flexible Content Elements), die im nächsten Kapitel behandelt werden.

Der untere Bereich mit der Schaltfläche UPDATE TO (and DS) dient zum Speichern einer bereits bestehenden aber veränderten Datenstruktur.

Ein wenig unglücklich ist diese Lösung, wie ich meine und sie bedarf der Überarbeitung. Passen Sie also auf, dass nicht aus Versehen eine bestehende Seitenvorlage überschreiben. Es bleibt zu hoffen, dass die Entwickler von TemplaVoilà dies in einer der nächsten Versionen etwas übersichtlicher und intuitiver gestalten.

Auswahl DS und TO auf der Seite

Abbildung 7: DS und TO für eine Seite auswählen.

Die neue Vorlage kann jetzt auf jeder Seite ausgewählt werden und zwar wenn Sie auf Seiteneigenschaften bearbeiten klicken. Bei den Vorlagen gibt es einige Besonderheiten zu beachten:

Die Datenstruktur (DS) und das Template Objekt (TO) werden vererbt.

Wenn Sie beispielsweise auf Ihrer Website mit nur einer einzigen Vorlage arbeiten, brauchen Sie eine Vorlage nur einmal auszuwählen: Nämlich in der Rootpage. Alle darunter liegenden Seiten erben automatisch diese Vorlage. Nur auf Seiten, für die Sie eine andere Vorlage verwenden möchten müssen Sie eine neue Auswahl treffen. Beachten Sie aber, dass diese auch dann an die Unterseiten vererbt wird.

Die Vererbung kann abgeschaltet werden

wenn Sie für die Unterseiten bereits hier eine andere Vorlage definieren. Ansonsten lassen die beiden letzten Felder einfach leer.

Seitenvorlagen sind kein Werkzeug zur Gestaltung von Inhalt.

Wenn Sie zum Beispiel eine zweispaltige Seitenvorlage verwenden, auf manchen Seiten aber eine dreispaltige Ansicht innerhalb der Hauptinhaltssplate brauchen, erzeugen Sie hierfür bitte keine neue Seitenvorlage sondern verwenden Sie FCEs (Flexible Content Elements). Diese Arbeitsweise ist wesentlich flexibler. Im nächsten Kapitel erfahren Sie mehr darüber.

Nachdenken und Verstehen ist wichtig.

TemplaVoilà ist ein ausgesprochen leistungsfähiges und flexibles Werkzeug. Allerdings nur dann, wenn man wirklich verstanden hat, worum es geht. Machen Sie sich deshalb bitte die Mühe alles auszuprobieren. Nur wenn Sie hundertprozentig wissen, welche Option sich wie auswirkt, wird TemplaVoilà Ihnen eine Hilfe sein.

Spaltenansicht im Backend

Inhaltselemente im Backend
Abbildung 8: Inhaltselemente im Backend.

Das Backend zeigt nun auf jeder Seite zwei Container die bereit sind, Inhalte aufzunehmen.

Klicken Sie auf das grüne Plus-Symbol und legen Sie beliebige Inhaltselemente an. Ab diesem Punkt ähnelt die Vorgehensweise sehr stark der konventionellen Methode.

Die Abbildung zeigt ein im Main Content eingefügtes Plugin (Index Suche) sowie einen darunter liegenden Hinweistext.