4.1| Rechte, Linke Spalte und Rand ausgeben – Mehrspaltiges Layout

Nun kommen wir zum 4. Kapitel der Tutorialreihe Typo3 Template programmieren mit der neuen Technik Fluid. Wir kommen nun dazu, unser Theme mehrspaltig zu gestalten. Wir lassen uns demnach alle Spalten aus dem Template ausgeben. Die rechts, linke und die mittlere (normal) Spalte sowie den Randbereich.

Ein mehrspaltiges Layout in Typo3 zu realisieren ist relativ einfach.

Zuerst klären wir eine Eventualität. Wenn die Startseite einspaltig sein soll, die Unterseiten aber mehrspaltig, müssen wir eine If Schleife in unser Template einfügen.

Die If Abfrage gibt 2 verschiedene Partials aus, die einmal einen mehrspaltigen Content Bereich enthalten und einmal einen einspaltigen Content Bereich für die Startseite.
Wir ermitteln über die Seitenid, ob der Benutzer auf der Startseite ist und lassen dazu den passenden Contentbereich ausgeben.

<f:if condition="{0:data.uid} == {0:'1'}">
  <f:then>
      <f:render partial="content-home" arguments="{content:content}" />
  </f:then>
  <f:else>
    <div>
  	  <f:render partial="sidebar" arguments="{sidebar:contentleft}" />
      <f:render partial="content" arguments="{content:content}" />
    </div>
  </f:else>
</f:if>

Wenn man auf einer Nebenseite ist, wird zusätzlich eine Sidebar ausgegeben, die sich auch in einem Partial befindet.

Falls wir uns nun auf der Startseite befinden und somit die Uid der Seite 1 ist, wird der Partial „content-home.html“ geladen, welcher folgenden Inhalt hat:

<f:format.raw>{content}</f:format.raw>

Die Variable „content“ wird in der Typoscript Datei im Default Root Template angegeben.

Sind wir nun allerdings auf einer Nebenseite, wessen ID nicht 1 ist, wird der Partial „content.html“ ausgegeben, welcher folgenden Inhalt hat:

<section id="inhalt">
    <article>
    	<f:format.raw>{content}</f:format.raw>
        <f:format.raw>{contentleft}</f:format.raw>
        <f:format.raw>{contentright}</f:format.raw>
        <f:format.raw>{contentrand}</f:format.raw>
    </article>
</section>

Außerdem wird an dieser Stelle ein zweiter Partial ausgegeben, welcher die Siedebar beinhaltet und so aussieht:

<div id="sidebar-l">
	<f:format.raw>{sidebar}</f:format.raw>
</div>

Auch die Variable „sidebar“ wird im Typoscript im Default Root Template angegeben.

Nun gehen wir ins Typo3 CMS 6 Backend und bearbeiten das Default Root Template unter dem Menüpunkt „Template“ im linken Menü.
Dort geben wir folgenden Typoscript Code an, um alle Spalten aus der statischen CMS Seite auslesen zu lassen. Dies geben wir in dem Teil „variables“ innerhalb unseres Fluid Templates an.

variables {

  content < styles.content.get
  content.select.where = colPos = 0

  contentleft < styles.content.get
  contentleft.select.where = colPos = 1

  contentright < styles.content.get
  contentright.select.where = colPos = 2

  contentrand < styles.content.get
  contentrand.select.where = colPos = 3

  }

Wir lassen uns hier alle Spalten der CMS Seite ausgeben. Folgende „colPos“ geben folgende Spalten aus:

colPos 0 = Normal
colPos 1 = Links
colPos 2 = Rechts
colPos 3 = Rand

Das Template lässt sich so nun um einige Spalten und Funktionen erweitern.

Typo3 CMS 6.1 FLUID Template programmieren:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

2 Antworten

  1. Pocoloco sagt:

    Vielen Dank für die tutorials. Ich denke du hast bei den variables Einen Fehler durch copy and paste eingebaut. Es müsste doch lauten contentrand und contentright. So überschreibst du dir ja die Inhalte.

Schreibe einen Kommentar