TYPO3 - Template-Auswahl
Aus Wikizone
Version vom 23. Januar 2014, 17:28 Uhr von 149.172.152.210 (Diskussion) (→Beispiel für Auswahl eines Fluid Templates)
Diese Seite zeigt verschiedene Methoden um Templates auszuwählen
Template Switcher Extension[Bearbeiten]
Funktioniert sehr zuverlässig. Thumbnails möglich. Old School weil es früher keine guten Bordmittel für komplexe Layouts gab.
Template Switch über Backend Layout Feld (BE-Grids)[Bearbeiten]
ab 4.5
BE-Layouts definieren[Bearbeiten]
- Ordner erstellen und Datensätze "Backendlayout" erstellen.
- Über TS den Ort der Layouts definieren (Zugriff für Redakteure nicht vergessen):
TypoScript
##id storagepage of gridlayout TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29 TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29 ##hide "no backend layout" label #TCEFORM.pages.backend_layout_next_level.removeItems= -1 #TCEFORM.pages.backend_layout.removeItems= -1 #give "empty" label a better name TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout
Beispiel Layout Grid (Achtung colspan mit kleinem s)
backend_layout {
colCount = 2
rowCount = 2
rows {
1 {
columns {
1 {
name = Oben
colPos = 0
colspan = 2
}
}
}
2 {
columns {
1 {
name = Links
colPos = 1
}
2 {
name = Rechts
colPos = 2
}
}
}
}
}
Frontend Anpassungen anhand backend_layout Feld[Bearbeiten]
Beispiel CSS Klasse für Body-Tag[Bearbeiten]
##... class for body tag (usefull for css definitions)
temp.selectbodytag = CASE
temp.selectbodytag {
key.field = backend_layout
key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide
default = TEXT
default.value = l1
1 = TEXT
1.value = l1
2 = TEXT
2.value = l2
3 = TEXT
3.value = l3
stdWrap.wrap = <body class ="|">
}
page.bodyTagCObject < temp.selectbodytag
Beispiel für Auswahl verschiedener Header Dateien[Bearbeiten]
page.headerData.10 = CASE
page.headerData.10 {
stdWrap.wrap = <link rel="stylesheet" type="text/css" href="fileadmin/templates/css/|" media="all" />
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = layout1.css
2 = TEXT
2.value = layout2.css
3 = TEXT
3.value = layout3.css
}
Beispiel für Auswahl eines Fluid Templates[Bearbeiten]
### FLUID ###
// include in fluid template via cObject Viewhelper: <f:cObject typoscriptObjectPath="lib.content" />
lib.content < styles.content.get
lib.contentLeft < styles.content.getLeft
lib.contentRight < styles.content.getRight
temp.myFluid = FLUIDTEMPLATE
temp.myFluid{
#file = fileadmin/templates/fluid/portal.html
partialRootPath = fileadmin/templates/fluid/partials/
layoutRootPath = fileadmin/templates/fluid/layouts/
variables {
// Variante: include in fluid template like this: <f:format.raw>{content}</f:format.raw>
# content < styles.content.get
# content.select.where = colPos = 0
# ...
}
file.cObject = CASE
file.cObject{
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = fileadmin/templates/fluid/portal.html
2 = TEXT
2.value = fileadmin/templates/fluid/oneCol.html
3 = TEXT
3.value = fileadmin/templates/fluid/twoCols.html
}
}
#Zusätzlicher Main Wrap um den Content in Abhängigkeit vom backend_layout (praktisch für zusätzliche CSS Definitionen und wenn man die Body Klasse nicht nutzen will.
#temp.myFluid.stdWrap.wrap.cObject = CASE
#temp.myFluid.stdWrap.wrap.cObject {
# key.field = backend_layout
# key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide
# default = TEXT
# default.value = <div class="portal">|</div>
# 2 = TEXT
# 2.value = <div class="oneCol">|</div>
# 3 = TEXT
# 3.value = <div class="twoCols">|</div>
#}
page.10 < temp.myFluid
Template Switch über FE-Layout Feld[Bearbeiten]
Schnelle Lösung für viele Seiten ausreichend wenn keine komplexen Layouts notwendig sind.
Bezeichnungen anpassen[Bearbeiten]
TypoScript
TCEFORM.pages.layout {
altLabels {
0 = 1 Spalter
1 = 2 Spalter
2 = Portalseite
}
removeItems = 3
}
Template Auswahl[Bearbeiten]
page.10 = TEMPLATE page.10.template = FILE page.10.template.file = fileadmin/templates/html/1col.html [globalVar = TSFE:page|layout = 1] page.10.template.file = fileadmin/template/html/2col.html [globalVar = TSFE:page|layout = 2] page.10.template.file = fileadmin/template/html/portal.html [global]
Template Auswahl für Fluid[Bearbeiten]
Todo
Spalten abhängig von BE-Layout Feld ausgeben[Bearbeiten]
Geht von Subparts "contentWrap" aus.
page = PAGE
page {
##css class in body tag (s.o.)
bodyTagCObject < temp.selectbodytag
10 = TEMPLATE
...
10.subparts {
contentWrap = COA
contentWrap.10 < styles.content.get
contentWrap.10.wrap = <div id="contentTop">|</div>
contentWrap.20 = COA
contentWrap.20.if {
## backend layout query by uid
value = 1,2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
contentWrap.20.wrap = <div> | </div>
contentWrap.20.10 < styles.content.get
contentWrap.20.10.select.where = colPos = 1
contentWrap.20.10.wrap = <div id="contentLeft">|</div>
contentWrap.20.20 = COA
contentWrap.20.20 {
if {
value = 2
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 2
10.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.30 = COA
contentWrap.20.30 {
if {
value = 3
isInList.data = levelfield:-2,backend_layout_next_level,slide
isInList.override.data = TSFE:page|backend_layout
}
10 < styles.content.get
10.select.where = colPos = 5
10.wrap = <div class="contentMiddle">|</div>
20 < styles.content.get
20.select.where = colPos = 6
20.wrap = <div class="contentMiddle">|</div>
}
contentWrap.20.40 < styles.content.get
contentWrap.20.40.select.where = colPos = 3
contentWrap.20.40.wrap = <div id="contentRight">|</div>
##bottom box
contentWrap.30 < styles.content.get
contentWrap.30.select.where = colPos = 4
contentWrap.30.wrap = <div id="contentBottom">|</div>
}
}
