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
  }
}

Formatoptionen in 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>

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

TypoScript Objekte anzeigen

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!

HTML

<f:cObject typoscriptObjectPath="lib.test1" />

Übergabe von Content an TypoScript

Man kann vor der Ausgabe eines TypoScript Objektes auch Inhalt an dieses senden.

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
	}
}

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

Dazu wird mittels der stdWrap-Eigenschaft „current = 1“ Inhalt an das TS Objekt geschickt. Im Beispiel wird der Text innerhalb des typoscriptObbjectPath Tags an das Gifbuilder Objekt gesendet.

Layout und Partial

Beim Aufbau einer Seite ergibt sich oft eine Struktur von wiederkehrenden Teilen, die sich etwa so beschreiben läßt:

|-- Layout Start ---------|
|   Logo                  |
| |--Template Start ----| |
| |                     | |
| | |-- Partial ------| | |
| | | Navigation hier | | |
| | |-----------------| | |
| |                     | |
| | Inhalt, inhalt      | |
| |                     | |
| | |-- Partial ------| | |
| | | Navigation hier | | |
| | |-----------------| | |
| |                     | |
| |  Inhalt             | |
| |---------------------| |
|                           |
|----------------------|

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