Fluid - Snippets

Links

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

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

Lokalisierung - Mehrsprachigkeit

<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

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

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

<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

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

Externer Link - f:link.external

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

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

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"/>

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

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

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

<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

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

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

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

<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

<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

Eventuell wäre hier TypoScript vorzuziehen.

CSS und JS Dateien über Fluid

<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

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

4 Spalten mit Modulo

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

Plugin per TypoScript holen und einbinden

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

TypoScript

inhaltSpalteNormal < styles.content.get

HTML

<f:cObject typoscriptObjectPath="inhaltSpalteNormal" />

Texte direkt aus dem TypoScript Objekt holen kombiniert

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

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

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

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

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

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)

# 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

<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="  ...">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.

<f:comment>
    Das ist ein Comment für den Entwickler, der im Quelltext
    im Gegensatz zum HTML-Comment nicht zu sehen ist
</f:comment>