TYPO3 - Template-Auswahl: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 5: | Zeile 5: | ||
== Backend Layouts (BE-Grids) == | == Backend Layouts (BE-Grids) == | ||
| − | + | ab 4.5 | |
=== BE-Layouts definieren === | === BE-Layouts definieren === | ||
| Zeile 24: | Zeile 24: | ||
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout | TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout | ||
</pre> | </pre> | ||
| + | |||
| + | === Frontend Anpassungen anhand backend_layout Feld === | ||
| + | |||
| + | ==== Beispiel CSS Klasse für Body-Tag ==== | ||
| + | <pre> | ||
| + | ##... 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 | ||
| + | </pre> | ||
| + | |||
| + | ==== Beispiel für Auswahl verschiedener Header Dateien==== | ||
| + | <pre> | ||
| + | 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 | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | ==== 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 | ||
== Seitenlayout Feld über Conditions nutzen == | == Seitenlayout Feld über Conditions nutzen == | ||
Version vom 23. Januar 2014, 15:35 Uhr
Diese Seite zeigt verschiedene Methoden um Templates auszuwählen
Template Switcher Extension
Funktioniert sehr zuverlässig. Thumbnails möglich.
Backend Layouts (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
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
