TYPO3 - Template-Auswahl: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 120: Zeile 120:
 
page.10.template.file = fileadmin/template/html/portal.html
 
page.10.template.file = fileadmin/template/html/portal.html
 
[global]
 
[global]
 +
</pre>
 +
 +
== 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>
 
</pre>

Version vom 23. Januar 2014, 16:12 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

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

Bezeichnungen anpassen

TypoScript 

TCEFORM.pages.layout {
  altLabels {
    0 = 1 Spalter
    1 = 2 Spalter
    2 = Portalseite
  }
  removeItems = 3
}

Condition TypoScript 

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]

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