TYPO3 - Template-Auswahl: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 2: Zeile 2:
  
 
== Template Switcher Extension ==
 
== Template Switcher Extension ==
−
Funktioniert sehr zuverlässig. Thumbnails möglich.
+
Funktioniert sehr zuverlässig. Thumbnails möglich. Old School weil es früher keine guten Bordmittel für komplexe Layouts gab.
  
−
== Backend Layouts (BE-Grids) ==
+
== Template Switch über Backend Layout Feld (BE-Grids) ==
−
Ab 4.5 http://jweiland.net/typo3/allgemeines/backendlayout-einsetzen.html
+
ab 4.5
  
 
=== BE-Layouts definieren ===
 
=== BE-Layouts definieren ===
Zeile 20: Zeile 20:
 
#TCEFORM.pages.backend_layout_next_level.removeItems= -1
 
#TCEFORM.pages.backend_layout_next_level.removeItems= -1
 
#TCEFORM.pages.backend_layout.removeItems= -1
 
#TCEFORM.pages.backend_layout.removeItems= -1
 +
 +
#give "empty" label a better name
 +
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout
 +
</pre>
 +
 +
Beispiel Layout Grid (Achtung colspan mit kleinem s)
 +
<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>
 +
 +
=== 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>
 
</pre>
  
−
== Seitenlayout Feld über Conditions nutzen ==
+
==== Beispiel für Auswahl eines Fluid Templates ====
 +
<pre>
 +
### 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
 +
</pre>
 +
 
 +
== Template Switch über FE-Layout Feld ==
 +
Schnelle Lösung für viele Seiten ausreichend wenn keine komplexen Layouts notwendig sind.
 +
=== Bezeichnungen anpassen ===
 +
TypoScript
 +
<pre>
 +
TCEFORM.pages.layout {
 +
  altLabels {
 +
    0 = 1 Spalter
 +
    1 = 2 Spalter
 +
    2 = Portalseite
 +
  }
 +
  removeItems = 3
 +
}
 +
</pre>
 +
=== Template Auswahl ===
 +
<pre>
 +
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]
 +
</pre>
 +
=== Template Auswahl für Fluid ===
 +
Todo
 +
 
 +
== Spalten abhängig von BE-Layout Feld ausgeben ==
 +
Geht von Subparts "contentWrap" aus.
 +
<pre>
 +
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>
 +
       
 +
    }
 +
}
 +
</pre>

Aktuelle Version vom 23. Januar 2014, 17:28 Uhr

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>
        
     }
 }
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=TYPO3_-_Template-Auswahl&oldid=20242“