Typo3 - Templates mit Fluid

Fluid soll dafür sorgen, daß die Ausgabe Logik mit ins Template kommt. Dadurch soll das Arbeiten übersichtlicher werden.

Links

http://blog.sbtheke.de/web-development/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout

http://t3n.de/magazin/seitentemplates-fluid-226788/

Fluid Quickstart

Vorbereitung

Extensions fluid und extbase müssen installiert sein.

Einführung in Fluid Templates

• Bisher nur für Extensions
• Ab TYPO3 4.5 FLUIDTEMPLATE TypoScript-Objekt. Dieses steht für Templates zur Verfügung und nutzt im Hintergrund das neu eingeführte Fluid-Standaloneview.

Unterschiede in der Vorgehensweise

Old School mit Markern und Subparts

HTML:

<!-- ###DOCUMENT begin -->
<div id =“content“>
###CONTENT###
</div>
<!-- ###DOCUMENT end -->

TypoScript:

page = PAGE
page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/site/template/tpl_main.html
	workOnSubpart = DOCUMENT
	marks {
		CONTENT < styles.content.get
...

Mit Fluid

HTML-Template mit Fluid Variable "content"

<div id =“content“>
    {content}
</div>

TypoScript mit Fluidtemplate-Objekt statt Template-Objekt

page = PAGE

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/templates/fluid/1col.html
  partialRootPath = fileadmin/templates/fluid/partials/
  layoutRootPath = fileadmin/templates/fluid/layouts/
  variables {
    content < styles.content.get
    content.select.where = colPos = 0
  }
}

Seiteneigenschaften ausgeben

Die Seiteneigenschaften (uid, title etc.) können über das data Array abgerufen werden:

UID: {data.uid}, Titel: {data.title}
Alle Eigenschaften: <f:debug>{data}</f:debug>

Conditions / Bedingungen

In Fluid kann man mit dem If-ViewHelper Bedingungen für die Ausgabe setzen:

<f:if condition="{data.layout}==1">
    <f:then>
        Layout-Feld steht auf dem Wert "Layout 1"
    </f:then>
    <f:else>
        Layout-Feld steht NICHT auf dem Wert "Layout 1"
    </f:else>
</f:if>

TypoScript Objekte einbinden

Bei Marker-Templates mußte man im TypoScript Objekte einem Marker oder Subpart zuweisen. In Fluid kann man mit dem CObject-ViewHelper direkt aus dem Template auf beliebige TypoScript Objekte zugreifen.

TypoScript

lib.test1 = TEXT
lib.test1.value = Aus dem TypoScript!

lib.test2 = IMAGE
lib.test2 {
	file = GIFBUILDER
	file {
		XY = 300,30
		backColor = #cc0000
		10 = TEXT
		10.text.current = 1
		10.fontColor = #ffffff
		10.offset = 10, 25
	}
}

HTML

<f:cObject typoscriptObjectPath="lib.test1" />
<f:cObject typoscriptObjectPath="lib.test2">Das wird als Bild gerendert</f:cObject>

Darstellung über Fluid

Im Beispiel oben wird einfach der Inhalt der Datenbank ausgegeben, ohne die Formatierung über css_styled_content. Dies kann man jetzt direkt im Template regeln. Im Fluidtemplate kann man verschiedene Optionen mitgeben. Dabei bedient sich fluid der Punktschreibweise. Mit f:format.html wird der Inhalt als HTML ausgegeben.

<div id =“content“>
<f:format.html>{content}</f:format.html>
</div>

Fluid Templates mit BE-Auswahl

Dafür wird das File über ein Case Objekt statt direkt ausgewählt.

BE Layouts erstellen

• Ordner erstellen
• BE Datensätze für jedes Layout erstellen
• PageTS

# Speicherseite der gridlayout Datensätze
TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29
TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29

# Optional: verstecken des "kein Layout" Labels
TCEFORM.pages.backend_layout_next_level.removeItems= -1
TCEFORM.pages.backend_layout.removeItems= -1

# Benennen der Labels
## "empty" label
TCEFORM.pages.backend_layout.altLabels.0 = Vordefiniertes Layout
TCEFORM.pages.backend_layout.altLabels.1 = 1 Spaltig
TCEFORM.pages.backend_layout.altLabels.2 = 2 Spaltig
TCEFORM.pages.backend_layout.altLabels.3 = Nur Inhalt