DCE – die Extension zum Erstellen von eigenen Inhaltselementen auf Basis von Fluidtemplates

Was ist wichtiger, Inhalt oder Design? Immerhin handelt es sich bei TYPO3 um ein Redaktionssystem und im Grunde sollte das Design dieser Tatsache Rechnung tragen und hinreichend „robust“ sein, so dass Inhalte auch dann gut aussehen, wenn sie nicht jeweils aus genau 5 Zeilen „lore ipsum“ bestehen. Für den Integrator gibt es nun eine Alternative zum aufkommenden Groll gegen den Designer: die Extension Dynamic Content Elements (DCE).

Damit ist es möglich, der Redakteurin zielgenaue Eingabefelder zur Verfügung zu stellen, Inhalte auf eine bestimmte Länge zu begrenzen und vor allem die Ausgabe vollständig zu kontrollieren ohne dass etliche Klassen im RTE erstellt und vor allem angewendet werden müssen. Für jeden Integrator ist die Beschäftigung damit und der Einsatz sehr zu empfehlen, fast schon ein Muss.
Die Extension ist sehr gut dokumentiert und es gibt mehrere, sehr hilfreiche Videos von jweiland zur Einführung. Man wird nicht umhin kommen, sich damit ein wenig auseinander zu setzen. Hat man diese – angenehme – Hürde genommen, ist der Weg frei. Ich möchte hier ein paar Dinge dokumentieren, die bei der Arbeit mit DCE wichtig sind und die man vielleicht nicht auf die Schnelle findet, wenn man sie braucht.

Das DCE Element für die Redakteurin sichtbar machen

Hat man entsprechend der Anleitung ein Element erstellt muss man es für die Redakteursgruppe frei schalten. Das geschieht hier:

Zugriffsliste / Feldwerte explizit erlauben/verbieten: / Seiteninhalt: Typ:

Ein Feld nur anzeigen, wenn es gefüllt ist

Das gute alte stdWrap.required = 1 im TypoScript ist in Zeiten von Fluidtemplates ein Auslaufmodell. Man arbeitet statt dessen mit conditions direkt in der Vorlage. Zunächst muss man verhindern, dass das Feld ein Pflichtfeld bei der Eingabe ist (was standardmäßig der Fall ist). Das geht, z.B. bei einem einfachen Input Feld indem man das required entfernt, also statt:

<config>
  <type>input</type>
  <size>30</size>
  <eval>trim,required</eval>
</config>

dieses:

<config>
  <type>input</type>
  <size>30</size>
  <eval>trim</eval>
</config>

Die auf 30 Zeichen festgesetzte Größe könnte man bei der Gelegenheit ebenfalls ändern.
Die condition wird dann im Fluidtemplate gesetzt, z.B. so:

<f:if condition="{field.myfield}">
  <div class="myclass">
    <f:format.html>{field.myfield}</f:format.html>
  </div>
</f:if>

Im DCE Element auf das TypoScript zugreifen und auslesen

Auch das geht. Sogar einfach. Wenn man auf ein im TypoScript konfiguriertes Objekt zugreifen will, so notiert man in seinem DCE Template folgendes:

<f:cObject typoscriptObjectPath="lib.myobjekt" />

Im TypoScript steht dann zum Beispiel folgendes:

lib.myobjekt = TEXT
lib.myobjekt.value = Text, Text, Text

Den Title oder Untertitel der jeweiligen Seite im DCE Element auslesen

Im Grunde auch eine leichte (Fluid-)Übung:

<h1><f:if condition="{page.subtitle}"><f:then>{page.subtitle}</f:then><f:else>{page.title}</f:else></f:if></h1>

lib.myobjekt = TEXT
lib.myobjekt.value = Text, Text, Text

Den Header und die uid des jeweiligen Datensatzes im DCE Element auslesen

Auch das geht einfach und zwar mit:

{contentObject.header} bzw. {contentObject.uid}

Ein Bild mit Beschreibung (Caption) im DCE Element ausgeben

Vorausgesetzt wird, dass für die Konfiguration des Bildes beim Erstellen File Abstraction Layer (recommended) ausgewählt wurde.
Hier der Code für die Ausgabe im DCE Fluidtemplate:

<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference" iteration="iterator">
  <div>
    <figure><f:image src="{fileReference.uid}" treatIdAsReference="1" /></figure>
    <figcation>{fileReference.description}</figcation>
  </div>
</f:for>

Ausführlicher und schön beschrieben auch hier.

Im Backend den header des Datensatzes anzeigen

Man kann konfigurieren, wie das Element im Backend im geschlossenen Zustand angezeigt wird bzw. welche Daten für die Backendanzeige verwendet werden. Dafür wechselt man in den Reiter „Backend Template“. Standardmäßig ist dann das Häkchen gesetzt bei „Use simple backend view“ und die einzelnen Felder, die im Element angelegt wurden, stehen zur Auswahl zur Verfügung. Allerdings gelingt es nicht, den Header des Datensatzes anzeigen zu lassen. Will man das tun, muss man das Häkchen entfernen und dann etwa folgendes eingeben:

{namespace dce=ArminVieweg\Dce\ViewHelpers}
<f:layout name="BackendTemplate" />
 
<f:section name="header">
    <strong>{contentObject.header}</strong><br>
</f:section>
<f:section name="bodytext">
 
</f:section>

Übrigens kann man unter dem Reiter „Sonstiges“ alle bekannten Felder eines TYPO3 Datensatzes zugänglich machen – und muss die im Falle des headers auch tun, da dieser standardmäßig nicht angezeigt wird.