Workshop TemplaVoilà – Teil 2: Eigene Content-Elemente erstellen

Nachdem der Workshop in T3NNr. 13 gezeigt hat, wie Seiten-Templates erstellt und gemappt werden, geht es diesmal darum, eigene Content-Elemente zu konzipieren. Mit Hilfe von TemplaVoilà ist es sehr einfach, diese zu erstellen und dem Redakteur zur Verfügung zu stellen.

HTML und CSS

Wie bereits in Teil 1 werden auch in diesem Workshop ganz einfache und kurzgehaltene Vorlagen verwendet. Prinzipiell können die verschiedenen Bereiche und Content-Elemente beliebig erweitert und mit CSS gestaltet werden.

Als erstes Content-Element erstellen Sie einen zweispaltigen Container, der es ermöglicht, Standard-Content-Elemente in zwei Spalten zu platzieren. Das HTML-Template besteht aus einem umschließenden Container, der wiederum zwei Div-Container enthält. Diese innen liegenden Container werden dann über CSS so formatiert, dass sie nebeneinander stehen.

HTML-Vorlage (zweispalten-50-50.html)

<div class="zweispaltencontainer">
<div class="linke-spalte"></div>
<div class="rechte-spalte"></div>
</div>

CSS-Vorlage (mainstyle.css)

.zweispaltencontainer .linke-spalte{
float:left;
width:50%;
}
.zweispaltencontainer .rechte-spalte{
float:left;
width:50%;
}
.clearer{
float:none;
clear:both;
}

Die HTML-Datei muss, wie auch das Page-Template, im Fileadmin-Ordner auf dem Server Ihrer TYPO3-Installation in einem Unterverzeichnis mit dem Namen „templates“ bereitgestellt werden.
Die CSS-Definitionen werden einfach dem vorhandenen Stylesheet hinzugefügt. Sind die Daten bereitgestellt, können Sie diese im nächsten Schritt mit Hilfe von TYPO3 und TemplaVoilà ansprechen.

Erstellen des Contentelements 2 Spalten
Wir beginnen damit, in das Modul „Filelist“ zu wechseln. Dort browsen wir zu unserem Template-Verzeichnis und klicken mit der Maus auf den Icon rechts neben unserem HTML-Template. In dem kleinen Aufklapp-Menü wählen wir den untersten Punkt „Templa- Voilà“.

templa-auswahl

In der darauf folgenden Seite können wir das Mapping anlegen. Der erste Schritt ist das Mapping des Root-Elements. Das Rootelement ist in unserem Fall genau wie beim Pagetemplate der BodyTag unserer HTML-Datei. Wir klicken also auf den Button „Map“ auf der rechten Seite. Um das Mapping zu erleichtern wählen wir in dem Dropdownmenü „Mapping window“ die Option „Mode: HTML Source“ aus.

htm-view

Uns wird nun der HTML-Code der Seite gezeigt und wir klicken auf den Body.

codeview

Dieser wird nun verwendet und wir wählen „INNER“ als Mapping-Type in der folgenden Maske aus.

codeview-body-inner

Wir können jetzt mit dem Mapping der verschiedenen Elemen- te innerhalb des Body’s fortfahren. Als nächstes legen wir ein neues Feld an (Add new field) und benennen es mit dem (beliebig wählbaren) Namen „field_inhalt- links“ und klicken auf „Add“.Diesem neuen Feld geben wir in der angezeigten Eingabemaske einen Titel „Inhalt Linke Spalte“ und wählen als Editing Type „Content Elements“ aus. Dies ermöglicht uns, später in diesem Bereich auf einer Seite im Backend beliebige Contentelemente hinzu zu fügen. Danach klicken wir auf „ADD“.

mappingwindow-1

Nun müssen wir auch dieses Feld noch mappen und klicken hierfür auf der rechten Seite auf „map“. In der HTML-Ansicht wählen wir den Container für die linke Spalte <div class=“linke-spalte“> aus und wählen INNER als Mapping-Type.
Wir wiederholen den Prozess jetzt nochmal genau so für die rechte Spalte. Als Namen vergeben wir „field_inhaltrechts“ und klicken auf „Add“.
Diesem neuen Feld geben wir in der angezeigten Eingabemas- ke einen Titel „Inhalt Rechte Spalte“ und wählen als Editing Type „Content Elements“ aus. Nach dem wir auch dieses Feld erstellt haben, müssen wir es noch mappen.

mapping-overview

Nun ist unser Mapping abgeschlossen und wir klicken auf „Save as“ in der unteren Leiste. Auf der nächsten Seite vergeben wir dem Contentelement einen Namen (z.B. Zweispalten 50-50), wählen in der Dropdownbox „Content Element“ aus und drücken „Create TO and DS“.
Unser Contentelement wird jetzt im General Storage-Folder als DS und TO gespeichert.

Dieses Contentelement sollte jetzt beim anlegen eines neuen Contentelements schon in der Liste der vorhandenen Elemente (Assistent) erscheinen. Jedoch verwendet es hier noch den Standardicon welcher wenig über das Element aussagt.
Gerade wenn man mehrere eigene Contentelemente zur Verfügung stellen will, ist es hilfreich eigene Icons und Beschreibungen für jedes Element zu hinterlegen. Hierfür wechsen wir ins TV-Modul in der linken Hauptnavigation und wählen unseren General Storage Ordner. In den Reitern oben wählen wir den Reiter „flexible Content Elements“ und sehen dort das DS und TO unseres neuen Elements.

to-zweispalten

Wir klicken hier auf den Bleistift unseres Templates Objektes (to) und gelangen zu einer eigentlich selbsterklärenden Maske. Hier können wir eine Beschreibung des Elements hinterlegen. Wir tragen zum Beispiel folgenden Text ein: „Zweispalten Container mit einer 50%-50% Aufteilung“. Im Feld „Icon“ können wir einen Icon für das FCE (Flexible Content Element) angeben. Dieser Icon muss entweder vom Dateityp PNG oder GIF sein und wird 1:1 dargestellt. Letzteres bedeutet, dass das Icon in seiner Größe nicht skaliert wird sondern genau so groß dargestellt wird wie es angelegt ist.
Nach dem speichern wird unser Contentelement beim anlegen neuer Inhalte auf einer Seite im Assistenten mit Icon und Beschreibung gelistet.
So lassen sich die neu erstellten FCE ́s sehr einfach übersichtlich präsentieren.

Erstellen des Contentelements Bilderüberschrift

Um zu veranschaulichen wie Typoskipt in den FCE ́s funktioniert werden wir ein Contentelement erstellten das einem Redakteur ermöglicht eine Überschrift einzufügen die mit als Bild dargestellt wird. Somit ist es möglich Überschriften zu erstellen die z.B. mit einer bestimmten Schriftart gerendert werden.
Auch hierfür brauchen wir eine HTML-Vorlage.

<html><head>
<title>Headline</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css">
</head><body>
<div class="bilderheadliner"></div>
</body></html>

Diese Datei stellen wir auch im Template Ordner des Fileadmin bereit. Wir wechseln wieder in das Filelist-Modul in der linken Navigation und browsen in den Template-Ordner und rufen per klick auf den Icon der Datei das TV-Modul auf. Wir mappen wie bei den anderen Elementen auch den Body-Tag als root-Element und wählen INNER als Mapping-Type.

Dann erstellen wir ein neues Field (field_headline) und drücken auf ADD.
Im der folgenden Maske vergeben wir den Titel „Bilderheadline“ und wählen als Editing-Type „Header field, Graphical“ aus und drücken auf ADD. Danach mappen wir dieses Feld und wählen beim Mapping den Tag „<div class=“bilderheadline“></div> aus. Auch hier ist der Mapping-Type „INNER“. Um dem gerenderten Bild einen Alt-Tag vergeben zu können fügen wir dann noch ein Feld hinzu (field_alttag) und geben auch diesem in der folgenden Maske einen Titel (Alt-Tag derHeadline). Als Editing-Type wählen wir hier „Plain Input“ aus und drücken auf Add. Da dieses Element nicht dargestellt wird, müssen wir es auch nicht mappen. Wir werden später im Typoskript dem gerenderten Bild dieses Feld als Alt-Tag hinzufügen. Wir speichern das Element nur per klick auf „save as“ und geben ihm einen Namen (Bilderheadline) und speichern es als neues Flexible Content Element.

Nun müssen wir ins TV-Modul in der linken Navigation wechseln und wählen unter dem Reiter „Flexible Content“ und scrollen zu unserem Element. Dort klicken wir auf den Bleistift der ersten Zeile und bekommen das XML dieses Elementes zu sehen.

xml-edit

Suchen Sie darin folgenden Bereich:

10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = 200,20
backColor = #999999
10 = TEXT
10.text.current = 1
10.text.case = upper
10.fontColor = #FFCC00
10.fontFile = t3lib/fonts/vera.ttf
10.niceText = 0
10.offset = 0,14
10.fontSize = 14
}

Hier sehen wir, dass das Bild mittels Gifbuilder und den entsprechenden Typoskriptangaben erstellt wird.
Diese können wir nun an unsere Bedürfnisse anpassen. Informationen zu den Parametern die wir hier verwenden können findet man in dem jeweiligen Kapitel der TS-REF.

Ein angepasstes Beispiel könnte wie folgt aussehen:

10 = IMAGE
10.altText.field=field_alttag//field_bilderheadline
10.file = GIFBUILDER
10.file {
XY = [10.w],20
backColor = #999999
10 = TEXT
10.text.current = 1
10.text.case = upper
10.fontColor = #FFCC00
10.fontFile = t3lib/fonts/vera.ttf
10.niceText = 0
10.offset = 0,14
10.fontSize = 14
}

Wichtig ist hier die Zeile mit dem alt-Tag. Wie man sehen kann, verwenden wir das nicht gemappte Feld „field_alttag“ um dem Bild einen Alt-tag zu vergeben. Wird dieser nicht angegeben, wird der Inhalt des Feldes „Bilderheadline“ vergeben.
Die zweite Änderung die hier gemacht wurde, ist die Breite des erstellten Bildes. Hier wurde die feste Breite von 200px auf einen variablen Wert gesetzt. Dieser orientiert sich an dem einge- benen Text (10=TEXT).
Sind wir mit unseren Definitionen fertig, speichern wir das XML.

Wichtig: verändern wir das Mapping dieses Elementes, werden alle von uns im Typoskript dieses XML getätigten Änderungen gelöscht. Es empfiehlt sich also, vor einem Ändern des Mappings alle von uns eingegebenen Parametern vorher zu kopieren, da diese nach dem neuen Mapping überschrieben werden.
Wir können nun, wie im vorigen FCE, auch diesem Element einen Icon und eine Beschreibung hinzufügen. Nun sollte im Assitenten für Contentelemente auch dieses Element erscheinen und Redakteure können einfach einen Text und ein Alt-tag angeben und es wird im Frontend ein Bild mit den gewählten Parametern dargestellt.

Generell ist folgendes festzuhalten: Jedes Feld im XML hat einen Part, in dem man Typoskript angeben und somit seine FCEs an seine Bedürfnisse anpassen kann.

Fazit:

Braucht man ein Contentelement, welches Standardmäßig mit TYPO3 nicht mitgeliefert wird oder es sehr aufwändig wäre dieses an den Style der Seite anzupassen, ist es mit TV einfach, dieses zu erstellen.
Haben wir erst das HMTL und das dazugehörige CSS erstellt, ist das eigentliche erstellen nur ein kleiner Schritt. Mit TV lassen sich auch komplexe Elemente erstellen und die Möglichkeit Typoskript einzusetzen lässt fast keine Wünsche offen.

Diese Seite Bookmarken: