Typo3 - Templates mit Fluid: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(9 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
Fluid soll dafür sorgen, daß die Ausgabe Logik mit ins Template kommt. Dadurch soll das Arbeiten übersichtlicher werden.
 
Fluid soll dafür sorgen, daß die Ausgabe Logik mit ins Template kommt. Dadurch soll das Arbeiten übersichtlicher werden.
 
== Links ==
 
== Links ==
−
http://blog.sbtheke.de/web-development/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout
+
* https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html
−
 
+
* https://fluidtypo3.org/viewhelpers.html
−
http://t3n.de/magazin/seitentemplates-fluid-226788/
+
* 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]]
 
[[TYPO3 mit Fluid - komplettes Beispiel]]
  
 +
=== Lokalisierung mit Extbase und Fluid ===
 +
http://docs.typo3.org/typo3cms/ExtbaseFluidBook/9-CrosscuttingConcerns/1-localizing-and-internationalizing-an-extension.html
  
 
== Fluid Quickstart ==
 
== Fluid Quickstart ==
Zeile 143: Zeile 146:
 
</pre>
 
</pre>
  
−
Ü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.
+
Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung ist aber nur sinnvoll, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.
 +
 
 +
== Beispiele ==
 +
=== Komplettes Beispiel mit Auswahl des Backend Layouts ===
 +
Wir gehen von angelegten Backendlayouts mit den ids 1-3 aus...
 +
 
 +
Quelle: http://blog.sbtheke.de/web-development/typo3/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout#2-html-templates-erstellen (2016-07)
 +
 
 +
''fileadmin/templates/fluid/layouts/default.html''
 +
<syntaxhighlight lang="html5">
 +
<div id="header">...</div>
 +
<div id="content">
 +
  <f:render section="content" />
 +
</div>
 +
<div id="footer">...</div>
 +
 
 +
''fileadmin/templates/fluid/1col.html''
 +
 
 +
<syntaxhighlight lang="html5">
 +
<f:layout name="default" />
 +
<f:section name="content">
 +
  <div id="content_main">
 +
    <f:format.html>{content}</f:format.html>
 +
  </div>
 +
</f:section>
 +
</syntaxhighlight>
 +
 
 +
fileadmin/templates/fluid/2col.html
 +
<syntaxhighlight lang="html5">
 +
<f:layout name="default" />
 +
<f:section name="content">
 +
  <div id="content_main">
 +
    <f:format.html>{content}</f:format.html>
 +
  </div>
 +
  <div id="content_left">
 +
    <f:format.html>{content_left}</f:format.html>
 +
  </div>
 +
</f:section>
 +
</syntaxhighlight>
 +
 
 +
''fileadmin/templates/fluid/popup.html''
 +
 
 +
<syntaxhighlight lang="html5">
 +
<div id="content">
 +
  <f:format.html>{content}</f:format.html>
 +
</div>
 +
</syntaxhighlight>
 +
 
 +
3) TypoScript Konfiguration
 +
 
 +
Allgemeine Konfiguration und Zuweisung der Platzhalter
 +
 
 +
'''TS Setup'''
 +
<syntaxhighlight lang="typoscript">
 +
page.10 = FLUIDTEMPLATE
 +
page.10 {
 +
  partialRootPath = fileadmin/templates/fluid/partials/
 +
  layoutRootPath = fileadmin/templates/fluid/layouts/
 +
  variables {
 +
    content < styles.content.get
 +
    content_left < styles.content.get
 +
    content_left.select.where = colPos=1
 +
  }
 +
}
 +
</syntaxhighlight>
 +
 
 +
In die Platzhalter „content“ und „content_left“ werden nun die Inhalte eingelesen, die vom Redakteur im Backend in den entsprechenden Spalten angelegt wurde. Gei „content_left“ lesen wir die Inhalte aus „Spaltennummer“ 1 ein, also die Inhalte aus Spalte „Linker Rand“, die weiter oben im Backend Layout definiert wurde.
 +
 
 +
Zuweisung BE Layout zu HTML-Template
 +
 
 +
Je nachdem, welches Backend Layout in den Seiteneigenschaften ausgewählt wurde, sollte ein anderes Seiten-Template verwendet werden. Dies geschieht mit diesen TypoScript-Anweisungen:
 +
 
 +
TS Setup
 +
<syntaxhighlight lang="typoscript">
 +
page.10.file.cObject = CASE
 +
page.10.file.cObject {
 +
  key.data = levelfield:-1, backend_layout_next_level, slide
 +
  key.override.field = backend_layout
 +
  default = TEXT
 +
  default.value = fileadmin/templates/fluid/2cols.html
 +
  2 = TEXT
 +
  2.value = fileadmin/templates/fluid/1col.html
 +
  3 = TEXT
 +
  3.value = fileadmin/templates/fluid/popup.html
 +
}
 +
</syntaxhighlight>
 +
 
 +
Standardmäßig wird dabei das 2-Spalten-Layout verwendet (dieses sollte deshalb auch auf der Root-Seite in zwei Select-Boxen für das Backend-Layout ausgewählt werden). Die Templates werden über die IDs der Backend-Layouts zugewiesen. In meinem Fall hat das 1-spaltige Backend-Layout die ID 2, das Popup-Backend-Layout die ID 3.
 +
Optional: CSS Datei einbinden, abhängig von gewählen Layout
 +
<syntaxhighlight lang="typoscript">
 +
page.headerData.10 = CASE
 +
page.headerData.10 {
 +
  stdWrap.wrap = <link rel="stylesheet" type="text/css" href="path/to/css/|" media="all" />
 +
  key.data = levelfield:-1, backend_layout_next_level, slide
 +
  key.override.field = backend_layout
 +
  default = TEXT
 +
  default.value = layout_2col.css
 +
  2 = TEXT
 +
  2.value = layout_1col.css
 +
  3 = TEXT
 +
  3.value = layout_popup.css
 +
}
 +
</syntaxhighlight>
 +
 
 +
'''Optional:''' body-Tag mit Klasse auszeichnen
 +
 
 +
Für das Layout ist es oft nötig, dass man in CSS weiß, welches Layout aktuell gewählt ist. Deshalb kann man dem body-Tag je nach gewählten Layout eine andere Klasse geben:
 +
 
 +
'''TS Setup'''
 +
<syntaxhighlight lang="typoscript">
 +
page.bodyTagCObject = CASE
 +
page.bodyTagCObject {
 +
  stdWrap.wrap = < body class="|" >
 +
  key.data = levelfield:-1, backend_layout_next_level, slide
 +
  key.override.field = backend_layout
 +
  default = TEXT
 +
  default.value = layout-2col
 +
  2 = TEXT
 +
  2.value = layout-1col
 +
  3 = TEXT
 +
  3.value = layout-popup
 +
}
 +
</syntaxhighlight>
  
 
== TypoScript-Optionen ==
 
== TypoScript-Optionen ==
Zeile 164: Zeile 289:
 
stdWrap StdWrap-Eigenschaften auf die gesamte Ausgabe anwenden
 
stdWrap StdWrap-Eigenschaften auf die gesamte Ausgabe anwenden
 
</pre>
 
</pre>
 +
 +
== Beispiele ==
 +
<syntaxhighlight lang="typoscript">
 +
lib.stdContent = FLUIDTEMPLATE
 +
lib.stdContent {
 +
    templateName = Default
 +
    layoutRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Layouts
 +
        20 = EXT:sitemodification/Resources/Private/Layouts
 +
    }
 +
    partialRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Partials
 +
        20 = EXT:sitemodification/Resources/Private/Partials
 +
    }
 +
    templateRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Templates
 +
        20 = EXT:sitemodification/Resources/Private/Templates
 +
    }
 +
    variables {
 +
        foo = bar
 +
    }
 +
}
 +
</syntaxhighlight>
 +
 +
<syntaxhighlight lang="typoscript">
 +
lib.stdContent = FLUIDTEMPLATE
 +
lib.stdContent {
 +
    templateName = TEXT
 +
    templateName.stdWrap {
 +
        cObject = TEXT
 +
        cObject {
 +
            data = levelfield:-2,backend_layout_next_level,slide
 +
            override.field = backend_layout
 +
            split {
 +
                token = frontend__
 +
                1.current = 1
 +
                1.wrap = |
 +
            }
 +
        }
 +
        ifEmpty = Default
 +
    }
 +
    layoutRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Layouts
 +
        20 = EXT:sitemodification/Resources/Private/Layouts
 +
    }
 +
    partialRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Partials
 +
        20 = EXT:sitemodification/Resources/Private/Partials
 +
    }
 +
    templateRootPaths {
 +
        10 = EXT:frontend/Resources/Private/Templates
 +
        20 = EXT:sitemodification/Resources/Private/Templates
 +
    }
 +
    variables {
 +
        foo = bar
 +
    }
 +
}
 +
</syntaxhighlight>
  
 
== Fluid Snippets ==
 
== Fluid Snippets ==
 +
http://itype3.blogspot.de/2013/03/fluid-template.html
 +
 +
[[TYPO3 Fluid - Snippets]]
  
 
== Fluid Templates mit BE-Auswahl ==
 
== Fluid Templates mit BE-Auswahl ==

Aktuelle Version vom 25. Juli 2016, 17:10 Uhr

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

Links[Bearbeiten]

TYPO3 mit Fluid - komplettes Beispiel

Lokalisierung mit Extbase und Fluid[Bearbeiten]

http://docs.typo3.org/typo3cms/ExtbaseFluidBook/9-CrosscuttingConcerns/1-localizing-and-internationalizing-an-extension.html

Fluid Quickstart[Bearbeiten]

Vorbereitung[Bearbeiten]

Extensions fluid und extbase müssen installiert sein.

Einführung in Fluid Templates[Bearbeiten]

  • 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[Bearbeiten]

Old School mit Markern und Subparts[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

TypoScript Objekte anzeigen[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

  • 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 ist aber nur sinnvoll, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.

Beispiele[Bearbeiten]

Komplettes Beispiel mit Auswahl des Backend Layouts[Bearbeiten]

Wir gehen von angelegten Backendlayouts mit den ids 1-3 aus...

Quelle: http://blog.sbtheke.de/web-development/typo3/typo3-verschiedene-seiten-templates-mit-fluid-und-be-layout#2-html-templates-erstellen (2016-07)

fileadmin/templates/fluid/layouts/default.html 

<div id="header">...</div>
<div id="content">
  <f:render section="content" />
</div>
<div id="footer">...</div>

''fileadmin/templates/fluid/1col.html''

<syntaxhighlight lang="html5">
<f:layout name="default" />
<f:section name="content">
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
</f:section>

fileadmin/templates/fluid/2col.html 

<f:layout name="default" />
<f:section name="content">
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
  <div id="content_left">
    <f:format.html>{content_left}</f:format.html>
  </div>
</f:section>

fileadmin/templates/fluid/popup.html 

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

3) TypoScript Konfiguration

Allgemeine Konfiguration und Zuweisung der Platzhalter

TS Setup 

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

In die Platzhalter „content“ und „content_left“ werden nun die Inhalte eingelesen, die vom Redakteur im Backend in den entsprechenden Spalten angelegt wurde. Gei „content_left“ lesen wir die Inhalte aus „Spaltennummer“ 1 ein, also die Inhalte aus Spalte „Linker Rand“, die weiter oben im Backend Layout definiert wurde.

Zuweisung BE Layout zu HTML-Template

Je nachdem, welches Backend Layout in den Seiteneigenschaften ausgewählt wurde, sollte ein anderes Seiten-Template verwendet werden. Dies geschieht mit diesen TypoScript-Anweisungen:

TS Setup 

page.10.file.cObject = CASE
page.10.file.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = fileadmin/templates/fluid/2cols.html
  2 = TEXT
  2.value = fileadmin/templates/fluid/1col.html
  3 = TEXT
  3.value = fileadmin/templates/fluid/popup.html
}

Standardmäßig wird dabei das 2-Spalten-Layout verwendet (dieses sollte deshalb auch auf der Root-Seite in zwei Select-Boxen für das Backend-Layout ausgewählt werden). Die Templates werden über die IDs der Backend-Layouts zugewiesen. In meinem Fall hat das 1-spaltige Backend-Layout die ID 2, das Popup-Backend-Layout die ID 3. Optional: CSS Datei einbinden, abhängig von gewählen Layout 

page.headerData.10 = CASE
page.headerData.10 {
  stdWrap.wrap = <link rel="stylesheet" type="text/css" href="path/to/css/|" media="all" />
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = layout_2col.css
  2 = TEXT
  2.value = layout_1col.css
  3 = TEXT
  3.value = layout_popup.css
}

Optional: body-Tag mit Klasse auszeichnen

Für das Layout ist es oft nötig, dass man in CSS weiß, welches Layout aktuell gewählt ist. Deshalb kann man dem body-Tag je nach gewählten Layout eine andere Klasse geben:

TS Setup 

page.bodyTagCObject = CASE
page.bodyTagCObject {
  stdWrap.wrap = < body class="|" >
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  default = TEXT
  default.value = layout-2col
  2 = TEXT
  2.value = layout-1col
  3 = TEXT
  3.value = layout-popup
}

TypoScript-Optionen[Bearbeiten]

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

Beispiele[Bearbeiten]

lib.stdContent = FLUIDTEMPLATE
lib.stdContent {
    templateName = Default
    layoutRootPaths {
        10 = EXT:frontend/Resources/Private/Layouts
        20 = EXT:sitemodification/Resources/Private/Layouts
    }
    partialRootPaths {
        10 = EXT:frontend/Resources/Private/Partials
        20 = EXT:sitemodification/Resources/Private/Partials
    }
    templateRootPaths {
        10 = EXT:frontend/Resources/Private/Templates
        20 = EXT:sitemodification/Resources/Private/Templates
    }
    variables {
        foo = bar
    }
}

lib.stdContent = FLUIDTEMPLATE
lib.stdContent {
    templateName = TEXT
    templateName.stdWrap {
        cObject = TEXT
        cObject {
            data = levelfield:-2,backend_layout_next_level,slide
            override.field = backend_layout
            split {
                token = frontend__
                1.current = 1
                1.wrap = |
            }
        }
        ifEmpty = Default
    }
    layoutRootPaths {
        10 = EXT:frontend/Resources/Private/Layouts
        20 = EXT:sitemodification/Resources/Private/Layouts
    }
    partialRootPaths {
        10 = EXT:frontend/Resources/Private/Partials
        20 = EXT:sitemodification/Resources/Private/Partials
    }
    templateRootPaths {
        10 = EXT:frontend/Resources/Private/Templates
        20 = EXT:sitemodification/Resources/Private/Templates
    }
    variables {
        foo = bar
    }
}

Fluid Snippets[Bearbeiten]

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

TYPO3 Fluid - Snippets

Fluid Templates mit BE-Auswahl[Bearbeiten]

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

BE Layouts erstellen[Bearbeiten]

  • 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
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Typo3_-_Templates_mit_Fluid&oldid=21641“