Zum Inhalt springen

Mehrere Layouts mit Fluidtemplate

Erstellt am 27. Juni 2014 · 3 Antworten · letzte Antwort am 30. Juni 2014

Tags: Fluid, Frage

Ossiost ·

Hallo,

erstmal hoffe ich, dass ich im richtigen Forum bin, wenn nicht, entschuldige ich mich hiermit schon mal.
Ich bin Anfänger mit Typo3 und habe folgendes Problem:
Ich möchte verschiedene Layouts für meine Seiten verwenden, aber Header, Footer und Menü sollen immer gleich bleiben. Ich habe ein Tutorial gefunden, wo sehr gut erklärt wurde, wie man ein Seitenlayout mit Fluid anlegt und das funktioniert auch klasse.
Mein Problem ist allerdings, dass ich nicht gefunden habe, wie man jetzt ein zweites Layout so einbindet, dass es automatisch verwendet wird, wenn ich in den Seiteneigenschaften einer Seite unter "Frontend-Layout" ein anderes Layout auswähle.

Aktuell sieht mein Code in der template Setup meiner root-Seite so aus:

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/sys/Privat/Templates/myLayout.html
  partialRootPath = fileadmin/sys/Privat/Partials
  layoutRootPath = fileadmin/sys/Privat/Layouts
  
  variables {
    header < styles.content.getLeft
    menu < obj.menu
    content < styles.content.get
    filmstreifen < styles.content.getRight
    footer < styles.content.getBorder
  }
}

Das hier habe ich gefunden, allerdings weiß ich nicht, wie ich das in meinen Code einbauen kann, alle meine bisherigen Versuche haben leider nicht funktioniert:

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template/3-columns.html
# FRONTEND Layout Switch
[globalVar = TSFE:page|layout = 1]
page.10.template.file = fileadmin/template/2-columns.html
[globalVar = TSFE:page|layout = 2]
page.10.template.file = fileadmin/template/2-columns-startseite.html
[global]

Weiß nicht, ob es zur Beantwortung der Frage relevant ist, aber die beiden Layouts entscheiden sich nur durch ein DIV, welches zusätzlich eingefügt werden soll und dann das wiedergeben soll, was in der Variable "filmstreifen" gespeichert ist. Die DIVs von Header, Footer und Menü habe ich in einer html-Datei im Ordner ../Private/Layouts liegen und das hat auch alles gut geklappt bis jetzt.

Vielleicht hat ja jemand eine elegante Lösung für mich, würde mich sehr freuen.

Gruß,
Ossiost

PS: Ich habe die Typo3 CMS 6.2.3 ging in dem Dropdown-menü nicht auszuwählen.

sugi ·

Ich gehe generell wie folgt vor. Hoffe, es hilft dir.

Die Links sind sehr hilfreich:
http://t3n.de/magazin/seitentemplates-fluid-226788/
http://typo3blogger.de/templating-3-0-mit-typo3-fluidtemplate-teil-1/

Im Root-Setup folgendes eintragen:

page = PAGE
page.10 = TEXT

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/templates/fluid/seite.html
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/
  
  variables {
#Dies ist ein Kommentar
#Inhalt wird hier ausgegeben
    content < styles.content.get
    
#In der Rechten Spalte kann man was ausgeben
    linkeSpalte < styles.content.get
#colPos ist für die Spalte im BE
    linkeSpalte.select.where = colPos = 0
  }
}

layouts/layout.html:

<div id="wrapper">
	<f:render partial="header" />
	<f:render section="content" />
	<f:render partial="footer" />
</div>

Header kann in partials/header.html eingetragen werden:

<div id="header">
	<f:cObject typoscriptObjectPath="lib.logo" />
	<f:cObject typoscriptObjectPath="lib.headerfoto" />
</div>

Und in dein fluid-Template, z.B. fluid/01_Seite.html:

<f:layout name="layout" />
<f:section name="content">
	<div id="main">
		<!-- Linke Spalte -->
		<div id="leftCol">
		<!-- Menü wird hier angezeigt -->
			<div id="menue">
				<f:cObject typoscriptObjectPath="lib.menue" />
			</div>
		</div>
		<!-- Inhalt -->
		<div id="content">
			<f:format.raw>{content}</f:format.raw>
		</div>
		<div style="clear:both"></div>
	</div>  
</f:section>

Im Setup für z.B. lib.headerfoto anzuzeigen:

lib.headerfoto = IMAGE
lib.headerfoto {
  file {
    import = fileadmin/_migrated/media/
    import.data = levelmedia: -1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}

Danach solltest du über Liste->"ein Verzeichnis"->BackendLayout auswählen und die nötigen Änderungen in TypoScript vornehmen. Hierzu findest du Hilfe im Internet, google "typo3 backendlayout" oder http://jweiland.net/typo3/allgemeines/backendlayout-einsetzen.html

Ossiost ·

Hallo Sugi,

Danke für deine Antwort. Das hilft mir auf jeden Fall meinen Code etwas besser zu strukturieren, aber mein eigentliches Problem ist noch nicht gelöst, vielleicht habe ich es auch schlecht beschrieben, ich versuche es nochmal etwas anders.
Ich möchte eigentlich nur wissen, was für Code ich wo eintragen muss, damit auf eine andere HTML-Datei als Layout geladen wird, wenn ich in den Seiteneigenschaften unter "Frontend-Layout" statt "Standard" z.B. "Layout1" auswähle.

Danke,
Gruß Ossiost

sugi ·

Auf der root-Seite unter Seite bearbeiten->Ressourcen->TypoScript-Konfiguration folgendes einfügen:

TCEFORM.pages.layout {
    altLabels {
        0 = 3 Spalten
        1 = 2 Spalten
        2 = Startseite
    }
    removeItems = 3
}