Layouts für Seiten

In den Seiten-Eigenschaften (page properties) stellt TYPO3 die Option "Layout" zur Verfügung. Wie man diese Eigenschaft nutzen kann wird im Folgenden beschrieben. Um für Redakteure die Beschriftung der Layouts individuell anzupassen, überflüssige Layouts aus der Auswahl zu löschen oder neue hinzuzufügen, kann man folgende TypoScript-Snippets in das Page-TSconfig z.B. der Root-Seite einfügen.

Layout Bezeichungen überschreiben:

  1. // TypoScript, Page TSconfig 
  2. // change labels for page layouts
  3. TCEFORM.pages {
  4.    layout.altLabels.0 = white theme
  5.    layout.altLabels.1 = blue theme
  6.    layout.altLabels.2 = red theme
  7. }

Layouts hinzufügen:

  1. // TypoScript, Page TSconfig 
  2. // add new layouts
  3. TCEFORM.pages {
  4.    layout.addItems.4 = black theme
  5.    layout.addItems.5 = orange theme
  6. }

Layouts löschen:

  1. // TypoScript, Page TSconfig 
  2. // remove layouts
  3. TCEFORM.pages {
  4.    layout.removeItems = 2,3
  5. }

Um die angepassten Layouts zu verwenden kann man TYPO3 conditions verwenden. Folgendes Beispiel wählt, je nach dem welches Layout eingestellt wurde, ein anderes HTML-Template aus:

  1. // TypoScript, Setup
  2. [globalVar=TSFE:page|layout=0]
  3.    // layout 0
  4.    page.10.template.file = {$basePath}/layout0.tpl
  5. [global]
  6.  
  7. [globalVar=TSFE:page|layout=1]
  8.   // layout 1
  9.    page.10.template.file = {$basePath}/layout1.tpl
  10. [global]
  11.  
  12. [globalVar=TSFE:page|layout=2]
  13.    // layout 2
  14.    page.10.template.file = {$basePath}/layout2.tpl
  15. [global]

Layouts für Content-Elemente

Um verschiedene Layouts für Content Elemente zu ermöglichen kann man das "type"-Feld in dem Bereich "Header" eines Content Elements verwenden (secondary option). Wie bereits für Seiten Layouts beschrieben kann man die Beschriftungen für dieses Feld anpassen, indem man folgende Snippets in das Page-TSconfig der Root Seite kopiert:

Label überschreiben:

  1. // TypoScript, Page TSconfig 
  2. // overwrite type labels
  3. TCEFORM.tt_content {
  4.    header_layout.altLabels.0 = white theme
  5.    header_layout.altLabels.1 = green theme
  6.    header_layout.altLabels.2 = blue theme
  7. }

Layouts hinzufügen:

  1. // TypoScript, Page TSconfig 
  2. // add new layouts
  3. TCEFORM.tt_content{
  4.    header_layout.addItems.4 = red theme
  5.    header_layout.addItems.5 = orange theme
  6. }

Layouts löschen:

  1. // TypoScript, Page TSconfig 
  2. // remove layouts
  3. TCEFORM.tt_content{
  4.   header_layout.removeItems = 3,10
  5. }

Hat man die Beschriftungen für die Layout-Einstellungen angepasst, kann man im Setup-Feld des Haupttemplates das gewählte Layout abfragen und dementsprechen das Content-Element wrappen. Wichtig ist, dass dies für jeden Marker gemacht wird, in den Content Elemente hinein kopiert werden. In diesem Beispiel ist es der Template-Marker ###PAGE_CONTENT###:

  1. // TypoScript, Setup
  2. page.10.marks{
  3.    PAGE_CONTENT.renderObj.stdWrap.innerWrap.cObject=CASE
  4.    PAGE_CONTENT.renderObj.stdWrap.innerWrap.cObject{
  5.       key.field = header_layout
  6.  
  7.       // layout 0
  8.       default=TEXT
  9.       default.value=<div class="layout0">|</div>
  10.  
  11.       // layout 1
  12.       1=TEXT
  13.       1.value=<div class="layout1">|</div>
  14.  
  15.       // layout 2
  16.       2=TEXT
  17.       2.value=<div class="layout2">|</div>
  18.  
  19.       // layout 3
  20.       3=TEXT
  21.       3.value=<div class="layout3">|</div>
  22.    }
  23. }
Jetzt bookmarken:facebook.comdel.icio.usdigg.comgoogle.comlive.comMister WongTechnorati