TYPO3 Snippet: Eigene Layout Elemente hinzufügen


Dieses Tutorial zeigt, wie man seine eigenen Layouts im TYPO3 V8 oder V9 Backend erstellen und damit Custom Styling für die Content Elemente durchführen kann.

Layouts TSCONFIG erweitern

Hierzu sollte in der TSCONFIG des Templates (Am besten eine page.tsconfig in eigener Design Extension) folgende Zeilen hinzugefügt werden. In diesem Beispiel wollen wir 2 Überschriften (Groß- und Mittelgroß) neben den anderen Layouts hinzufügen:

TCEFORM.tt_content.header_layout {
      addItems.10 = Blaue Überschrift groß (H1)
      addItems.11 = Blaue Überschrift mittel (H2)
}

Nachdem dies geschehen ist, kann man nun im TYPO3 Backend nach einem STRG + F5 Reload auf das gewünschte Content Element gehen und dann das Dropdown-Menü „Layout“ anklicken. Dann sollten unsere beiden Items unten mit angezeigt werden:

Hier sehen wir nun unsere beiden neuen Layouts

Auslagern der jeweiligen Content-Elemente

Da wir NIEMALS im „sysext“ Ordner arbeiten werden, müssen wir den Default Partial Path ändern. Kopiert hierzu entweder die einzelnen HTML Dateien aus folgendem Ordner:

typo3/sysext/fluid_styled_content/Resources/Private/Partials/xyz.html

Oder kopiert den ganzen Ordner in euren eigenen Extensionpfad. In meinem Beispiel ist es noch eine ältere Installation und die Template Dateien sind im fileadmin aufzufinden. Daher werde ich den Ordner auch dort unter „ext“ abspeichern. Euch ist natürlich überlassen, wo der Ordner im Endeffekt hin soll. Man muss ihn nur wieder finden!

Wenn der Ordner jetzt kopiert ist, müssen wir noch unserem Template sagen, dass es ab jetzt nur noch von diesem Pfad die Templates nehmen soll. Das geht entweder über den Object-Browser:

oder wie ich es gemacht habe, per Typoscript direkt:

# Fluid Styled Content auslagern
lib.contentElement {
partialRootPaths {
   10 = fileadmin/template/ext/fluid_styled_content/Resources/Private/Partials/
   }
}

Mit den neuen Layouts arbeiten

Zum Schluss können wir uns mal die Überschrift als Beispiel angucken. Die liegt im Partial Ordner unter „Header/Header.html“.

Die beiden anderen Überschrift-Layouts (10 und 11) haben wir bereits per TSCONFIG hinzugefügt, also müssen wir nur 2 neue Cases anlegen:

...
<f:case value="6">
   <h6 class="{positionClass}">
      <f:link.typolink parameter="{link}">{header}</f:link.typolink>
   </h6>
</f:case>
<!-- UNSERE 10 UND 11 ÜBERSCHRIFTEN! -->
<f:case value="10">
   <h1 class="tbheader1">
      {header}
   </h1>
</f:case>
<f:case value="11">
   <h2 class="tbheader1">
      {header}
   </h2>
</f:case>
<!-- ENDE: UNSERE 10 UND 11 ÜBERSCHRIFTEN! -->
<f:case value="100">
   <f:comment> -- do not show header -- </f:comment>
</f:case>
...

In diesem Beispiel habe ich einfach nur eine CSS Klasse den jeweiligen Überschriften zugewiesen. Es sind natürlich keine Grenzen dabei gesetzt.

Bei Fragen, gerne in die Kommentare! 🙂


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.