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

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