Hands on TYPO3 LTS Teil 3: Inhalte mit Fluid Styled Content & Gridelements rendern

1. Layout-Klassen über TSconfig in den Seiteneigenschaften der Rootseite festlegen

  TCEFORM.tt_content {
    layout {
        altLabels {
            1 = One Column
            2 = Two Columns
            3 = Three Columns
        }
        addItems{
            4 = Four Columns
            5 = Five Columns 
            6 = Six Columns
            7 = Seven Columns 
            8 = Eight Columns
            9 = Nine Columns 
            10 = Ten Columns 
            11 = Eleven Columns 
            12 = Twelve Columns 
         
        }
       }
}

2. Die Template-Ordner und Dateien von Fluid Styled Content aus dem Extension-Verzeichnis (typo3/sysext/fluid_styled_content) in den Fileadmin-Ordner kopieren und die richtigen Pfade in den Constants unseres Typoscript-Templates anpassen

  styles.templates {
templateRootPath = fileadmin/Resources/Private/Templates
partialRootPath = fileadmin/Resources/Private/Partials
layoutRootPath = fileadmin/Resources/Private/Layouts
}

3. Den Layouts im HTML-Template per Fluid die entsprechenden Bootstrap-Klassen zuweisen. Das Template für das Text/Bild-Element liegt zum Beispiel im Ordner fluid_styled_content/Resources/Private/Templates/Textmedia.html. Auf die gleiche Art und Weise können alle anderen Content-Elemente angepasst werden.

  <div id="c{data.uid}" class="{f:if(condition: '{data.layout} == 1', then: 'col-md-1')}"></div>

Selbstverständlich kann man mit Fluid Styled Content nicht nur die Klassen anpassen, sondern auch das komplette Frontend-Rendering umschreiben, zum Beispiel für Slideshows oder Bildergalerien. Wem das nicht reicht, der kann außerdem relativ einfach vollständig neue Content Elemente integrieren.  

Pflegen wir nun zwei Inhaltselemente auf der Startseite ein und geben ihnen die Klassen “Six Columns”, bekommen wir das gewünschte zweispaltige Ergebnis:

 

Grid-Elemente mit der Extension Grid Elements umsetzen

Komplexere Inhaltselemente lassen sich auch mit der Extension Grid Elements erstellen. Grid Elements überträgt das Prinzip der Backend Layouts auf Content-Elemente und verschachtelt mehrere Inhaltselemente in einem HTML-Konstrukt. Damit lassen sich nicht nur nested Grids, sondern auch Slider, Bildergalerien oder Tabs einfach umsetzen. Weitere Details zur Extension und eine Installationsanleitung findet Ihr in der offiziellen Dokumentation.

 

Weiter geht's mit Hands on TYPO3 7 LTS Teil 4: Fazit