Fluid - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(42 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
== Links ==
 
== Links ==
  
−
http://wiki.typo3.org/Category:De:fluid
+
http://wiki.typo3.org/Category:De:fluid
 +
http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html
  
 +
=== ViewHelper ===
 +
https://www.typo3lexikon.de/typo3-tutorials/core/systemextensions/fluid/fluid-viewhelper.html
  
 
== Debugging ==
 
== Debugging ==
 
  <f:debug title="band">{band}</f:debug>
 
  <f:debug title="band">{band}</f:debug>
 +
<f:debug>{_all}</f:debug>
 +
 
== Lokalisierung - Mehrsprachigkeit ==
 
== Lokalisierung - Mehrsprachigkeit ==
 
  <f:translate key="tx_gbbandpass_domain_model_band.name" />
 
  <f:translate key="tx_gbbandpass_domain_model_band.name" />
 +
Tool zum erstellen der Lokalisierungsdateien (Sprachdateien): http://lbrmedia.net/tools/xliff_translation_file_erstellen/xlfC/Pi1/
 +
 +
== Template Teile in Partials auslagern und Daten übergeben ==
 +
Um Fluid Templates übersichtlich zu gestalten kann man Teile in Partials auslagern. Dem Partial muß man aber die Objekte übergeben, die es rendern soll. So funktioniert es:
 +
<f:render partial="Rma/ListDevices" arguments="{rma:rma}" />
 +
Das Objekt rma soll als Objekt rma übergeben werden. Das Partial findet sich in diesem Fall im Extension Ordner unter
 +
Resources/Private/Partials/Rma/Log.html
 +
 +
<f:render partial="Rma/Log" arguments="{_all}" />
 +
Hier werden alle Objekte übergeben
 +
 +
<f:render partial="Rma/ListDevices" arguments="{rma:rma,device:device}" />
 +
Mehrere Objekte mit Komma getrennt übergeben
 +
 
== Links erzeugen ==
 
== Links erzeugen ==
 
http://wiki.typo3.org/De:ViewHelper/Link
 
http://wiki.typo3.org/De:ViewHelper/Link
Zeile 24: Zeile 43:
 
  <f:link.page pageUid="1" additionalParams="{foo: 'bar'}">page link</f:link.page>
 
  <f:link.page pageUid="1" additionalParams="{foo: 'bar'}">page link</f:link.page>
  
−
=== Bilder ===
+
=== Link Beispiele ===
 +
==== Springen zu einem Anchor-Punkt====
 +
Section entspricht der ID eines Divs
 +
<f:link.page section="frame">Top</f:link.page>
 +
====Link auf eine interne Seite====
 +
<f:link.page pageUid="3">Kontakt</f:link.page>
 +
==== Link mit Parameter Übergabe ====
 +
<f:link.page pageUid="3"  additionalParams="{name: 'wert'}">Kontakt</f:link.page>
 +
====Link auf eine externe Adresse====
 +
<f:link.external url="http://www.typo3.org" target="_blank">Link zy TYPO3</f:link.external>
 +
====Link auf eine E-Mail-Adresse====
 +
<f:link.email email="adresse@domain.com" />
 +
 
 +
==== Link mit mehreren Argumenten ====
 +
<f:link.action action="addDevice" arguments="{rma:rma,deviceClassUid:deviceClass.uid}">{deviceClass.classTitle} </f:link.action>
 +
 
 +
== Bilder ==
 
  <f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" maxWidth="200"/>
 
  <f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" maxWidth="200"/>
 +
=== Beispiele ===
 +
Beispiel in Originalgröße
 +
<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" />
  
 +
Beispiel: Beibehaltung der Proportionen
 +
<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="50" />
 +
 +
Beispiel: Geschnittenes Bild
 +
<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="100c" height="100c" />
 +
 +
Die kürzere Seite wird auf 100 Pixel gesetzt und bei der längeren Seite wird nach 100 Pixeln einfach abgeschnitten.
 
==== Beispiele für Bilder einer eigenen Extension in Fluid ====
 
==== Beispiele für Bilder einer eigenen Extension in Fluid ====
  
Zeile 65: Zeile 110:
 
</pre>
 
</pre>
  
−
=== Bedingungen ===
+
== Conditions, If-Else-Bedingungen in Fluid Templates ==
−
==== Template Variable mit String vergleichen ====
+
http://www.extbasefluid.com/fluid/bedingungen-ifelse/
 +
 
 +
<pre>
 +
<f:if condition="{meineBedingungsVariable}">
 +
  <f:then> Dieser Text wird ausgegeben, wenn meineBedingungsVariable weder leer noch 0 ist. </f:then>
 +
  <f:else> Dieser Text wird ausgegeben, wenn meineBedingungsVariable leer oder 0 ist. </f:else>
 +
</f:if>
 +
</pre>
 +
<f:if condition="{meineBedingungsVariable} > 3">
 +
...
 +
<pre>
 +
// Modulo
 +
<f:for each="{photos}" as="photo" cycle="cycle">
 +
<div class="photo">{photo.name}</div>
 +
<f:if condition="{cycle} % 2"> <br/> </f:if>
 +
</f:for>
 +
</pre>
 +
<f:if condition="{meineBedingungsVariable} == {meinWertZumPruefen}">
 +
...
 +
<pre>
 +
<f:if condition="<f:count subject='{post.comments}' /> > 0">
 +
<f:then> [...] {comments} [...] </f:then>
 +
<f:else> Keine Kommentare gefunden. </f:else>
 +
</f:if>
 +
//Um eigene Viewhelper in der Bedingung zu verwenden müssen einfache Hochkommas in der Bedingung verwendet werden.
 +
</pre>
 +
=== Beispiel - Letztes Element In Schleife===
 +
<pre>
 +
<f:alias map="{n: '{items->f:count()}'}">
 +
<f:for each="{items}" as="item" iteration="i">
 +
{item.property}<br>
 +
<f:if condition="{n} > {i.cycle}">
 +
<f:then>da kommt noch eins <br></f:then>
 +
<f:else>das wars</f:else>
 +
</f:if>
 +
</f:for>
 +
</pre>
 +
=== Beispiel - Objekte vorhanden / Objekte zählen===
 +
Testen ob Objekte zum Ausgeben vorhanden sind (hier projects)
 +
<pre>
 +
<f:if condition="{projects}">
 +
  <f:then>
 +
    <f:for each="{projects}" as="project">
 +
      <tr>
 +
        <td>{project.name}</td>
 +
        <td><f:count subject="{project.assignments}" /> Mitarbeiter</td>
 +
        <td>{project.workedTime}<td>
 +
      </tr>
 +
    </f:for>
 +
  </f:then><f:else>
 +
    <tr><td>Keine Projekte gefunden</td></tr>
 +
  </f:else>
 +
</f:if>
 +
</pre>
 +
 
 +
===Beispiel 2===
 +
 
 +
'''TypoScript'''
 +
<pre>
 +
partialAuswahl = TEXT
 +
partialAuswahl.value = 1
 +
 
 +
# FLUID Template definieren
 +
fluidTemplate = FLUIDTEMPLATE
 +
fluidTemplate {
 +
  ...
 +
  variables {
 +
    partial < partialAuswahl
 +
  }
 +
}
 +
</pre>
 +
'''Template (view-helper)'''
 +
Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1
 +
 
 +
<pre>
 +
<f:if condition="{partial} == 1">
 +
    <f:then>
 +
      Partial {partial} ausgegeben.
 +
    </f:then>
 +
 
 +
    <f:else>
 +
        Keine Partial-Angabe gefunden
 +
    </f:else>
 +
</f:if>
 +
</pre>
 +
 
 +
=== Template Variable mit String vergleichen ===
 
http://www.typo3lexikon.de/typo3-tutorials/extensions/fluid/fluid-tipps-und-tricks.html
 
http://www.typo3lexikon.de/typo3-tutorials/extensions/fluid/fluid-tipps-und-tricks.html
  
Zeile 98: Zeile 229:
 
  {data.bodytext}
 
  {data.bodytext}
 
</f:if>
 
</f:if>
 +
</pre>
 +
 +
=== Switches (ab Typo3 6.2 ===
 +
<pre>
 +
<f:switch expression="{person.gender}">

 +
  <f:case value="male">Mr.</f:case>

 +
  <f:case value="female">Mrs.</f:case>

 +
  <f:case default="TRUE">Mrs. or Mr.</f:case>

 +
</f:switch>
 
</pre>
 
</pre>
  
Zeile 142: Zeile 282:
 
   </script>
 
   </script>
 
</f:format.cdata>
 
</f:format.cdata>
 +
</pre>
 +
 +
== Schleifen ==
 +
=== 4 Spalten mit Modulo ===
 +
<pre>
 +
<f:for each="{images}" as="image" iteration="iteration">
 +
    <f:image src="upload/tx_myextension/{image.source}" width="200" height="150" alt="Mein Bild {image.caption}" />
 +
    <f:if condition="{iteration.cycle}%4==0"><br/></f:if>
 +
</f:for>
 +
</pre>
 +
 +
== TypoScript in Fluid ==
 +
== Plugin per TypoScript holen und einbinden ==
 +
https://blog.teamgeist-medien.de/2014/03/typo3-eine-extbase-extension-per-typoscript-einbinden.html
 +
 +
Beispiel Cookiemanager - typoscript
 +
<syntaxhighlight lang="typoscript">
 +
# COOKIE MANAGER
 +
plugin.tx_waconcookiemanagement.persistence.storagePid = 406
 +
#plugin.tx_waconcookiemanagement.persistence.storagePid.ifEmpty.data = {page:uid}
 +
lib.cookieManager = COA
 +
lib.cookieManager {
 +
    10 < tt_content.list.20.waconcookiemanagement_cookiefreigabe
 +
}
 +
</syntaxhighlight>
 +
Fluid Template
 +
<syntaxhighlight lang="html5">
 +
<div class="cookie-manager"><f:cObject typoscriptObjectPath="lib.cookieManager"/></div>
 +
</syntaxhighlight>
 +
==== Texte direkt aus dem TypoScript Objekt holen====
 +
TypoScript
 +
inhaltSpalteNormal < styles.content.get
 +
HTML
 +
<f:cObject typoscriptObjectPath="inhaltSpalteNormal" />
 +
 +
====Texte direkt aus dem TypoScript Objekt holen kombiniert====
 +
'''TypoScript'''
 +
<pre>
 +
meinText = TEXT
 +
meinText {
 +
  wrap = <p>Hier steht der Text aus dem Template:&nbsp;<b>"|"</b></p>
 +
  # Ohne diese Einstellung würde die | nicht
 +
  # mit dem Text aus dem Template ersezt werden
 +
  current = 1
 +
}
 +
</pre>
 +
 +
==== TypoScript holen ====
 +
Hier gibt es zwei Varianten. Die eine per data-Attribut den Text übergeben und die Andere
 +
zwischen den f:cObject-Tags.
 +
<f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template, er wird ersetzt"/>
 +
 +
oder
 +
<pre>
 +
<f:cObject typoscriptObjectPath="meinText">
 +
  Platzhaltertext
 +
</f:cObject>
 +
</pre>
 +
 +
==== Beispiel ====
 +
<pre>
 +
plugin.tx_extname {
 +
settings {
 +
foo = blub
 +
bla {
 +
bar = lorem
 +
}
 +
    }
 +
}
 +
</pre>
 +
 +
print \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump( $this->settings['foo'] );
 +
print \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump( $this->settings['bla']['bar'] );
 +
 +
===Inline Notation===
 +
 +
'''TypoScript'''
 +
<pre>
 +
anredeHerr = TEXT
 +
anredeHerr.value = 1
 +
 +
# FLUID Template definieren
 +
fluidTemplate = FLUIDTEMPLATE
 +
fluidTemplate {
 +
  ...
 +
  variables {
 +
    anredeHerr < anredeHerr
 +
  }
 +
}
 +
</pre>
 +
 +
'''Template (View-Helper)'''
 +
<pre>
 +
<p>
 +
  Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: '&nbsp;Frau')} XY, <br />
 +
  wir m&ouml;chten Ihnen mitteilen, dass...
 +
</p>
 +
</pre>
 +
 +
== Alias - Werte zwischenspeichern ==
 +
<pre>
 +
<f:alias map="{amount: '{addresses->f:count()}'}">
 +
  <p>There are {amount} records in database</p>
 +
</f:alias>
 +
</pre>
 +
 +
== Formulare ==
 +
siehe auch [[Formulare mit Extbase und Fluid]]
 +
 +
== Anderes ==
 +
=== Fluid überschreiben ===
 +
z.B. bei SystemExtensions:
 +
 +
http://blog.teamgeist-medien.de/2014/11/typo3-fluid-viewhelper-templates-ueberschreiben-z-b-vom-paginate-widget.html
 +
 +
Ohne Namespaces (TYPO3 < 6.x)
 +
<pre>
 +
# Zentral für alle Plugins
 +
config.tx_extbase.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/
 +
 +
# Nur für ein bestimmtes Plugin
 +
plugin.tx_extension.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/
 +
</pre>
 +
Mit Namespaces (TYPO3 >= 6.x)
 +
<pre>
 +
# Zentral für alle Plugins
 +
config.tx_extbase.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/
 +
 +
# Nur für ein bestimmtes Plugin
 +
plugin.tx_extension.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/
 +
</pre>
 +
Wichtig:
 +
Bei den Templates ist es wichtig auf die richtige Ordnerstruktur zu achten! Hierzu kann man sich die Originalstruktur unter
 +
typo3_src-x.x.x/typo3/sysext/fluid/Resources/Private/Templates/ViewHelpers
 +
anschauen.
 +
 +
=== Count - Objekte zählen ===
 +
<f:count subject="{myObjects}" />
 +
oder in Inline Notation:
 +
{myObjects->f:count()}
 +
 +
=== Weitere Beispiele ===
 +
Quellen:
 +
 +
http://itype3.blogspot.de/2013/03/fluid-template.html
 +
 +
 +
====Unix Timestamps als Datum anzeigen====
 +
<f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>
 +
 +
====Text auf eine gewisse Länge abschneiden====
 +
append wird dem abgekürztem Text am Ende eingefügt, wie z.B. ein Leerzeichen und drei Punkte um zu symbolisieren, dass der Text abgekürzt wurde.
 +
<f:format.corp maxCharacters="50" append="&nbsp; ...">Hier folgt der TEXT</f:format.corp>
 +
 +
== Kommentare in Fluid ==
 +
Comment-View-Helper
 +
 +
Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden.
 +
<pre>
 +
<f:comment>
 +
    Das ist ein Comment für den Entwickler, der im Quelltext
 +
    im Gegensatz zum HTML-Comment nicht zu sehen ist
 +
</f:comment>
 
</pre>
 
</pre>

Aktuelle Version vom 23. Juni 2020, 13:16 Uhr

Links[Bearbeiten]

http://wiki.typo3.org/Category:De:fluid
http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html

ViewHelper[Bearbeiten]

https://www.typo3lexikon.de/typo3-tutorials/core/systemextensions/fluid/fluid-viewhelper.html

Debugging[Bearbeiten]

<f:debug title="band">{band}</f:debug>
<f:debug>{_all}</f:debug>

Lokalisierung - Mehrsprachigkeit[Bearbeiten]

<f:translate key="tx_gbbandpass_domain_model_band.name" />
Tool zum erstellen der Lokalisierungsdateien (Sprachdateien): http://lbrmedia.net/tools/xliff_translation_file_erstellen/xlfC/Pi1/

Template Teile in Partials auslagern und Daten übergeben[Bearbeiten]

Um Fluid Templates übersichtlich zu gestalten kann man Teile in Partials auslagern. Dem Partial muß man aber die Objekte übergeben, die es rendern soll. So funktioniert es: 

<f:render partial="Rma/ListDevices" arguments="{rma:rma}" />

Das Objekt rma soll als Objekt rma übergeben werden. Das Partial findet sich in diesem Fall im Extension Ordner unter 

Resources/Private/Partials/Rma/Log.html

<f:render partial="Rma/Log" arguments="{_all}" />

Hier werden alle Objekte übergeben

<f:render partial="Rma/ListDevices" arguments="{rma:rma,device:device}" /> Mehrere Objekte mit Komma getrennt übergeben

Links erzeugen[Bearbeiten]

http://wiki.typo3.org/De:ViewHelper/Link

Link auf Action Controller z.B. Einzelansicht (show) - f:link.action[Bearbeiten]

<f:link.action action="show">action link</f:link.action>
<f:link.action action="show" arguments="{band : band}"> {band.name}</f:link.action>

E-Mail Link - f:link.email[Bearbeiten]

<f:link.email email="foo@bar.tld" />

Externer Link - f:link.external[Bearbeiten]

Standard Scheme ist http es gehen aber auch andere z.B. ftp: 

<f:link.external uri="typo3.org" defaultScheme="ftp">external ftp link</f:link.external>

Seitenlink - f:link.page[Bearbeiten]

<f:link.page pageUid="1" additionalParams="{foo: 'bar'}">page link</f:link.page>

Link Beispiele[Bearbeiten]

Springen zu einem Anchor-Punkt[Bearbeiten]

Section entspricht der ID eines Divs 

<f:link.page section="frame">Top</f:link.page>

Link auf eine interne Seite[Bearbeiten]

<f:link.page pageUid="3">Kontakt</f:link.page>

Link mit Parameter Übergabe[Bearbeiten]

<f:link.page pageUid="3"  additionalParams="{name: 'wert'}">Kontakt</f:link.page>

Link auf eine externe Adresse[Bearbeiten]

<f:link.external url="http://www.typo3.org" target="_blank">Link zy TYPO3</f:link.external>

Link auf eine E-Mail-Adresse[Bearbeiten]

<f:link.email email="adresse@domain.com" />

Link mit mehreren Argumenten[Bearbeiten]

<f:link.action action="addDevice" arguments="{rma:rma,deviceClassUid:deviceClass.uid}">{deviceClass.classTitle} </f:link.action>

Bilder[Bearbeiten]

<f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" maxWidth="200"/>

Beispiele[Bearbeiten]

Beispiel in Originalgröße 

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" />

Beispiel: Beibehaltung der Proportionen 

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="50" />

Beispiel: Geschnittenes Bild 

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="100c" height="100c" />

Die kürzere Seite wird auf 100 Pixel gesetzt und bei der längeren Seite wird nach 100 Pixeln einfach abgeschnitten.

Beispiele für Bilder einer eigenen Extension in Fluid[Bearbeiten]

Beispiel (Quelle: http://keinerweiss.de/755-typo3-fal-in-einer-eigenen-extbasefluid-extension-einsetzen.html 2014/11)

Hier nutzt man den File Abstraction Layer (FAL). Ausgehend von einer mit dem Extension Builder erzeugtem Modell mit Typ Image ein paar Schnipsel für die Ausgabe im template (list.html) 

Mein Model:                       root
Das FileReference Model:          root.image
Der sys_file_reference Datensatz: root.image.originalResource
Der sys_file Datensatz:           root.image.originalResource.originalFile

<f:for each="{roots}" as="root">
Orginal-Attribute:<br />
Dateiname:    {root.image.originalResource.originalFile.name}<br />
Titel:        {root.image.originalResource.originalFile.title}<br />
Beschreibung: {root.image.originalResource.originalFile.description}<br />
Alt-Text:     {root.image.originalResource.originalFile.alternative}<br />
UID:          {root.image.originalResource.originalFile.uid}<br />
Pfad:         {root.image.originalResource.publicUrl}<br /><br />

Referenz-Attribute:<br />
Titel:        {root.image.originalResource.title}<br />
Beschreibung: {root.image.originalResource.name}<br /><br />

Ausgabe als Bild:<br />
<f:image src="{root.image.originalResource.originalFile.uid}" alt="" /><br />
<f:image src="{root.image.uid}" alt="" treatIdAsReference="TRUE" /><br /><br />

Als Link:<br />
<a href="{file.originalResource.publicUrl}">{file.originalResource.title}</a><br /><br />

<f:for each="{root.files}" as="file">                           
        <p>{file.originalResource.originalFile.title}</p>
</f:for>

</f:for>

Conditions, If-Else-Bedingungen in Fluid Templates[Bearbeiten]

http://www.extbasefluid.com/fluid/bedingungen-ifelse/ 

<f:if condition="{meineBedingungsVariable}">
  <f:then> Dieser Text wird ausgegeben, wenn meineBedingungsVariable weder leer noch 0 ist. </f:then>
  <f:else> Dieser Text wird ausgegeben, wenn meineBedingungsVariable leer oder 0 ist. </f:else>
</f:if>

<f:if condition="{meineBedingungsVariable} > 3">
...

// Modulo
<f:for each="{photos}" as="photo" cycle="cycle">
<div class="photo">{photo.name}</div>
<f:if condition="{cycle} % 2"> <br/> </f:if>
</f:for>

<f:if condition="{meineBedingungsVariable} == {meinWertZumPruefen}">
...

<f:if condition="<f:count subject='{post.comments}' /> > 0">
 <f:then> [...] {comments} [...] </f:then>
 <f:else> Keine Kommentare gefunden. </f:else>
 </f:if>
 //Um eigene Viewhelper in der Bedingung zu verwenden müssen einfache Hochkommas in der Bedingung verwendet werden.

Beispiel - Letztes Element In Schleife[Bearbeiten]

<f:alias map="{n: '{items->f:count()}'}">
<f:for each="{items}" as="item" iteration="i">
{item.property}<br>
<f:if condition="{n} > {i.cycle}">
<f:then>da kommt noch eins <br></f:then>
<f:else>das wars</f:else>
</f:if>
</f:for>

Beispiel - Objekte vorhanden / Objekte zählen[Bearbeiten]

Testen ob Objekte zum Ausgeben vorhanden sind (hier projects) 

<f:if condition="{projects}">
  <f:then>
     <f:for each="{projects}" as="project">
      <tr>
        <td>{project.name}</td>
        <td><f:count subject="{project.assignments}" /> Mitarbeiter</td>
        <td>{project.workedTime}<td>
      </tr>
    </f:for>
  </f:then><f:else>
    <tr><td>Keine Projekte gefunden</td></tr>
  </f:else>
</f:if>

Beispiel 2[Bearbeiten]

TypoScript 

 
partialAuswahl = TEXT
partialAuswahl.value = 1

# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
  ...
  variables {
    partial < partialAuswahl
  }
}

Template (view-helper) Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1 

<f:if condition="{partial} == 1">
    <f:then>
      Partial {partial} ausgegeben.
    </f:then>
  
    <f:else>
        Keine Partial-Angabe gefunden
    </f:else>
</f:if>

Template Variable mit String vergleichen[Bearbeiten]

http://www.typo3lexikon.de/typo3-tutorials/extensions/fluid/fluid-tipps-und-tricks.html

Funktioniert im Moment (2014) noch nicht: 

<f:if condition="{data.ctype} == 'table'">
 {data.bodytext}
</f:if>

So geht's:

Über einen Alias 

<f:alias map="{myText: 'table'}">
 <f:if condition="{data.ctype} == {myText}">
 {data.bodytext}
 </f:if>
</f:alias>

Über ein Array (die beiden Operatoren werden in ein Array konvertiert, welches Fluid interpretieren kann) 

<f:if condition="{0:data.ctype} == {0:'table'}">
 {data.bodytext}
</f:if>

Die Array-Lösung hat auch noch den Vorteil, dass man mehrere Werte gleichzeitig überprüfen kann: 

<f:if condition="{0:data.ctype,1:data.hidden,2:data.deleted} == {0:'table',1:'0',2:'0'}">
 {data.bodytext}
</f:if>

Switches (ab Typo3 6.2[Bearbeiten]

<f:switch expression="{person.gender}">
 
   <f:case value="male">Mr.</f:case>
 
   <f:case value="female">Mrs.</f:case>
 
   <f:case default="TRUE">Mrs. or Mr.</f:case>

</f:switch>

RTE Inhalte Rendern[Bearbeiten]

<f:format.html>{content.bodytext}</f:format.html>

Funktioniert aber nicht bei allen CTypes, weil die entsprechenden CSS_Styled_Content Funktionen nicht ausgeführt werden 

<f:if condition="{content.ctype}">
 <f:cObject typoscriptObjectPath="tt_content.{content.ctype}.20" data="{content}" />
</f:if>

Beachtet aber, dass Ihr für diese Lösung auch alle benötigten tt_content-Felder in Eurem Model definiert habt.

CSS und JS einbinden[Bearbeiten]

Eventuell wäre hier TypoScript vorzuziehen.

CSS und JS Dateien über Fluid[Bearbeiten]

<link rel="stylesheet" href="{f:uri.resource(path:'Css/bootstrap.css')}">
<script type="text/javascript" src="{f:uri.resource(path:'Js/jquery.shuffle.js')}"></script>

Funktioniert nicht für Dateien in fileadmin. Der Pfad bezieht sich auf 

typo3conf/ext/myExtKey/Resources/Public/

Inline JS über Fluid[Bearbeiten]

Wrap über CData: 

<![CDATA[
...
]]>

Wrap über Fluid cdata ViewHelper 

<f:format.cdata>
  <script type="text/javascript">
    var myLayout;
    $(document).ready(function() {
      myLayout = $('body').layout({
        north__size: 27,
        north__initClosed: false,
        north__initHidden: false,
        center__maskContents: true // IMPORTANT - enable iframe masking
      });
    });
  </script>
</f:format.cdata>

Schleifen[Bearbeiten]

4 Spalten mit Modulo[Bearbeiten]

<f:for each="{images}" as="image" iteration="iteration">
     <f:image src="upload/tx_myextension/{image.source}" width="200" height="150" alt="Mein Bild {image.caption}" />
     <f:if condition="{iteration.cycle}%4==0"><br/></f:if>
</f:for>

TypoScript in Fluid[Bearbeiten]

Plugin per TypoScript holen und einbinden[Bearbeiten]

https://blog.teamgeist-medien.de/2014/03/typo3-eine-extbase-extension-per-typoscript-einbinden.html

Beispiel Cookiemanager - typoscript 

# COOKIE MANAGER
plugin.tx_waconcookiemanagement.persistence.storagePid = 406
#plugin.tx_waconcookiemanagement.persistence.storagePid.ifEmpty.data = {page:uid}
lib.cookieManager = COA
lib.cookieManager {
     10 < tt_content.list.20.waconcookiemanagement_cookiefreigabe
}

Fluid Template 

<div class="cookie-manager"><f:cObject typoscriptObjectPath="lib.cookieManager"/></div>

Texte direkt aus dem TypoScript Objekt holen[Bearbeiten]

TypoScript 

inhaltSpalteNormal < styles.content.get

HTML 

<f:cObject typoscriptObjectPath="inhaltSpalteNormal" />

Texte direkt aus dem TypoScript Objekt holen kombiniert[Bearbeiten]

TypoScript 

meinText = TEXT
meinText {
  wrap = <p>Hier steht der Text aus dem Template: <b>"|"</b></p>
  # Ohne diese Einstellung würde die | nicht
  # mit dem Text aus dem Template ersezt werden
  current = 1
}

TypoScript holen[Bearbeiten]

Hier gibt es zwei Varianten. Die eine per data-Attribut den Text übergeben und die Andere zwischen den f:cObject-Tags. 

<f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template, er wird ersetzt"/>

oder 

<f:cObject typoscriptObjectPath="meinText">
  Platzhaltertext
</f:cObject>

Beispiel[Bearbeiten]

plugin.tx_extname {
	settings {
		foo = blub
		bla {
			bar = lorem
		}
    }
}

print \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump( $this->settings['foo'] );
print \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump( $this->settings['bla']['bar'] );

Inline Notation[Bearbeiten]

TypoScript 

anredeHerr = TEXT
anredeHerr.value = 1

# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
  ...
  variables {
    anredeHerr < anredeHerr
  }
}

Template (View-Helper) 

<p>
  Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: ' Frau')} XY, <br />
  wir möchten Ihnen mitteilen, dass...
</p>

Alias - Werte zwischenspeichern[Bearbeiten]

<f:alias map="{amount: '{addresses->f:count()}'}">
  <p>There are {amount} records in database</p>
</f:alias>

Formulare[Bearbeiten]

siehe auch Formulare mit Extbase und Fluid

Anderes[Bearbeiten]

Fluid überschreiben[Bearbeiten]

z.B. bei SystemExtensions:

http://blog.teamgeist-medien.de/2014/11/typo3-fluid-viewhelper-templates-ueberschreiben-z-b-vom-paginate-widget.html

Ohne Namespaces (TYPO3 < 6.x) 

# Zentral für alle Plugins
config.tx_extbase.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/

# Nur für ein bestimmtes Plugin
plugin.tx_extension.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/

Mit Namespaces (TYPO3 >= 6.x) 

# Zentral für alle Plugins
config.tx_extbase.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/

# Nur für ein bestimmtes Plugin
plugin.tx_extension.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPath = EXT:pfad/zum/Ordner/der/Templates/

Wichtig: Bei den Templates ist es wichtig auf die richtige Ordnerstruktur zu achten! Hierzu kann man sich die Originalstruktur unter typo3_src-x.x.x/typo3/sysext/fluid/Resources/Private/Templates/ViewHelpers anschauen.

Count - Objekte zählen[Bearbeiten]

<f:count subject="{myObjects}" />

oder in Inline Notation: 

{myObjects->f:count()}

Weitere Beispiele[Bearbeiten]

Quellen:

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


Unix Timestamps als Datum anzeigen[Bearbeiten]

<f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>

Text auf eine gewisse Länge abschneiden[Bearbeiten]

append wird dem abgekürztem Text am Ende eingefügt, wie z.B. ein Leerzeichen und drei Punkte um zu symbolisieren, dass der Text abgekürzt wurde. 

<f:format.corp maxCharacters="50" append="  ...">Hier folgt der TEXT</f:format.corp>

Kommentare in Fluid[Bearbeiten]

Comment-View-Helper

Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden. 

<f:comment>
    Das ist ein Comment für den Entwickler, der im Quelltext
    im Gegensatz zum HTML-Comment nicht zu sehen ist
</f:comment>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Fluid_-_Snippets&oldid=24613“