Fluid - Snippets

Links

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

Debugging

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

Lokalisierung - Mehrsprachigkeit

<f:translate key="tx_gbbandpass_domain_model_band.name" />

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>

Bedingungen

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/css/bootstrap.css

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>