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/

TYPO3 mit Fluid - komplettes Beispiel

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

Jedes Template kann genau 1 Layout haben. Es ist eine Art Rahmen um die Template Inhalte.
Das Template kann mehrere Partials haben. Sie liegen im Template (s.u.).

Falls das Template sich wiederholende oder besonders komplexe Elemente enthält, können diese in ein sogenanntes Partial ausgelagert werden. Diese müssen in eigenen HTML-Dateien in dem Ordner liegen, der im FLUIDTEMPLATE-Objekt mit dem partialRootPath-Attribut beschrieben wurde. Ein solches Partial kann im eigentlichen Template mit dem

<f:render>

ViewHelper angesprochen werden (wichtig: Das Partial muss ohne Dateiendung angegeben werden):

<div id=“search“>
  <f:render partial=“search“ />
</div>

Ü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.

TypoScript-Optionen

TypoScript-Optionen, die mit dem Content-Objekt FLUIDTEMPLATE möglich sind.

Auf "file", "layoutRootPath" und "partialRootPath" können zudem stdWrap Eigenschaften angewendet werden.

Option	Bemerkung
file	Pfad zur Templatedatei (string + stdWrap)
format	Format – Default ist HTML
extbase. pluginName	Festlegen des Plugin-Namens
extbase. controllerExtensionName	Festlegen des Extension-Namens
extbase. controllerName	Festlegen des Controller-Namens
extbase. controllerActionName	Festlegen des Action-Namens
layoutRootPath	Pfad zu den Layout-Dateien (string + stdWrap)
partialRootPath	Pfad zu den Partial-Dateien (string + stdWrap)
variables	Array von Content-Objekten, auf die im Template via Schlüssl zugegriffen werden kann
stdWrap	StdWrap-Eigenschaften auf die gesamte Ausgabe anwenden

Fluid Snippets

http://itype3.blogspot.de/2013/03/fluid-template.html

TYPO3 Fluid - Snippets

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