TYPO3-Tutorial: Backend Layout nutzen

6. Februar 2011 | 37 Kommentare

Backend Layouts in TYPO3 Version 4.5 / Layout Beispiel

Einen Homepage mit einem breiten Teaserbilder oder einer Slideshow oben, darunter ein zwei- oder dreispaltiges Layout – dass kann man jetzt im TYPO3-Backend (ohne TemplaVoilá) einfach darstellen. Denn seit der TYPO3-Verion 4.5. läßt sich jetzt jeder Seite die Eigenschaft Backend Layout zuweisen.

Wir wollen in unserem TYPO3-Tutorial erklären, wie man diese Backend-Layouts am besten verwendet.

Das Backend-Layout im TYPO3-Backend einrichten

Zuerst einmal müssten wir dazu zwei Backend-Layouts erstellen. Wir gehen in unserem Beispiel von folgenden zwei Varianten aus:

Zwei Backend Layout für TYPO3 4.5

  • LAYOUT 1:
    Erste Zeite Einspalter breit / Zweite Zeile Zweispalter 50-50
  • LAYOUT 2:
    Zweispalter 50/50 (keine erste Zeile)

Dazu legen wir einen Sys-Folder an und legen hier einen neuen Datensatz vom Typ Backend Layout an. Der Wizard hilft dabei, die Config-Datei zu erstellen.

Backend Layout Wizard in TYPO3 Version 4.5

Die sich daraus ergebende Backend Layout > Config lautet für das Layout 1:

backend_layout {
   colCount = 2
   rowCount = 2
   rows {
      1 {
         columns {
            1 {
               name = Top Wide
               colspan = 2
               colPos = 1
            }
         }
      }
      2 {
         columns {
            1 {
               name = Bottom Left
               colPos = 0
            }
            2 {
               name = Bottom Right
               colPos = 2
            }
         }
      }
   }
}

Das muss man jetzt noch analog für das Layout 2 wiederholen, wobei man nur die Angaben für die beiden unteren Zeilen braucht.

Backend-Layouts in TYPO3 Version 4.5

Nun stehen uns in den Seiteneigenschaften die gerade angelegten Backend Layouts unter dem Reiter Appearance > Backend Layout (this page only) zur Verfügung.

Backend Layout in den page properties (TYPO3 Version 4.5)

Wir sehen hier auch noch ein Relikt aus alten Zeiten, das Frontend Layout, mit dem wir früher versucht haben, unseren Seiten optisches Benehmen beizubringen. Im Prinzip können wir mit der hier vorgestellten Methode auf das gute alte Feld Frontend Layout erstmal komplett verzichten.

Die Eigenschaften unseres Seiten-Layout – im Frontend wie im Backend – legen wir jetzt über das Feld Backend Layout fest.

Das Backend-Layout für die TYPO3 Frontend-Ausgabe einrichten

So, machen wir uns ans TypoScript für die Frontend-Ausgabe. Was jetzt kommt, hängt natürlich ein bisschen davon ab, wie Ihr Eure Seiten baut. Aber schauen wir uns nochmal das Bild ganz am Anfang des Artikels an und überlegen wir uns was wir an HMTL-Elementen brauchen.

Für den BODY bietet es sich an, verschiedene Klassen, je nach Layout zu vergeben. Weiterhin umhüllen wir alle drei Content-Boxen mit einem DIV der Klassen col und dann col1, col2, col3.

HTML

<body class="x1-1 t1 b1">
  <div class="col col1">Content Oben</div>
  <div class="col col2">Content Unten Links</div>
  <div class="col col3">Content Unten Rechts</div>
</body>

Kümmern wir uns erst mal um die Ausgabe Body-Tag-Klasse. Das geht z.B. so (TypoScript Setup):

TypoScript

# Klassen für BODY-Tag vorbereiten
###############################
temp.layoutSwitch = CASE
temp.layoutSwitch {
   key.data = levelfield:-1,backend_layout_next_level,slide
   key.override.field = backend_layout
   1 = TEXT
   1.value = x1-1 t1 b1
   2 = TEXT
   2.value = x1-1 t0 b1
   3 = TEXT
   3.value = t1 b0
}
# BODY-Tag erstellen
###############################
temp.bodyTag = COA
temp.bodyTag {
   10 = TEXT
   10.dataWrap = <body id="p{TSFE:id}" class="
 
   # === insert layout switch (page|backend_layout)
   20 < temp.layoutSwitch
   90 = TEXT
   90.value = ">
}
</body>

Bleibt zuletzt, col1, col2 und col3 mit den richtigen Inhalten zu füllen. Schauen wir uns dazu nochmal die Spalten und die dazugehörigen pages > colPos-Angaben an.

Zwei Backend Layout für TYPO3 4.5

Das erreichen wir mit den folgenden drei Blöcken TypoScript:

TypoScript

# COL0 (breite Spalte oben)
page.1000 = COA
page.1000 {
   wrap = <div class="col0 col">|</div>
   # where colPos = 1
   10 < styles.content.get 
 
   # === enable col0 according to page layout
   stdWrap.if {
      value = 1,2
      isInList.data = levelfield:-1,backend_layout_next_level,slide
      isInList.override.data = TSFE:page|backend_layout
   }
}
# COL1 (linke Spalte unten)
page.2000 = COA
page.2000 {
   wrap = <div class="col1 col"> | /div>
   # where colPos = 0
   10 < styles.content.getLeft
 
   # === enable col1 according to page layout
   stdWrap.if {
      value = 1
      isInList.data = levelfield:-1,backend_layout_next_level,slide
      isInList.override.data = TSFE:page|backend_layout
   }
}
#COL2 (rechte Spalte unten)
page.3000 = COA
page.3000 {
   wrap = <div class="col2 col"> | /div>
   # where colPos = 2
   10 < styles.content.getRight
 
   # === enable col2 according to page layout
   stdWrap.if {
      value = 1,2
      isInList.data = levelfield:-1,backend_layout_next_level,slide
      isInList.override.data = TSFE:page|backend_layout
   }
}

(Ich weiß untem im Code gehen im wrap die DIVs nicht zu – aber liegt an dem muchtigen WordPress-Rich-Text-Editor!)

Damit der Slider für das backend_layout_next_level funktioniert müssen wir noch über das Install-Tool folgenden Wert eintragen:

PHP

$TYPO3_CONF_VARS['FE']['addRootLineFields'] = 'backend_layout_next_level'

So, das sollte eigentlich genügen. Jetzt müsst Ihr nur noch die drei eben erzeugten COLs in Euer PAGE-Objekt kopieren und abhängig von den Einstellungen in Backend Layout bzw. Backend-Layout nächste Ebene habt Ihr eine modifizierte Frontend-Ausgabe

Dank an Felix für die Inspiration und Lösungsansätze!

Noch Fragen, Inspirationen oder Verbesserungen?

Ähnliche Artikel:

Meta-Daten



37 Kommentare

Auch mal Kommentieren:

Kommentar