08.03.2018 | TYPO3, TYPO3 Schnipsel
Typo3 – Backendlayout mit weiteren Spalten

Vor allem steht die Frage: Was wollen wir überhaupt? Einfach gesagt eine Seite, die ein Inhaltselement für normalen Inhalt hat und abgesetzt darüber drei weitere Inhaltselemente für Teaser oder ähnliches. Jetzt kann es aber durchaus möglich sein, dass uns die Anzahl der normalen Elemente (Normal, Links, Rechts, Rand) nicht ausreichen. Das ist kein Problem, denn auf einfache Weise lassen sich weitere erstellen.

Definition des Backendlayouts im Typo3 Backend

Zunächst wird ein Backendlayout im Typo3 Backend erstellt. In diesem Fall teaser1, teaser2, teaser3 und content. Die jeweiligen Positionen (1,2,3,0) kommen später im Typoscript zum Tragen, weil danach die Abfrage erfolgt.

Seitenansicht

In der Seitenansicht, lassen sich nach Zuweisung des Backendlayouts die gewünschten Bereiche befüllen. Bei Bedarf kann das Backendlayout auch an Unterseiten vererbt werden.

Im Typoscript

Im Typoscript der Seite kann dann für jeden Bereich eine eigene Variable für die spätere Ausgabe im Template definiert werden, jeweils mit der entsprechenden Position und in diesem Fall auch noch mit einem Wrapper für jeden der drei Bereiche.

variables {	

content		< styles.content.get

teaser1 = COA
teaser1 {
	10 < styles.content.get
	10.select.where = colPos = 1
	10.wrap = <div class="teaser-1"> | </div>
}

teaser2 = COA
teaser2 {
	10 < styles.content.get
	10.select.where = colPos = 2
	10.wrap = <div class="teaser-2"> | </div>
}

teaser3 = COA
teaser3 {
	10 < styles.content.get
	10.select.where = colPos = 3
	10.wrap = <div class="teaser-3"> | </div>
}

...

Im Template 

Die Ausgabe im Template kann dann wie nachfolgend erfolgen.

<div class="row">
<div class="col-md-4"><f:format.raw>{teaser1}</f:format.raw></div> <!-- ./col-md-4 -->
<div class="col-md-4"><f:format.raw>{teaser2}</f:format.raw></div> <!-- ./col-md-4 -->
<div class="col-md-4"><f:format.raw>{teaser3}</f:format.raw></div> <!-- ./col-md-4 -->
</div> <!-- ./row -->

<div class="row">
<div class="col-md-12"><f:format.raw>{content}</f:format.raw></div> <!-- ./col-md-12 -->
</div> <!-- ./row -->