TYPO3 - Template-Auswahl: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 23: | Zeile 23: | ||
#give "empty" label a better name | #give "empty" label a better name | ||
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout | TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout | ||
| + | </pre> | ||
| + | |||
| + | Beispiel Layout Grid | ||
| + | <pre> | ||
| + | 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 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
</pre> | </pre> | ||
Version vom 23. Januar 2014, 16:27 Uhr
Diese Seite zeigt verschiedene Methoden um Templates auszuwählen
Template Switcher Extension
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)
ab 4.5
BE-Layouts definieren
- 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
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
Beispiel CSS Klasse für Body-Tag
##... 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
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
### 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/1col.html
3 = TEXT
3.value = fileadmin/templates/fluid/2col.html
}
}
page.10 < temp.myFluid
Template Switch über FE-Layout Feld
Schnelle Lösung für viele Seiten ausreichend wenn keine komplexen Layouts notwendig sind.
Bezeichnungen anpassen
TypoScript
TCEFORM.pages.layout {
altLabels {
0 = 1 Spalter
1 = 2 Spalter
2 = Portalseite
}
removeItems = 3
}
Template Auswahl
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
Todo
Spalten abhängig von BE-Layout Feld ausgeben
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>
}
}
