from TemplaVoila! to Fluidtemplates

TYPO3 – easy change from TemplaVoila! to Fluidtemplates

A small step for a coder – a big step for the upgrading possibilities of your website!

TemplaVoila! is outdated long time ago, but still around in some TYPO3 installations. A shift to Fluidtemplates, in combination with Backend-Layouts, seems to be a big hassle, but is indeed not so complicated since the principles are pretty much the same. In both cases we map a content form a backend column into a certain area of a predefined html-template.

How to do it

a. first step

First we must find out which elements in our main template are mapped with TemplaVoila!, therefor we need the extension (including Static-Info-Tables) still in action, before we disable it. Important is, whether it is an „inner“ or an „outer“ mapping. With „inner“ we just replace the inside of the html element with a viewhelper and a variable. If it is an „outer“ mapping, we have to replace the the whole html-element as such with the viewhelper. Example of an „inner“ mapping:
<div id="myMapID"><f:format.raw>{variableLaterInTypoScript}</f:format.raw></div>

 

templa voila to fuid templates
the path to the mapping – click on (in may case) „ik_TemplaVoila“

 

templa voila to fluid
„Modify DS /TO“
mouse over element mapping
the mapping – mouse over the html-elements shows their ID-number

 

templa voila to fluid mouse over
mouse over shows the ID of the element („#headline“)

Next you write down a list of the names of the columns („pageHeaderHeadline, banner …“) and the corresponding element names and Ids. The columns names you then use to create a backend layout with the same name, numbering from „0“ left to the accordant last number on the right. Check your old columns, because not all of the mapped IDs are coming from a column in the backend, some are replaced by „lib“ or „temp“ TypoScript variables. So just create the same column structure as it was with TemplaVoila! After assigning the backend layout to the root page, the first step is done.

 

b. second step – changes on the main page template

As said before, some of the „markers“ (viewhelpers) are getting their information from a TypoScript variable, like the Menu e.g.

main template fluid
main template fluid

The others are coming from the backend columns.

Now you take your list and replace the html elements on your list, with an viewhelper („<f:format.raw>{yourVariable}</f:format.raw>“). If it is a „inner mapping“ put the viewhelper inside the element.

We also have to delete everything above and including the html body tag. Don’t forget the closing tags at the end!

You have to do these steps very careful, because getting into a wrong element will mess up the whole thing. Work on a copy of the template file!.

 

c. third step – TypoScript in the root of the website

10 = FLUIDTEMPLATE
10 {
     template = FILE
     file = fileadmin/zazu/default/templates/zazu_template.html
     partialRootPath = fileadmin/zazu/default/templates/Partials
     layoutRootPath = fileadmin/zazu/default/templates/Layouts
        variables {
           h1TopSlogan < styles.content.get
           h1TopSlogan.select.where = colPos=0
           rubrikH < styles.content.get
           rubrikH.select.where = colPos=1
           unterNav < lib.field_unternav
           hauptNav < lib.field_hauptnav
           footerNav < lib.field_footernav
        }
  }

The TemplaVoila! TypoScript can be deleted:

 

10 = USER
10.userFunc = tx_templavoila_pi1>main_page

 

d. fourth step – move the content

This is easy to do if you work on a copy (or „Staging“ as it called by the provider Mittwald). After you deactivate the „static-info-tables“ and the „templaVoila!“ Extension, all content will be in the „main column“ now you have to move the content elements into their old order. It is no problem if you can switch between an old implementation and the new one to check what was where. Otherwise you have to find the order by yourself or memory. Anyway with such a step you should always work on a copy!

 

There are probably some extensions doing similar work in a automated process. But who wants to deal with a complicated extension for a small website. In case it is a bigger site of course one should consider to go into something more automated.

Comments and additions are welcome!

 

Autor: Thomas Hezel

TYPO3 – Dynamic Content Elements (DCE) – kurze Anleitung

Die „TYPO3-Erweiterung“ „Templa Voila!“ gehörte quasi zum Standard des „Content Management Systems“ und wurde fast in jedem Lehrbuch beschrieben. Die Erweiterung hatte zwei wichtige Komponenten: Zum einen eine Abbildungsfunktion („Mapping“) und zum anderen war es möglich eigene Inhaltselemente mit einem selbst gestalteten „Template“ zu erstellen, sogenannte „Flexible Content Elements“ oder „FCEs“. In Zeiten, in denen Abschnitte, Spalten und „Responsive Design“ (eine sich an verschiedene Bildschirme anpassende Gestaltung) immer wichtiger werden sind, optimierte Inhaltselemente, die für den Laiennutzer (oder „Redakteur“) einen der Gestaltung entsprechenden Überblick bieten essenziell. Ein weiterer wichtiger Vorteil von eigenen Elementen ist es, neben einer klaren Gestaltung, den „Redakteur“ davor zu bewahren, dass er durch einen zu freien Umgang mit den originären Inhaltselementen von TYPO3 das sorgsam abgestimmte „responsive Design“ zerstört.

„Templa Voila!“ funktioniert in TYPO3 6.2 nicht mehr.

TYPO3 setzt in der Zukunft verstärkt auf die Template-Funktionen von „FLUID“ und den damit im Zusammenhang stehenden „View-Helpern“, die Inhalte in vorgefertigte „Templates“ einfügen und z.B. auch Schleifen und „if-Funktionen“ zur Verfügung stellen.
Derzeit kann „FLUID“ nur die Mapping-Funktion, aber nicht die frei gestalteten Inhaltselemente ersetzen. Dies funktioniert auch nur sehr eingeschränkt mit der Erweiterung „gridelements“, die sich auf die „TYPO3-Funktion“ „Backendlayouts“ stützt und diese auf die Elemente überträgt.

Einen Ersatz für die „FCEs“ stellt jedoch die Erweiterung „Dynamic Content Elements“ (DCE) dar. Leider hat es der Entwickler noch nicht geschafft eine Anleitung für seine Erweiterung zu schreiben, da er momentan (Mai 2014) dabei ist die Erweiterung komplett in ihrem Kern umzuschreiben. Ein weiterer Nachteil ist, dass der Entwickler anscheinend ziemlich alleine mit der ganzen Sache dasteht und deshalb immer einige Zeit vergeht, bis Änderungen umgesetzt werden können. Ein Einführungsvideo, auf dem man jedoch mehr ahnen als sehen kann, findet sich hier: https://www.youtube.com/watch?v=K08VyCav2ok

Eine kleine Einführung in die Anwendung von Dynamic Content Elements DCE für TYPO3

Voraussetzungen für die Verwendung von DCE

Namensgebung in diesem Blog:
Es werden hier „DCE-Elemente“ beschrieben, die sich auf das ganze „Dynamische Content Element – DCE“ beziehen, die ich dann im Backend auswählen kann. Dann gibt es „Eingabeelemente“, also einzelne Felder, die im jeweiligen „DCE-Element“ enthalten sind und in die der „Redakteur“ später Inhalte eingibt.

Was ist wo?

Nach der Installation findet man unter „Adminwerkzeuge“ ein neues Symbol „DCE“; dies ist der erste Zugang.
Der alternative zweite Zugang befindet sich auf der obersten Ebene des Seitenbaumes (also oberhalb der „Rootseite“). Auf das „TYPO3-Symbol“ klicken, dann „Liste“ und dann neues „DCE-Element“ anlegen.

DCE-Symbol
„DCE-Symbol“
DCE über Liste
neues „DCE-Element“ über „Liste“ anlegen

Klickt man auf „DCE“, kommt das folgende Fenster, in dem man einen Namen für das neue „DCE-Element“ vergeben muss. Danach muss man noch ein erstes Feld anlegen, ansonsten bekommt man beim Speichern eine Fehlermeldung. Allgemein toleriert die Extension keine leeren Felder, dort wo Ausrufezeichen sind.

Namen für das DCE
Namen für das neue Element vergeben (z.B. „3-Spalten“).

Legt man ein neues Feld an, dann sind erst mal 3 Einträge wichtig:

Element Typ wählen
Element Typ, Namen und Variable wählen
  1. Unter Typ muss man zwischen „Element“, „Tab“ und „Sektion“ wählen.
  2. Das Element bekommt einen Namen, also einen „Titel“ dieser sollte für den „Redakteur“ später sinnvoll sein (z.B. „Überschrift Spalte 1“).
  3. Das Element bekommt eine Variable zugewiesen, damit man nachher sagen kann, wohin der Inhalt „gemappt“ werden soll. Die Variable wird dann später ins jeweilige „DCE-Element-Template“ geschrieben.

zu 1.
„Element“ ist ein Inhaltselement, also ein Textfeld, eine „Check-Box“, ein Bild oder ein ganzes „RTE-Element“ etc. Das Ganze wird dann in der Konfiguration gestaltet.
„Tab“ ist ein Register-Tab-Reiter, der im Backendmodul des zu erstellenden „DCE-Elementes“ erscheint. Man kann damit seine Inhalte strukturieren. Alle Elemente, die unter dem „Tab“ angelegt werden, erscheinen dort dann auch.
„Sektion“ ist eine Zusammenfassung von Elementen zu Gruppen, die zusammengehören und deshalb auch in einem Bereich vom „Redakteur“ erfasst werden sollen. Alles was unter der „Sektion“ angelegt wird, erscheint später innerhalb der Sektion.

zu 2.
Der Name erklärt sich von selbst, er muss einfach für den „Redakteur“ sinnvoll sein.

zu 3.
Die Variablen entsprechen mehr oder weniger den „###MARKERN###“, die man bisher bei Templates benutzt hat. In den HTML-Code wird mithilfe der „View-Helper“ die Variable gesetzt und angesprochen. Ungefähr: „Setze hier den Inhalt der Variablen ein und mache mit ihm dies und das …“ Die Variable sollte sinnvoll gewählt werden, sodass man sie später, bei der weiteren Programmierung, wieder identifizieren kann.

Das Eingabe-Element wählen und es über <config> konfigurieren

Eine Reihe tiefer wählt man im Auswahlfeld „Konfiguration“ das Eingabeelement. Hier kommen die Flexforms ins Spiel. Welche Werte möglich und welche nötig sind, dazu habe ich noch keinen Überblick.
Relativ selbst erklärend sind Felder wie „Simple input field“, mit einer einfachen Konfiguration als „Input-Feld“ mit der Größe „30“, das Leerzeichen vor und nach dem Text abschneidet – „trim“ – und als „required“ behandelt, also ausgefüllt werden muss. Bei der Auswahl eines Feldtyps wird die dazugehörige Standardkonfiguration automatisch in das darunter liegende Feld geschrieben.

Anmerkug des Entwicklers Armin Vieweg zu möglichen Konfigurationen:
Hierbei handelt es sich um das ganz normale TCA von TYPO3, nur halt in Flexform (XML) Gewand.
Hier sieht man die ganzen Feld-Typen, die TYPO3 anbietet:
https://docs.typo3.org/typo3cms/TCAReference/

Die Möglichkeiten beim „Simple input field“ werden hier beschrieben:
https://docs.typo3.org/typo3cms/TCAReference/Reference/Columns/Text/Index.html

 

Element wählen mit Konfiguration
Element wählen mit Konfiguration

Das Ganze sieht dann in der Entwicklungsansicht so aus:

DCE Entwurfsansicht mit einem Element
DCE Entwicklungsansicht mit einem Element

Man kann die einzelnen Eingabefelder einklappen und ausklappen. Auf dem dunkelgrauen Feld wird der Variablenname des Eingabefeldes, hier: „{field.ueberLi}“ – also „Überschrift links“.

Unter „Vorschau“ kann man sich die Backendvorschau des DCE-Elements anzeigen lassen, im Beispiel hier ergänzt mit einem „Tab-Element“ mit der Aufschrift: „Ich bin ein Reiter“.
So sieht die Backendvorschau aus:

Backendvorschau DCE
Backendvorschau DCE mit einem „Tab“ und einem Eingabefeld

Das DCE-Element gestalten

Zu jedem „DCE-Element“ gehört ein eigenes Template – das Wichtigste und Schönste daran!
Über den Reiter Template kommt man zum jeweiligen, frei gestaltbaren „DCE-Template“.
Das sieht so aus:

DCE-Template Vorgabe
DCE-Template noch ohne eigenen Inhalt

Hier kommen die „FLUID-View-Helper“ ins Spiel, die dafür sorgen, dass der eingegebene Inhalt nach individuellen Wünschen angezeigt und gestaltet wird.

Was bedeutet hier was?

{namespace dce=Tx_Dce_ViewHelpers}
Hier vergibt der Autor einen Namensraum für die „View-Helper“, von denen man auch eigene programmieren kann. (Für uns erst mal nicht wichtig, darf aber nicht gelöscht werden.)

<f:layout name=“Default“ />
Bedeutung: Dieses individuelle „DCE-Template“ wird in das Haupttemplate „Default“ eingebettet.

Das Haupttemplate „Default“ findet man unter:
typo3conf/ext/dce/Resources/Private/Layouts/Default.html

Mit folgendem Inhalt:
<div class=“tx-dce-pi1″>
<f:render section=“main“ />
</div>

Dies sagt Folgendes:
Nehme das individuelle DCE-Template, also die „Section Main“ und packe es in einen „div-Container“ mit der Klasse „tx-dce-pi1“ und rendere darin den Inhalt der „View-Helper-Sektion-main“.

ACHTUNG oft nervige „div-Container“:
Will man den umgebenden „div-Container“ loswerden, dann muss man statt <f:layout name=“Default“ /> das ebenfalls schon vorhandene Layout <f:layout name=“None“ /> ansprechen, also einfach „Default“ durch „None“ ersetzen. Im vorgegebenen Layout „None“ ist das umgebende „div“ nicht vorhanden. Das dann immer noch erscheinende „csc-default-Wrapping“ von TYPO3 kann man unter dem Reiter „Sonstiges“ ebenfalls noch ausschalten.

<f:section name=“Main“ /> … </f:section>
Innerhalb dieser Sektion kommt das individuelle Template, wie wir es gestalten möchten, also mit dem ganzen „HTML-Code“ und unseren „CSS-Klassen“. Innerhalb dieses „HTML-Codes“ kommen dann die Variablen oder weitere „View-Helper“ die den Inhalt platzieren.

 

Individuelles DCE-Template gestalten

Ein individuelles „DCE-Template“ könnte so aussehen:

mein eigenes DCE-Template
ein einfaches DCE-Template für 3 Spalten

Erklärung „Beispiel-DCE-Template“:
Hier wird mit dem „View-Helper“ „format.html“ – der dafür sorgt, dass „HTML-Code“ nicht einfach nur ausgegeben, sondern auch interpretiert wird – in das „h2-Tag“ der Inhalt mit der Variablen „field.ueberLi“, „field.ueberMi“ und „field.ueberRe“ geschrieben. Dies sind die Inhalte, die mein „Redakteur“ in den von mir angelegten Elementen eingegeben hat und für die ich die Variablennamen individuell festgelegt habe. Verschiedene „View-Helper“, auch eigene „View-Helper“ des Entwicklers von „DCE“, finden sich in der „Template-Inhalt-(Fluid)-Auswahl“.

So sieht dann das entsprechende Eingabefenster des „Redakteurs“ aus, der hier für jede Spalte eine Überschrift vergeben kann:

Eingabefenster des Redakteurs
Eingabefenster des Redakteurs, den Haupttext könnte man dann z.B. neben „Allgemein“ unter einem eigenen „Tab“ „Inhalt“ anlegen

Weiter Eingabefelder können dann noch hinzugefügt werden. Hier gehen auch Datenbankabfragen und komplexe Geschichten wie „for-Schleifen“ und Zugriff auf TYPO3-Daten. Ich hoffe, dass der Entwickler der Erweiterung hier später ein wenig Licht in das Dunkel bringt und die komplexen Funktionen an Beispielen erklärt. Da die „FLUID-View-Helper“ verwendet werden, kann man sich im Umfeld der Erweiterungsentwicklung mit „EXTBASE/FLUID“schon dort informieren.

Ein weiteres Beispiel mit Check-Box, die in unserem Fall dafür sorgt, dass die Überschriften eine ID bekommen

Ein ähnliches Beispiel findet man auch auf dem Video des Entwicklers. Link siehe ganz oben.

Im Bereich „DCE-Element-bearbeiten“ ein neues Inhalts-Element „Check Box“ anlegen. Das funktioniert, indem ich in der Konfigurations-Auswahl einfach „Simple checkbox“ wähle und wie immer einen Titel und einen Variablennamen vergebe.

Check-Box Element im DCE anlegen
Check-Box Element im DCE anlegen

Nun habe ich eine „Check-Box“, die der „Redakteur“ anklicken kann und die den Titel „Alle Überschriften mit ID“ trägt. Diese Information muss nun verarbeitet werden. Ich will also, wenn diese Box angeklickt ist, alle Überschriften zusätzlich mit einer „ID“ ausstatten. Dazu muss ich mein „DCE-Template“ für das „Beispiel-DCE“, also das „3-Spalten-DCE“, erweitern.

Template mit einem if-View-Helper:

DCE-Template mit einem if-view-helper erweitert
„DCE-Template“ mit einem „if-view-helper“ erweitert

Erklärung:
Wenn die „{field.idChBox}-Variable“ wahr ist, also „1“ zeigt, dann nehme den ersten Teil meines Templates ansonsten nehme den Teil der unter „<f:else>“ steht.

So sieht das „DCE-Element“ dann für den „Redakteur“ aus:

Check-Box Redakteursansicht
„Check-Box“ Redakteursansicht, ganz unten: „Alle Überschriften mit ID“

Der Reiter „Wizard“ bei der DCE-Element Gestaltung

Unter dem Reiter „Wizard“ kann man anklicken, ob im „TYPO3-Backend“ das Element direkt zur Auswahl angezeigt wird und wie es dort angezeigt wird. (Sollte man aktivieren!) Zusätzlich muss man ein Symbol vergeben oder es kann ein eigenes „DCE-Element-Symbol“ hochgeladen werden. Hier kann man schön „Corporate Identities“ einhalten und aussagekräftige Symbole entwerfen z.B. für 3-Spalten, Bilder, Dia-Show etc.

Der Reiter „Detailseite“ bei der DCE-Element Gestaltung

Unter dem Reiter „Detailseite“ kann man ein zweites Template anlegen, das eine andere Ansicht des eigenen „DCE-Elementes“ zeigt. Die Ansicht wird dann über einen Link aktiviert, der einen zusätzlichen „Get-Parameter“ erhält. (Falls hier jemand gute Beispiele hat, bitte einen Link in den Kommentaren setzen!)

Der Reiter „Sonstiges“ bei der DCE-Element Gestaltung

Unter dem Reiter „Sonstiges“ findet man die oben erwähnte Funktion zum Ausschalten des TYPO3-Standard-Wrapps „csc-default“ und einem umgebenden „div-Container“. Die weiteren Funktionen, sofern nicht selbsterklärend, werden hoffentlich von der zu erwartenden Anleitung des Entwicklers erklärt.

Der Reiter „Vorschau“ bei der DCE-Element Gestaltung

Unter dem Reiter „Vorschau“ wird eine „Backend-Vorschau“ angezeigt, also so, wie unser „DCE-Element“ vom „Redakteur“ gesehen wird.

Zu guter Letzt:
Aufrufen des DCE-Elementes im Backend durch den „Redakteur“

Der lange Weg

Über „spezielle Elemente“ – „Datensätze einfügen“ – im Fenster „Datensatz einfügen“ ganz unten das gewünschte „DCE“ unter „DYNAMISCHE CONTENT-ELEMENTE“ auswählen.

DCE im Backend auswählen
„DCE“ im „Backend“ auswählen

Der kurze Weg

Im zusätzlichen Reiter „Dynamische Content-Elemente“ das gewünschte Element auswählen.

DCE einfach auswählen
gewünschtes DCE im eigenen Reiter einfach auswählen

Hoffe die Anleitung, war verständlich. Ich habe mich bemüht, ziemlich ausführlich zu sein und keine Schritte zu überspringen. Für Anregungen und Ergänzungen bin ich wie immer dankbar!

Autor: Thomas Hezel

Ergänzungen zu den obigen Erklärungen

Ergänzung von Armin Vieweg 6. Mai 2014:
Unterschiede zwischen den View Helpern <f:format.raw> und <f:format.html>
TYPO3 hat eine Funktion eingebaut, die die Ausgabe von HTML steuert. Dort kann man z.B. Klassen verbieten, Tags verbieten, etc. Oder man kann auch alle <b> z.B. automatisch in <strong> umwandeln lassen. Das alles lässt sich über TypoScript konfigurieren.
f:format.html macht genau das, bzw. ruft die entsprechende Funktion dafür auf. f:format.raw gibt den Code 1:1 aus, so wie er eingegeben wurde.
In Fluid wird HTML immer escaped. Daher braucht man einen der beiden Viewhelper, wobei format.html besonders Sinn macht, wenn man z.B. den Text aus einem RTE ausgeben möchte.

Ergänzung zu Templa Voila!  6. Mai 2014:
Templa Voila! wird von Community weiterentwickelt
Link: Templa Voila! und seine Zukunft