TYPO3: Layout Umschalter

Um auf bestimmten Seiten ein anderes Aussehen anzuzeigen ist es sinnvoll dem Redakteur eine Auswahl an verfügbaren Layout-Dateien zu Auswahl bereitzustellen.

Bevor es losgeht noch kurz ein Verweis auf meinen Blog-Eintrag TYPO3: Mehr Content Elemente – was in diesem Zusammenhang vermutlich sinnvoll sein kann.

1. benötigte Extensions

Zwei TYPO3 Erweiterungen werden benötigt: rlmp_tmplselector für die verschiedenen Templates und stfl_tmpl2columns um die nur benötigten Content Elemente dazu anzuzeigen.

2. Aufbauen der Stuktur

Haupt- und Sub-HTML-Template brauchen ihren Speicherplatz, dazu müssen die Verzeichnisse beispielsweise nach diesen Vorgaben erstellt werden: fileadmin/templates/main/ und fileadmin/templates/sub/.

3. Haupt- und Sublayout

in den Hauptlayout (main.html) verbleiben nach wie vor die benötigten Marker wie z.B. für die Navigation oder einen fest stehenden Content Bereich. Der umschließende Marker ###DOCUMENT_ALL### im Hauptlayout enthält den Marker ###CONTENT### welcher später mit dem Sublayout gefüllt wird.

<html>
<head>
<title>Standardlayout</title>
</head>
<!– ###DOCUMENT_ALL### –>
###HEADER###
Sie sind hier: ###BREADCRUMB###
###CONTENT###
<!– ###DOCUMENT_ALL### –>
</body>
</html>

Der Inhalt von Title wird später dem Redakteur angezeigt um die Templates von einander zu unterscheiden. Auch kann eine gif-Grafikdatei mit dem gleichen Dateinamen des Templates abgelegt werden um die Unterschiede zu visualisieren.

Das Sublayout (col1.html) wird von ###DOCUMENT### umschlossen und enthält alle  benötigten Marker um ein zweispaltiges Layout zu erzeugen:

<html>
<head>
<title>Layout zweispaltig</title>
</head>
<body>
<!– ###DOCUMENT### –>
<table>
<tr><td>###CONTENT_LEFT###</td><td>###CONTENT_RIGHT###</td></tr>
</table>
<!– ###DOCUMENT### –>
</body>

So ist es nun problemlos möglich ein einspaltiges (col2.html) oder zweizeiliges Layout anzulegen.

4. TypoScript konfigurieren

plugin.tx_rlmptmplselector_pi1.templateType = main
plugin.tx_rlmptmplselector_pi1.templatePathMain = fileadmin/templates/main/
plugin.tx_rlmptmplselector_pi1.templatePathSub = fileadmin/templates/sub/
plugin.tx_rlmptmplselector_pi1.defaultTemplateFileNameMain = main.html
plugin.tx_rlmptmplselector_pi1.defaultTemplateFileNameSub = col1.html
plugin.tx_rlmptmplselector_pi1.inheritMainTemplates = 1
plugin.tx_rlmptmplselector_pi1.inheritSubTemplates = 1

5. Mapping herstellen

In TS-Config der Root-Seite wird festgelegt welche Content-Elemente angezeigt werden ein Abhängigkeit der gewählten Templates:

options.stfl-tmpl2columns.enable = true
options.stfl-tmpl2columns.default_content = col1
options.stfl-tmpl2columns.mapping {
col1 = 1,0,2,3
col2 = 1,0,2
}

Damit das Mapping greift ist etwas Probierarbeit nötig. Das Handbuch empfehlt alle Aliase der Seite gemeinsam zu bearbeiten. Ggf. muss man auch das Mapping für die Root-Seite selber provozieren, bis ein Wechsel des Subtemplates automatisch nicht benötigte Content Elemente verschwinden lässt:

mod.SHARED.colPos_list = 1,0,2
TCEFORM.tt_content.colPos.removeItems = 3

6. Marker mit Inhalt füllen

hier ein TypoScript Beispiel für das Haupttemplate:

page.10 = TEMPLATE
page.10 {
template = FILE
template < plugin.tx_rlmptmplselector_pi1
template.relPathPrefix = fileadmin/templates/main/
workOnSubpart = DOCUMENT_ALL
marks.CONTENT < temp.contentAreaTemplate
marks.HEADER < temp.header
marks.BREADCRUMB < temp.breadcrumb
}

Der Inhalt des Subtemplates kann nun wie folgt gefüllt werden:

temp.contentAreaTemplate = TEMPLATE
temp.contentAreaTemplate {
template = FILE
template < plugin.tx_rlmptmplselector_pi1
template.relPathPrefix = fileadmin/templates/sub/
template.templateType = sub
workOnSubpart = DOCUMENT
marks {
CONTENT_LEFT = CONTENT
CONTENT_LEFT {
table = tt_content
select {
where = colPos = 1
orderBy = sorting
languageField = sys_language_uid
}
}
CONTENT_RIGHT = CONTENT
CONTENT_RIGHT {
table = tt_content
select {
where = colPos = 4
orderBy = sorting
languageField = sys_language_uid
}
}
}
}

Template Selector to Column View mapper (stfl_tmpl2columns)
Page Template Selector (rlmp_tmplselector)

Author: admirableadmin

Hello World! Ich bin Andreas Peichert und entwickle und programmiere Software seit 2000. Zurzeit arbeite ich als Senior Solution Architect.

One thought on “TYPO3: Layout Umschalter”

Leave a Reply

Your email address will not be published. Required fields are marked *