Schritt für Schritt

Schritt 5 : Das Template um 3 Seiten Layouts erweitern

In diesem Schritt wird das Basis Template (3 spaltig) um 3 Seiten Layouts ergäzt. Das Ziel ist es, das im Typo3 gewählt werden kann, welches Layout (1, 2 oder 3 Spalten) die Seite haben soll.

Wie machen es andere?

Je nach Template Bauart gibt es verschiedene Lösungswege wie man mehrere Seiten Layoutsmit TYPO3 realisiert

TemplaVolià

Mit TemplaVolià muss man fast zwingend für jedes Layout ein HTML Template erstellen und dies entsprechend mappen.

TemplaVolià ist in diesem Bericht nicht das Thema... vielleicht ein anderes mal.

Extension

Es gibt auch Extensions, welche für die Wahl von unterschiedlichen Layouts verwendet werden können. Die Extension rlmp_tmplselector aus dem TER von TYPO3 wird wohl für dies am meisten verwendet.

darauf gehe ich nicht weiter ein, Ihr könnt euch die Extension ja mal anschauen

typoscript

Bei reinen typoscript Lösungen sehe ich oft das per Conditions gleich ganze Templates ersetzt werden. Hier einige Beispiele, welche ich diesbezüglich gefunden habe.

In meinem Beitrag werde ich euch eine Lösungsvariante zeigen, welche ohne zusätzliche Extension und nur mit einem HTML Template auskommt.

Als erstes muss man dafür das Template entsprechend umbauen.

Umbau des HTML Templates

Bisher wurden im Template die Marker dafür verwendet, das nur Content aus dem TYPO3 angezeigt wird.


<div id="content" class="clearfix">
	<div id="col1" class="column">
		<div class="content">
			###COL1_CONTENT###
			&nbsp; 
		</div>
	</div>
	<div id="col2" class="column">
		<div class="content">
			###COL2_CONTENT###
			&nbsp; 
		</div>
	</div>
	<div id="col3" class="column">
		<div class="content">
			###COL3_CONTENT###
			&nbsp; 
		</div>
	</div>
</div>
alte html version

Diesen Bereich bauen wir nun wie folgt um, so das der ganze HTML Code der Spalte im TYPO3 erstellt werden muss.


<div id="content" class="clearfix">
		###COL1###
		###COL2###
		###COL3###
</div>
neue html version

Anpassen des Backends mittels TS Config

Bei den Seiteneigenschaften kann man im Backend ein Layout wählen. In der Standard Version sieht dies so aus.

Ziel ist es, anhand dieser Auswahl das Layout der Seite zu verädern. Durch Eingabe von TS Config Code kann man die Labels dieser Auswahl anpassen.


TCEFORM {
	pages {
		# layout der seite
		layout {
			# sicherstellen das feld sichtbar ist
			disabled = 0
			# alternative labels
			altLabels {
				# default label en || label fuer 2te vorhandene sprache
				0 = 3 cols (normal) || 3 spaltig (normal)
				1 = 2 cols: left + normal (layout 1) || 2 spaltig: links + normal (layout 1)
				2 = 2 cols: normal + right (layout 2) || 2 spaltig: normal + rechts (layout 2)
				3 = 1 cols (layout 3) || 1 spaltig (layout 3)
			}
			# layouts entfernen
			# removeItems = 1,2,3
		}
	}
}

TS Config Code

In diesem Beispiel wieder als externe TS Config Datei, welche eingebunden wird.


<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/pfad-zur-datei/tsconfig.ts">

Einbinden einer TSconfig Datei

Mit den || kann man die Labels in den entsprechenden Sprachen angeben, wobei das erste immer das Default Label ist.

default
deutsch

Wie man mit dieser Auswahl das Template verädern kann ist einigen nicht wirklich bekannt. Aus diesem Grund folgt jetzt mein Lösungsvorschlag.

Erweitern des TypoScript Codes

Weil der HTML Code der 3 Spalten aus dem Template entfernt wurde, muss dies jetzt mit typoscript gelöst werden. Für die Formatierung von HTML Code innerhalb dem typoscript Code gibt es verschiedene Lösungswege, somit kann jeder selber festlegen, welche Variante einem mehr zusagt.


# variante 1
stdWrap.wrap (
	<div id="col2" class="column">
		<div class="content">
			|&nbsp;
		</div>
	</div>
)

# variante 2
stdWrap {
	outerWrap = <div id="col2" class="column">|</div>
	innerWrap = <div class="content">|&nbsp;</div>
}
unterschiedlicher code, welcher das selbe macht

Im weiteren Verlauf werde ich vorerst die Variante 2 wählen.

Die Marker welche zuvor nur den Content styles.content.get ausgegeben haben werden mit dem benötigten HTML Code erweitert.


temp.htmlTemplate.marks {
# ...
COL1 = COA
COL1 {
	10 < styles.content.getLeft
	stdWrap {
		outerWrap = <div id="col1" class="column">|</div>
		innerWrap = <div class="content">|&nbsp;</div>
	}
}
COL2 = COA
COL2 {
	10 < styles.content.get
	stdWrap {
		outerWrap = <div id="col2" class="column">|</div>
		innerWrap = <div class="content">|&nbsp;</div>
	}
}
COL3 = COA
COL3 {
	10 < styles.content.getRight
	stdWrap {
		outerWrap = <div id="col3" class="column">|</div>
		innerWrap = <div class="content">|&nbsp;</div>
	}
}
# ...
}
neue version der content spalten

Layouts mittels TYPO3 Conditions beeinflussen

Mit diesem Lösungsvorschlag muss man somit nicht das ganze HTML Template auswechseln, sondern je nach Wunsch nur bestimmte Marker verädern. Im TYPO3 kann man dies mit sogenannten Conditions lösen.

Je nach Auswahl des Layouts werden durch die Conditions nicht benötigte Marker entfernt. In diesem Beispiel benötigen wir TSFE:page|layout.


# Seiten Layouts
[globalVar = TSFE:page|layout = 1]
temp.htmlTemplate.marks {
	# entfernen
	COL3 =
}
[global]

[globalVar = TSFE:page|layout = 2]
temp.htmlTemplate.marks {
	# entfernen
	COL1 =
}
[global]

[globalVar = TSFE:page|layout = 3]
temp.htmlTemplate.marks {
	# entfernen
	COL1 =
	COL3 =
}
[global]
layout durch Conditions verädern

Layouts mittels CSS Code beeinflussen

Auch wenn es nicht wirklich zu Empfehlen ist, könnte man Layouts auch nur durch entsprechenden CSS Code verädern. Das heisst, die HTML Spalten technisch im Code belassen, aber optisch mit CSS Code ausblenden.

Oft habe ich schon gesehen das unterschiedliche CSS Dateien eingebunden werden, um dies zu realisieren. Auch dies geht ebenfalls mit kleinen Anpassungen nur mit einer CSS Datei.

Lösungsvorschlag

Mein Lösungsvorschlag sieht in diesem Fall wie folgt aus. Zuerst machen wir die CSS Class des Body Elements dynamisch. Dazu passen wir das HTML Template an.


<body class="###BODY_CLASS###">

html body tag mit class

Diesen Marker füllen wir entsprechend im typoscript Code ab.


  BODY_CLASS = TEXT
  BODY_CLASS.dataWrap = layout{page:layout} language{TSFE:sys_language_uid} type{TSFE:type} pid{TSFE:id} {field:alias}

das sind etwas mehr als die benötigten felder ;-)

Wenn mit PAGE.bodyTagCObject gearbeitet wird, würde der Code etwa so aussehen.


PAGE.bodyTagCObject = TEXT
PAGE.bodyTagCObject {
  value = <body class="layout{field:layout} language{TSFE:sys_language_uid} type{TSFE:type} pid{TSFE:id} {field:alias}">
  insertData = 1
}

Ãœber die CSS Class layout{page:layout} ist jetzt das entsprechende Layout veräderbar.

Als nächstes erstellen wir eine CSS Datei für die Layouts, welche entsprechend im aktuellen HTML Template eingebunden wird.


/* seiten layouts */

/* 2 spaltig: links + normal (layout 1) */
body.layout1 {
}

body.layout1 #col1 {
}
body.layout1 #col2 {
	width: 74.5%;
	border-right-width: 0;
}
body.layout1 #col3 {
	display: none;
}

/* 2 spaltig: normal + rechts (layout 2) */
body.layout2 {
}

body.layout2 #col1 {
	display: none;
}
body.layout2 #col2 {
	width: 74.5%;
	border-left-width: 0;
}
body.layout2 #col3 {
}

/* 1 spaltig (layout 3) */
body.layout3 {
}

body.layout3 #col1 {
	display: none;
}
body.layout3 #col2 {
	width: 100%;
	border-width: 0;
}
body.layout3 #col3 {
	display: none;
}
layouts.css

<link rel="stylesheet" type="text/css" media="all" href="css/layouts.css" />
css datei einbinden im template
Kleine Demo

Weil das Layout nur im Backend geädert werden kann, aber ich euch gerne zeigen möchte wie dies funktioniert, habe ich auf der Beispiel Seite eine kleine Demo eingebunden. Damit kann das Layout der Seite über einen URL Parameter verädert werden.

Bitte schaut euch den nächsten Absatz an, weshalb ihr über URL Parameter nicht das Template der Seite verädern solltet!

# demo only
[globalVar = GP:layout = 1]
temp.htmlTemplate {
  marks {
    BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout1
  }
}
[global]

[globalVar = GP:layout = 2]
temp.htmlTemplate {
  marks {
   BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout2
  }
}
[global]

[globalVar = GP:layout = 3]
temp.htmlTemplate {
  marks {
    BODY_CLASS = TEXT
    BODY_CLASS.dataWrap = layout3
  }
}
[global]

Technisch gesehen verädere ich damit den Marker BODY_CLASS und somit das gesamte Template der Seite.

Das HTML Gerüst bleibt unverädert, mit CSS werden die nicht gewünschten Spalten ausgeblendet.

Stolperfalle TYPO3 Cache - was man beachten muss

Wenn durch Conditions Änderungen im Template oder im Seitenaufbau verursacht werden, vergisst man oft, das TYPO3 pro Variante eine Seite im Cache anlegt.

In meiner Demo wird zwar nur die CSS Class verädert, trotzdem speichert TYPO3 jede Seite pro URL Parameter in der Datenbank ab.

Auszug der SQL Tabelle

Bei einer Seite mag das gehen, sobald aber alle Seiten in 4 Varianten in der Datenbank gespeichert werden zählt sich das rasch zusammen.

Vielfach sehe ich auch das Conditions für Browser Varianten gemacht werden. Auch hier verhält sich TYPO3 gleich und deshalb rate ich von Browserweichen mittels Conditions ab.

Sicherlich denkt sich nun der eine oder andere, das mein Lösungsvorschlag auch Conditions verwendet. Da es sich jedoch um ein Feld im Backend handelt, kann es nur beim Wechsel des Layouts kurzzeitig zu mehreren Varianten in der Datenbank führen. Sobald der Cache gelöscht wird, kann nur die eine Variante gespeichert werden.

Dies war Schritt 5!

Vielen Dank für's rein schauen.

thefox