Backend Layout verwenden

Bis zur Version 4.4 stand dem Entwickler nur die 4 Standardspalten NORMAL, LEFT, RIGHT und RAND  im TYPO3-Backend zur Verfügung. Benötigte man mehr Spalten oder möchte man diese individuell anpassen, musste eine Datei extTables.php im Verzeichnis typo3conf/ angelegt werden. Darin war z.B. folgendes enthalten:

t3lib_extMgm::addPageTSConfig('mod.SHARED.colPos_list = 0,1,2,3,4,5');
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array ("Links||Links||||||||","1"),
"0" => array ("Mitte||Mitte||||||||","0"),
"3" => array ("Rechts||Rechts||||||||","3"),
"2" => array ("Unten Links||Unten Links||||||||","2"),
"4" => array ("Unten Rechts||Unten Rechts||||||||","4"),
"5" => array ("Fusszeile||Fusszeile||||||||","5") );

Zusätzlich war in der localconf.php im gleichen Verzeichnis noch folgendes einzutragen:

$typo_db_extTableDef_script = 'extTables.php';

Dadurch waren die Änderungen sofort im TYPO3-Backend sichtbar. Ab der Version 4.5 wurden in TYPO3 die Backend Layouts eingeführt.

Backend Layout einrichten

Felder vom Backend Layout
Felder vom Backend Layout
Konfiguration eines Backend Layouts
Konfiguration eines Backend Layouts

Mit Hilfe diesem neuen Datensatz lassen sich individuelle Spaltenanzahlen und Spaltenbezeichnungen für die Inhalte anlegen. Auf diese Art und Weise ist es für die Redakteure besser nachzuvollziehen, wie die Inhalte später auf der Webseite aussehen werden. In Kombination mit TypoScript  lässt sich sogar eine genau Abbildung zwischen Backend und Frontend erstellen.

Als ersten Schritt wird eine neue Seite vom Typ „Folder“ im Seitenbaum angelegt. Nur im Listenmodul kann ein neuer Datensatz „Backend Layout“ erstellt und bearbeitet werden. Vergebe einen aussagekräftigen Titel für die Redakteure. Eine weitere optische Hilfe kann das Hinzufügen eines Screenshots sein, dass die Aufteilung nochmal grafisch darstellt. Eine kurze Beschreibung zum Layout kann ebenfalls nicht schaden. Im letzten Feld „Config“ wird die eigentliche Konfiguration des Layouts vorgenommen.

Ein Assistent hilft bei der Erstellung der Konfiguration. Jeder Bereich sollte einen aussagekräftigen Namen bekommen. Die Spaltennummer entspricht dabei der bekannten Nummern 0-3. Mit colspan lassen sich Bereiche über mehrere Spalten hinweg erstrecken. Auch bekannt aus den HTML-Tabellen.
Damit die Layouts auf allen Seiten im Backend angezeigt werden, muss im Page TSconfig die pid des eben erstellen Folders eingetragen werden:

TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID = 2
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID = 2

Des Weiteren ist es für die Redakteure wichtig, dass deren Benutzergruppe Zugriff auf die Seite mit den Layout-Datensätzen hat. Die angelegten Layouts können dann in den Seiteneigenschaften unter Appearance -> Backend Layout eingestellt werden. Dabei kannst Du das Layout für die aktuelle Seite und für dessen Unterseiten festlegen. So lässt sich z.B. auf der Startseite das Layout für alle Seiten des Internetauftritts auf einmal festlegen.
Das Feld Frontend Layout wäre komplett überflüssig, wenn Du im nächsten Schritt die Backend Layouts mit dem TYPO3-Frontend verbindest.

Backend Layout in den Seiteneigenschaften
Backend Layout in den Seiteneigenschaften
Ansicht im Seitenmodul
Ansicht im Seitenmodul

Backend Layout mit dem TYPO3-Frontend verbinden

Wie sich in der Praxis zeigte, gibt es mittlerweile viele Wege im TypoScript zur Verknüpfung von Backend-Layout und die Ausgabe des jeweiligen Layouts im TYPO3-Frontend. In den nachfolgenden Abschnitten erkläre ich meine favorisierte Variante.

Ich arbeite gerne mit einem HTML-Template und unterteile diesen in Bereiche (Subparts) für die verschiedenen Ansichten auf. An dieser Stelle lässt sich sagen, dass Du für jede Ansicht auch ein eigenes HTML-Template erstellen könntest. Der Unterschied im TypoScript ist minimal.

Für das kommende Beispiel verwenden wir ein Layout, das aus einem Kopf-, Inhalts- und Fussbereich besteht. Wobei der Kopf- und Fussbereich sich in den unterschiedlichen Layouts nicht verändern und als Marker integriert werden. Der Inhaltsbereich kann aus ein bis drei Spalten bestehen. Aus diesem Grund unterteilst Du diesen Bereich als ein weiteren subpart <!--###CONTENT###-->. Die Struktur in der HTML-Datei sieht dann folgendermaßen aus:

<body>
###DOCUMENT###
###HEADER###
<!--###CONTENT###-->

<!--###CONTENT_COL1###-->
###CONTENT_NORMAL###
<!--###CONTENT_COL1###-->

<!--###CONTENT_COL2###-->
###CONTENT_NORMAL###
###CONTENT_LEFT###
<!--###CONTENT_COL2###-->

<!--###CONTENT_COL3###-->
###CONTENT_NORMAL###
###CONTENT_LEFT###
###CONTENT_RIGHT###
<!--###CONTENT_COL3###-->

<!--###CONTENT###-->
###FOOTER###
###DOCUMENT###
</body>

Anschließend fügst Du folgendes ins TypoScript-Setup ein:

page = PAGE
page {
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/template/template.html
workOnSubpart = DOCUMENT
subparts {
CONTENT = COA
CONTENT {
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/template/template.html
workOnSubpart.cObject = CASE
workOnSubpart.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = CONTENT_2COL

1 = TEXT
1.value = CONTENT_1COl

2 = TEXT
2.value = CONTENT_2COL

3 = TEXT
3.value = CONTENT_3COL
}
marks {
CONTENT_NORMAL < styles.content.get
CONTENT_NORMAL.wrap = <div id=”col col1”>|</div>

CONTENT_LEFT < styles.content.getLeft
CONTENT_LEFT.wrap = <div id=”col col2”>|</div>

CONTENT_RIGHT < styles.content.getRight
CONTENT_RIGHT.wrap = <div id=”col col3”>|</div>
}
}
}
}
marks {
HEADER < lib.header
FOOTER < lib.footer
}
}

Als erstes wird das TEMPLATE-Objekt mit dem Pfad zur einzigen HTML-Datei erzeugt. Anschließend definiert man den Teilbereich workOnSubpart für den Rahmen des Layouts. Im nächsten Schritt werden die veränderlichen Bereiche als subparts definiert. In diesem Fall der CONTENT-Bereich. Dieser bekommt dasselbe Template zugewiesen und mit dem COA wären sogar unterschiedliche Templates möglich. Wichtig hier wird das CASE-Objekt beim workOnSubpart, dass die Überprüfung übernimmt, welcher Teilbereich unterhalb von CONTENT verwendet werden soll. Zunächst wird mit key.data der Wert vom Feld „Backend Layout (subpages for this pages)“ in den darüber liegenden Seiten als Schlüssel für den Vergleich herangezogen. Steht allerdings im Feld „Backend Layout (this page only)“ ein Wert, dann wird der Schlüssel mit diesem Wert überschrieben. Je nach Wert wird nun eines der 3 Teilbereiche für den Inhaltsbereich verwendet. Ist kein Wert vorhanden, so tritt der default-Wert ein. In diesem Fall wäre dass die zweispaltige Ansicht. Als letzten Schritt erhalten die Marker ihren Inhalt.

Mit dieser Methode lassen sich weitere veränderliche Bereich innerhalb eines Layouts realisieren. So lässt sich z.B. der Kopfbereich statt eines Markers HEADER als weiteren subpart <!--###HEADER###--> in der HTML-Datei definieren. Auf dieser Weise kann dieser Teilbereich ebenfalls unterschiedliche Ansichten haben.
An der Stelle mit workOnSubpart DOCUMENT könntest Du auch folgendes verwenden:

page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template/template.html
workOnSubpart.cObject = CASE
workOnSubpart.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = LAYOUT1
2 = TEXT
2.value = LAYOUT2
3 = TEXT
3.value = LAYOUT3
}
}

Damit kannst Du in einer HTML-Datei 3 völlig unterschiedliche Layouts abbilden. Sofern auch die anderen Bereiche wie Kopf- und Fussbereich sich ändern.

Schnellkontakt

Dennis Oezet
WebEntwicklung & Design
Tel: 0160 / 933 679 69
info(at)doemedia(dot)de



Sofortanfrage

Ich interessiere mich für







Meine Kontaktdaten

Datenschutz

Auf der folgenden Seite findest Du die Datenschutzhinweise.