Backend-Layout einsetzen

Seit der TYPO3 Version 4.5 ist es möglich die zur Verfügung stehenden Spalten zur Befüllung mit Inhalten für den Redakteur anschaulicher anzuzeigen. Ohne großen Aufwand können diese jetzt individuell benannt werden und auch weitere Spalten hinzugefügt werden.

Backend-Layout erstellen

Backend-Layout Assistent öffnen
Backend-Layout Assistent öffnen
Backend-Layout anlegen
Backend-Layout anlegen

Der Ordnung wegen sollte man eine Seite für die Speicherung der Backend-Layouts vorsehen. Wenn es sich um einen Auftritt handelt bei dem alle Redakteure auf den gesamten Seitenbaum Zugriff haben, kann dies die Startseite sein. Ansonsten wird ein Systemordner dafür erstellt.

In der Listenansicht kann man einen neuen Backend-Layout Datensatz anlegen.
In diesem kann über das Icon "Assistent" unter Konfiguration nun der Backend-Layout Assistent geöffnet werden. In diesem kann ein eigenes Backend-Layout gestaltet werden. Die Spaltennummer wird später im TypoScript verwendet um den Inhalt auszulesen.

Backend-Layout einrichten

Backend-Layout einer Seite zuordnen
Backend-Layout einer Seite zuordnen

Damit die Layouts auf allen Seiten in den Seiteneigenschaften angezeigt werden, muss im Page TSconfig die ID des Systemordners mit den Backend-Layouts angegeben werden:

##id storagepage of gridlayout
TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29

Beim Einrichten der Redakteure muss man darauf achten, dass diese auch auf den Systemordner zugreifen dürfen!

Auf der Startseite definiert man in den Seiteneigenschaften dann das Standardlayout für alle Unterseiten. So muss der Redakteur nicht für jede neu erstellte Seite ein Layout auswählen, sondern nur für die vom Standard abweichende Seiten.

Will man, dass der Redakteur nicht die Möglichkeit hat kein Layout, also "Keins" auszuwählen, um mit der alten Backenansicht arbeiten zu können, so versteckt man diese Option folgendermaßen:

##hide no backend layout label
TCEFORM.pages.backend_layout_next_level.removeItems= -1
TCEFORM.pages.backend_layout.removeItems= -1

Es gibt auch ein leeres Auswahlfeld für das Standardlayout. Dies kann ebenfalls mit einem Label versehen werden. So kann ein Redakteur auch erkennen, welches Layout voreingestellt ist.

##give empty label a definition
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout

Backend-Layout mit Frontend verknüpfen

Zuerst wird im Setup abhängig vom gewählten Layout eine CSS Klasse für den body Tag definiert und page.bodyTagCObject zugewiesen:

##Backend grid view defines body class for css 
temp.selectbodytag = CASE
temp.selectbodytag {
key.field = backend_layout  
key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide        
default = TEXT        
default.value = layout1        
 1 = TEXT         
1.value = layout1        

2 = TEXT        
2.value = layout2        

3 = TEXT        
3.value = layout3   
stdWrap.wrap =
}

In dem Beispiel unten ist im HTML Template ein Subpart "contentWrap" definiert. Als COA kann es in mehrere Unterbereiche geliedert werden.

contentWrap.10 ist ein div welches in allen Backendlayouts vorkommt.
contentWrap.20 wird nur für die Layouts mit der ID 1 oder 2 ausgegeben.
contentWrap.20.20 wird nur für Layout mit der ID 2 ausgegeben.
contentWrap.20.30 wird nur für Layout mit der ID 3 ausgegeben.
contentWrap.30 kommt wieder in allen Backendlayouts vor.

Bei der if Abfrage wird der Wert zuerst in den darüber liegenden Seiten im Feld "Backend-Layout (für Unterseiten dieser Seite)" und auf den Value hin überprüft. Steht im Feld "Backend-Layout" ein Wert, so überschreibt dieser das vorhergehende Ergebnis und schaut ob dieser Wert mit dem Value übereinstimmt.

page = PAGE
page {
  ##css class in bodytag according to layout
  bodyTagCObject < temp.selectbodytag  
  10 = TEMPLATE
  ...
  10.subparts {
    contentWrap = COA
     ##Top box
    contentWrap.10 < styles.content.get
    contentWrap.10.wrap = <div id="contentTop">|</div>

    ##floated boxes wrapped in a box
    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>
       
    }
}
Aktualisiert: 29.06.2016