Unterschiedliche Layouts für TYPO3 Seiten – auch für Redakteure einfach und unkompliziert
Juli 3, 2012 | Posted by Rainer Fischinger | TYPO3 Wissen Tags: automaketemplate, Backend Layout, spalten, templavoila, Tricks, Tutorial, typo3
Sehr oft benötigt man 2-3 unterschiedliche Layouts für eine TYPO3-Webseite. Je nach Umfang des Webprojekts kann man sich hier mit kleinen Extensions behelfen, wie zum Beispiel multicolumn. Wer nur einige Unterseiten anpassen muss, kann mit dieser TYPO3-Erweiterung problemlos nachträglich Spalten einfügen. Kommt es jedoch bei mittleren bis größeren Projekten dazu, Spaltenlayouts flexibel zu halten oder muss diese Anpassung auch für Redakteure nutzbar sein, gibt es eine wirklich sehr gute Lösung für alle, die nicht mit TemplaVoilá sondern automaketemplate arbeiten.
Im Blog der Internetagentur “undkonsorten” aus Berlin habe ich diese wirklich gute Lösung gefunden und möcht hier noch ein paar Ergänzungen mitgeben. Der Lösungsansatz verfolgt die “Backend Layouts” in TYPO3, somit kann in den Seiteneigenschaften jeder einzelnen Unterseite (natürlich vererbbar) angegeben werden, welches Spaltenlayout gewählt werden soll. Hier der Link, um sich die Lösung von “undkonsorten” einmal anzusehen:
http://blog.undkonsorten.com/typo3-4-5-tutorial-backend-layout-nutzen
Wer nun mit automaketemplate arbeitet, benötigt für das Setup ein paar zusätzliche Informationen. Schließlich muss man TYPO3 noch beibringen, welche Template-Datei es laden soll und unter Umständen möchte man auch das Bild-Rendering abhängig vom gewählten Layout einstellen. So kann man gezielt definieren, wie groß Bilder in Content-Elementen sein dürfen, und verhindert damit zerstörte Designs. Wer sein Template gemäß den Anleitungen in unserem Artikel über die erste TYPO3-Seite erstellt hat, kann mit dieser Lösung hier arbeiten:
Wir arbeiten zuerst die Schritte im “undkonsorten” Blog ab (die Backend-Layouts in einem SysFolder erstellen, Install-Tool) und erstellen nun für jedes unserer Layouts eine eigene HTML-Datei. Jede Datei wird mit CSS so gestyled, wie man sich das Layout wünscht und die zugehörigen Marker (z.B.: ###CONTENT### oder ###CONTENT_LINKS###) werden jeweils eingefügt. Nun die Dateien hochladen, und folgendes im Setup der Root-Templates eintragen:
Setup davor:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template/main/template_1.html ( # Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 0
DIV.all = 0
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/main/
}
Setup danach:
# Read the template file:content = CASE
content{
key.cObject = TEXT
key.cObject {
field = backend_layout
ifEmpty.cObject = TEXT
ifEmpty.cObject.data = levelfield: -2, backend_layout_next_level, slide
}
2 = FILE
2.file = fileadmin/template/main/template-einspaltig.html
3 = FILE
3.file = fileadmin/template/main/template-dreispaltig-variante2.html
4 = FILE
4.file = fileadmin/template/main/template-dreispaltig-variante1.html
5 = FILE
5.file = fileadmin/template/main/template-zweispaltig-variante1.html
default = FILE
default.file = fileadmin/template/main/template-einspaltig.html
}
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
#HEAD.rmTagSections = title
DIV.all = 0
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/main/
}
Damit erreichen wir, dass je nach gewähltem Backend-Layout eine andere Template-Datei von TYPO3 geladen wird. Die Zahlen der einzelnen Layouts (2 = FILE) spiegeln dabei immer die ID des Elements im SysOrdner wider. Damit wir nun auch je nach Backend-Layout die richtigen Bildmaße haben, ist folgendes noch unbedingt notwendig:
temp.ttcontent.image < tt_content.image
tt_content {
image.20.maxW.cObject = CASE
image.20.maxW.cObject {
key.field = colPos
0 = CASE
0 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 660
3 = TEXT
3.value = 175
4 = TEXT
4.value = 455
5 = TEXT
5.value = 455
}
1 = CASE
1 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 175
3 = TEXT
3.value = 455
4 = TEXT
4.value = 175
}
2 = CASE
2 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 175
3 = TEXT
3.value = 175
4 = TEXT
4.value = 175
5 = TEXT
5.value = 380
}
}
}
temp.ttcontent.textpic < tt_content.textpic.20
tt_content {
textpic.20.maxW.cObject = CASE
textpic.20.maxW.cObject {
key.field = colPos
0 = CASE
0 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 660
3 = TEXT
3.value = 175
4 = TEXT
4.value = 455
5 = TEXT
5.value = 455
}
1 = CASE
1 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 175
3 = TEXT
3.value = 455
4 = TEXT
4.value = 175
}
2 = CASE
2 {
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.data = page:backend_layout
2 = TEXT
2.value = 175
3 = TEXT
3.value = 175
4 = TEXT
4.value = 175
5 = TEXT
5.value = 380
}
}
}
So können je nach Backend-Layout ganz einfach die maximalen Bildgrößen angepasst werden. Die Aufteilung erfolgt nach den Spalten (colPos 0, 1 und 2 also Normal, Links und Rechts) und danach für jedes der Backend-Layouts (ID 2-5 in diesem Beispiel).
Tags: automaketemplate, Backend Layout, spalten, templavoila, Tricks, Tutorial, typo3
