[TYPO3-extbase] FLUIDTEMPLATE

Mon Mar 4 18:00:40 CET 2013

Hello !

On 02.03.2013 00:29, Stefan Reichelt wrote:

> Indeed. Though it is also possible to tell your PAGE cObject with
> config.disableAllHeaderCode [1] to not add the usual html header.
> Although that means ignoring all the dynamic and fancy configurations
> you can achieve through typoscript (like including js or css files, meta
> data and so on).

[1] is not an option. Should I miss all the TYPO3 minimization, etc. 
options. I assume this will get handled by some viewHelpers in NEOS 
registering appropriate CSS and JS files for minimization.

But anyways I found a solution to my (and probably many others) problem. 
Here a detailed explanation for people who would like to use the HTML 
templates they got from their designers in an almost unmodified (and DTD 
valid) form:

Feel free to post this tutorial/example to some blog. I for myself am 
not in the posession of some blogging account. But be so kind and note 
my employer "webconsulting.at" as sponsor :)

--------------- tutorial begin -------------------
Assume you got 3 templates. Every one with a different content area (2 
columns, three columns, and 2 columns with a box on the top spanning the 
whole width but all 3 templates provided by your graphics/html agency 
share a common "drumherum" (surrounding).

1st thing to do:
"Comment" out every <head> tag by wrapping it with an <f:section> tag. 
Thus the <head> tag rendering is up to TYPO3.

2nd thing to do:
Enclose the content area of every file with an <f:section> tag. Each 
<f:section> sharing the same "name" attribute.

3rd thing to do:
Add an <f:layout> tag to every template. The <f:layout> tag should 
reference one of the three files - but must reference the SAME file 
every time (start.html is a good idea). A good location is between the 
(commented out) <head> and <body> tag.

4th thing to do:
Only (and when I say only I mean ONLY) add a <f:render> tag ONCE above 
the <f:section> tag ONLY in the layout file (the ONE file you referenced 
from within the <f:layout> tag).

read :)
----------------------- tutorial end -------------

------------ example begin --------------

Assume three templates "start.html", "news.html" and "page.html". All 
three files get referenced from within "FLUIDTEMPLATE.file" property 
using a TypoScript CASE switch.

start.html will act as a "layout" wrapper for all three content areas.

======= start.html / begin ===========
<!DOCTYPE html>
<html lang="en">

<f:section name="DOCUMENT_HEAD">
	<head>
		<title>Static HTML from design</title>
	</head>
</f:section>

<f:layout name="start">

<body>
	<div id="head"> ... </div>

<f:render section="wrapper"> <!-- ONLY ONCE IN start.html !!! -->
<f:section name="wrapper">
	<div id="content"> ... </div>
</f:section>

	<div id="footer"> ... </div>
</body>

</html
======= start.html / end ===========

======= news.html / begin ===========
<!DOCTYPE html>
<html lang="en">

<f:section name="DOCUMENT_HEAD">
	<head>
		<title>Static HTML from design</title>
	</head>
</f:section>

<f:layout name="start">

<body>
	<div id="head"> ... </div>

<f:section name="wrapper">
	<div id="content"> News content with three columns </div>
</f:section>

	<div id="footer"> ... </div>
</body>

</html
======= news.html / end ===========

======= page.html / begin ===========
<!DOCTYPE html>
<html lang="en">

<f:section name="DOCUMENT_HEAD">
	<head>
		<title>Static HTML from design</title>
	</head>
</f:section>

<f:layout name="start">

<body>
	<div id="head"> ... </div>

<f:section name="wrapper">
	<div id="content"> Normal page content with two columns </div>
</f:section>

	<div id="footer"> ... </div>
</body>

</html
======= page.html / end ===========

------------ example begin --------------

[1] 
http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Config/Index.html

greetings,
Bernhard