Fluid - Snippets

Links

http://wiki.typo3.org/Category:De:fluid

http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.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/

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>

Bilder

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

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>

If-Else-Bedingungen in Fluid Templates

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

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>

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>

Anderes

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>

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>

Querverweise auf interne Seiten, externe Adressen, E-Mail-Adressen oder Anchor

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

Conditions

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>

Kommentare

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>

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>