Typo3 - Templates mit Fluid - Versionsgeschichte

149.172.227.142: /* Komplettes Beispiel */

2016-07-25T16:10:15Z

Komplettes Beispiel

149.172.227.142: /* Komplettes Beispiel */

2016-07-25T16:08:41Z

Komplettes Beispiel

149.172.227.142: /* Komplettes Beispiel */

2016-07-25T16:08:08Z

Komplettes Beispiel

149.172.227.142: /* TypoScript-Optionen */

2016-07-25T16:07:38Z

TypoScript-Optionen

Steff am 25. Juli 2016 um 12:15 Uhr

2016-07-25T12:15:06Z

Steff: /* Fluid Snippets */

2016-07-25T12:07:06Z

Fluid Snippets

37.49.33.84 am 10. März 2015 um 13:19 Uhr

2015-03-10T13:19:25Z

37.49.33.84: /* Links */

2014-11-27T08:36:07Z

Links

37.49.33.84: /* Layout und Partial */

2014-11-26T16:20:48Z

Layout und Partial

149.172.152.210: /* Fluid Snippets */

2014-01-23T15:52:40Z

Fluid Snippets

@@ Zeile 149: / Zeile 149: @@
 == Beispiele ==
-=== Komplettes Beispiel ===
+=== Komplettes Beispiel mit Auswahl des Backend Layouts ===
 Quelle: http://blog.sbtheke.de/web-development/typo3/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout#2-html-templates-erstellen (2016-07)

@@ Zeile 170: / Zeile 170: @@
 </f:section>
 </syntaxhighlight>
 fileadmin/templates/fluid/2col.html
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <f:layout name="default" />
 <f:section name="content">
@@ Zeile 182: / Zeile 183: @@
 </f:section>
 </syntaxhighlight>
 ''fileadmin/templates/fluid/popup.html
-''
+''fileadmin/templates/fluid/popup.html''
 <syntaxhighlight lang="html5">

@@ Zeile 153: / Zeile 153: @@
 ''fileadmin/templates/fluid/layouts/default.html''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <div id="header">...</div>
 <div id="content">
@@ Zeile 162: / Zeile 162: @@
 ''fileadmin/templates/fluid/1col.html''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <f:layout name="default" />
 <f:section name="content">
@@ Zeile 185: / Zeile 185: @@
 ''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <div id="content">
    <f:format.html>{content}</f:format.html>
@@ Zeile 266: / Zeile 266: @@
+}
 </syntaxhighlight>
 == TypoScript-Optionen ==

← Nächstältere Version		Version vom 25. Juli 2016, 16:07 Uhr
Zeile 148:		Zeile 148:
	Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung ist aber nur sinnvoll, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.		Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung ist aber nur sinnvoll, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.

		+	== Beispiele ==
		+	=== Komplettes Beispiel ===
		+	Quelle: http://blog.sbtheke.de/web-development/typo3/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout#2-html-templates-erstellen (2016-07)
		+
		+	''fileadmin/templates/fluid/layouts/default.html''
		+	<syntaxhighlight lang="html">
		+	<div id="header">...</div>
		+	<div id="content">
		+	<f:render section="content" />
		+	</div>
		+	<div id="footer">...</div>
		+
		+	''fileadmin/templates/fluid/1col.html''
		+
		+	<syntaxhighlight lang="html">
		+	<f:layout name="default" />
		+	<f:section name="content">
		+	<div id="content_main">
		+	<f:format.html>{content}</f:format.html>
		+	</div>
		+	</f:section>
		+	</syntaxhighlight>
		+	fileadmin/templates/fluid/2col.html
		+	<syntaxhighlight lang="html">
		+	<f:layout name="default" />
		+	<f:section name="content">
		+	<div id="content_main">
		+	<f:format.html>{content}</f:format.html>
		+	</div>
		+	<div id="content_left">
		+	<f:format.html>{content_left}</f:format.html>
		+	</div>
		+	</f:section>
		+	</syntaxhighlight>
		+	''fileadmin/templates/fluid/popup.html
		+	''
		+
		+	<syntaxhighlight lang="html">
		+	<div id="content">
		+	<f:format.html>{content}</f:format.html>
		+	</div>
		+	</syntaxhighlight>
		+
		+	3) TypoScript Konfiguration
		+
		+	Allgemeine Konfiguration und Zuweisung der Platzhalter
		+
		+	'''TS Setup'''
		+	<syntaxhighlight lang="typoscript">
		+	page.10 = FLUIDTEMPLATE
		+	page.10 {
		+	partialRootPath = fileadmin/templates/fluid/partials/
		+	layoutRootPath = fileadmin/templates/fluid/layouts/
		+	variables {
		+	content < styles.content.get
		+	content_left < styles.content.get
		+	content_left.select.where = colPos=1
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+	In die Platzhalter „content“ und „content_left“ werden nun die Inhalte eingelesen, die vom Redakteur im Backend in den entsprechenden Spalten angelegt wurde. Gei „content_left“ lesen wir die Inhalte aus „Spaltennummer“ 1 ein, also die Inhalte aus Spalte „Linker Rand“, die weiter oben im Backend Layout definiert wurde.
		+
		+	Zuweisung BE Layout zu HTML-Template
		+
		+	Je nachdem, welches Backend Layout in den Seiteneigenschaften ausgewählt wurde, sollte ein anderes Seiten-Template verwendet werden. Dies geschieht mit diesen TypoScript-Anweisungen:
		+
		+	TS Setup
		+	<syntaxhighlight lang="typoscript">
		+	page.10.file.cObject = CASE
		+	page.10.file.cObject {
		+	key.data = levelfield:-1, backend_layout_next_level, slide
		+	key.override.field = backend_layout
		+	default = TEXT
		+	default.value = fileadmin/templates/fluid/2cols.html
		+	2 = TEXT
		+	2.value = fileadmin/templates/fluid/1col.html
		+	3 = TEXT
		+	3.value = fileadmin/templates/fluid/popup.html
		+	}
		+	</syntaxhighlight>
		+
		+	Standardmäßig wird dabei das 2-Spalten-Layout verwendet (dieses sollte deshalb auch auf der Root-Seite in zwei Select-Boxen für das Backend-Layout ausgewählt werden). Die Templates werden über die IDs der Backend-Layouts zugewiesen. In meinem Fall hat das 1-spaltige Backend-Layout die ID 2, das Popup-Backend-Layout die ID 3.
		+	Optional: CSS Datei einbinden, abhängig von gewählen Layout
		+	<syntaxhighlight lang="typoscript">
		+	page.headerData.10 = CASE
		+	page.headerData.10 {
		+	stdWrap.wrap = <link rel="stylesheet" type="text/css" href="path/to/css/\|" media="all" />
		+	key.data = levelfield:-1, backend_layout_next_level, slide
		+	key.override.field = backend_layout
		+	default = TEXT
		+	default.value = layout_2col.css
		+	2 = TEXT
		+	2.value = layout_1col.css
		+	3 = TEXT
		+	3.value = layout_popup.css
		+	}
		+	</syntaxhighlight>
		+
		+	'''Optional:''' body-Tag mit Klasse auszeichnen
		+
		+	Für das Layout ist es oft nötig, dass man in CSS weiß, welches Layout aktuell gewählt ist. Deshalb kann man dem body-Tag je nach gewählten Layout eine andere Klasse geben:
		+
		+	'''TS Setup'''
		+	<syntaxhighlight lang="typoscript">
		+	page.bodyTagCObject = CASE
		+	page.bodyTagCObject {
		+	stdWrap.wrap = < body class="\|" >
		+	key.data = levelfield:-1, backend_layout_next_level, slide
		+	key.override.field = backend_layout
		+	default = TEXT
		+	default.value = layout-2col
		+	2 = TEXT
		+	2.value = layout-1col
		+	3 = TEXT
		+	3.value = layout-popup
		+	}
		+	</syntaxhighlight>
	== TypoScript-Optionen ==		== TypoScript-Optionen ==

@@ Zeile 1: / Zeile 1: @@
 Fluid soll dafür sorgen, daß die Ausgabe Logik mit ins Template kommt. Dadurch soll das Arbeiten übersichtlicher werden.
 == Links ==
-https://fluidtypo3.org/viewhelpers.html
+* https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html
+* https://fluidtypo3.org/viewhelpers.html
-http://blog.sbtheke.de/web-development/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout
+* http://blog.sbtheke.de/web-development/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout
+* http://t3n.de/magazin/seitentemplates-fluid-226788/
 [[TYPO3 mit Fluid - komplettes Beispiel]]

@@ Zeile 168: / Zeile 168: @@
 stdWrap	StdWrap-Eigenschaften auf die gesamte Ausgabe anwenden
 </pre>
 == Fluid Snippets ==

← Nächstältere Version		Version vom 27. November 2014, 08:36 Uhr
Zeile 7:		Zeile 7:
	[[TYPO3 mit Fluid - komplettes Beispiel]]		[[TYPO3 mit Fluid - komplettes Beispiel]]

		+	=== Lokalisierung mit Extbase und Fluid ===
		+	http://docs.typo3.org/typo3cms/ExtbaseFluidBook/9-CrosscuttingConcerns/1-localizing-and-internationalizing-an-extension.html

	== Fluid Quickstart ==		== Fluid Quickstart ==

@@ Zeile 143: / Zeile 143: @@
 </pre>
-Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung macht allerdings nur Sinn, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.
+Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung ist aber nur sinnvoll, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.
 == TypoScript-Optionen ==

← Nächstältere Version		Version vom 23. Januar 2014, 15:52 Uhr
Zeile 166:		Zeile 166:

	== Fluid Snippets ==		== Fluid Snippets ==
		+	http://itype3.blogspot.de/2013/03/fluid-template.html
		+
		+	[[TYPO3 Fluid - Snippets]]

	== Fluid Templates mit BE-Auswahl ==		== Fluid Templates mit BE-Auswahl ==