Rahmen (section_frame / frame_class) und Layouts in Fluidtemplates

Das mit den Fluidtemplates ist zweifellos eine schöne Sache – hat man sich daran gewöhnt, weiß man sie wertzuschätzen. Allerdings ist es schon etwas tricky mit den altbekannten Rahmen (alt: section_frames, neu: frame_class) und Layouts (layout) – zumal sich das von Version 7.6 zu Version 8.7 erneut nicht unwesentlich geändert hat.

Hier ein paar Tipps für den Umgang damit in Version 8.7.

Zunächst holt man sich die „Rahmendatei“ Default.html aus /typo3/sysext/fluid_styled_content/Resources/Private/Layouts ins fileadmin Verzeichnis und macht das dem System per TypoScript bekannt:

lib.contentElement.layoutRootPaths.10 = fileadmin/template/fluid/Layouts

Ist die Datei erst einmal sozusagen im eigenen Zugriff, kann man sich die Standard Inhaltselemente genauer ansehen.

In jedem Datensatz unter „Erscheinungsbild“ finden wir eine Auswahl für „Layout“ und „Frame“. Im Prinzip machen beide das gleiche, nämlich den Rahmen um das Content Element mit einer bestimmten Klasse (bzw. mehreren Klassen) zu versehen. In Version 7.6 war die „Frame“ Auswahl verschwunden und die „layout“ Auswahl zwar vorhanden, jedoch passierte standardmäßig nichts auch wenn man eine Auswahl getroffen hatte. Das musste man selbst in den Templates definieren.

In TYPO3 8.7 sind die aus CSS_styled_content bekannten Klassen unter der „Frame“ Select-Box wieder vorhanden und auch eine Auswahl bei Layout versieht das Element mit einer bestimmten Klasse. Die Auswahl unter „Frame“ vergibt nicht nur eine Klasse, sondern sorgt per CSS dafür, dass das getan wird, was der Klassennamen aussagt, z.B. eine Linie vor oder nach dem Datensatz zu generieren (sofern das optionale statische Template Fluid Content Elements CSS eingebunden ist).

Will man mehr als diese Standards muss man folgendermaßen vorgehen:

Eigene Layout und Frame Klassen definieren und verwenden

Konfiguriert wird die Anzeige im Page TSConfig, die Ausgabe in der Default.html (s.o.).

Der folgende Beispiel Code benennt die 3 Layout Klassen um (auskommentiert ist eine weitere hinzugefügt), deaktiviert die Standard Frame Klassen und fügt zwei eigene hinzu:

TCEFORM {
    tt_content {
        layout {
            #addItems {
               #primary = weiße Box mit Rand
            #}
            altLabels {
                1 = Intro
                2 = Box grün
                3 = Box rot
            }
        }
        frame_class {
            removeItems = ruler-before, ruler-after, indent, indent-left, indent-right
            addItems {
                hintergrundbild-1 = Hintergrund 1
                hintergrundbild-2 = Hintergrund 2
            }
        }
    }
}

Mit den Klassen kann man im Fluidtemplate auf zweierlei Weise umgehen: man lässt sich den Klassennamen direkt ausgeben oder man setzt eine Condition. Letzteres, die Condition, kann man wiederum auf zwei verschiedene Arten verwenden.

Klassenname im Fluidtemplate ausgeben

Das geht sehr einfach mit:

{data.frame_class} bzw. {data.layout}

Wenn man sich die Default.html anschaut, sieht man auch, wo das hin muss. Wichtig zu wissen ist, dass der Klassenname im TSConfig Code definiert wird (identisch ist mit dem „key“ – s. unten stehenden Link), in unserem Beispiel also für den Frame: hintergrundbild-1 bzw. hintergrundbild-2. Die Standard keys, also auch die Klassennamen für das Layout sind 1, 2 und 3.

Klassenname als Condition im Fluidtemplate

Ebenfalls einfach, wenn man weiß wie:

class="{f:if(condition:'{data.layout}==1',then:'class1 class2',else:'class3')}"

Das else ist natürlich optional, kann aber nützlich sein. Wie man sieht kann man beliebig viele Klassennamen in einer solchen Condition angeben.

Condition im Fluidtemplate

Man kann auch eine „echte Condition“ anhand des ausgewählten Layouts oder Frames definieren:

<f:if condition="{data.layout}==1">
...
</f:if>

Zum Abschluss ein komplettes Beispiel. Hier kommt noch etwas Weiteres zum Einsatz und zwar ein Hintergrundbild, welches redaktionell in ein bestimmtes Verzeichnis gelegt wird. Der Dateiname wird in das Feld „Untertitel“ geschrieben. Dieses wird im TSConfig entsprechend umbenannt:

TCEFORM.tt_content.subheader.label = Bilddatei für den Hintergrund (muss im Verzeichnis template/hg liegen)
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:spaceless>
  <f:if condition="{data.frame_class} != none">
    <f:then>
      <section id="c{data.uid}" class="main fullscreen
      {f:if(condition:'{data.layout}==1',then:'style1 dark',else:'style2 dark')}
      {f:if(condition:'{data.layout}==2',then:'left')}
      {f:if(condition:'{data.layout}==3',then:'right')}
      {f:if(condition:'{data.layout}==4',then:'primary')}"
      <f:if condition="{data.subheader}">
      style="background:url('fileadmin/template/hg/{data.subheader}');"
       </f:if>
      >
      ...

Schön in diesem Zusammenhang ist, wenn man den folgenden Viewhelper im Default.html einbaut. Er zeigt dann alle zur Verfügung stehenden Felder des Datensatzes mit den entsprechenden Werten an. Ob und inwieweit man die standardmäßig zur Verfügung stehenden Felder so umbiegt muss man selbst entscheiden – kommt auf das Projekt und die Anforderungen an. Es gibt immer auch die Möglichkeit, eigene Contentelemente zu erstellen, z.B. mit der Extension dce.

<f:debug>{data}</f:debug>

Link