====== Fluid Viewhelper ======

===== Allgemeines =====

==== Kurzschreibweise ====
Für ViewHelper gibt es auch eine Kurzschreibweise:
<code html>
<f:format.raw>{mainMenu}</f:format.raw>
{mainMenu -> f:format.raw()}
</code>

----

===== ViewHelper =====

==== <f:variable> ====

Seit TYPO3 8.6 gibt es einen Viewhelper für eigene Variablen. Für frühere Versionen von TYPO3 muss hierzu die Extension [[https://typo3.org/extensions/repository/view/vhs|vhs]] installiert werden.

<code html>
<f:variable name="myvariable">My variable’s content</f:variable>
<f:variable name="myvariable" value="My variable’s content"></f:variable>
{f:variable(name: ’myvariable’, value: ’My variable\’s content’)}
{myoriginalvariable -> f:variable(name: ’mynewvariable’)}

// Mit EXT:vhs
<v:variable.set name="myvariable" value="My variable’s content"/>
<v:variable.set name="columnsize" value="{column.dimensions.width}"/>
{v:variable.set(name: 'columnsize', value: {column.dimensions.width})}
</code>

----


==== <f:cObject> ====
Auf Variablen, die über das TypoScript-Setup zugewiesen wurden, kann über die übliche Notation mit ''{variablenname}'' zugegriffen werden. Darüber hinaus kann etwa mit dem cObject-ViewHelper auch direkt auf TypoScript-Objekte zugegriffen werden, ohne dass diese explizit als Variable zugewiesen werden müssen:
<code html>
<f:cObject typoscriptObjectPath="lib.mainMenu" />
</code>

----

==== <f:format.raw> ====
Mit ''<f:format.raw>'' werden die ausgegebenen Daten unbereinigt ausgegeben. Fluid würde ansonsten Sonderzeichen kodieren. Sinnvoll bei der Ausgabe des Inhalts, z.B. //styles.content.get//

----

==== <f:for> ====
<code html>
<f:for each="{}" as="{}">
  [...]
</f:for>
</code>

----

==== <f:if> ====
<code html>
<f:if condition="{Bedingung}">
  <f:then>
    [...]
  </f:then>
  <f:else>
    [...]
  </f:else>
</f:if>

<!-- Mit String vergleichen (geht nur als Array) -->
<f:if condition="{0:settings.foo} == {0:'bar'}"> 

<!-- Fluid inline -->
{f:if(condition: data.imageborder, then: ' ce-border')}
{f:if(condition:'{column.media.type} == 4', then: ' ce-video')}
</code>

----

==== <f:debug> ====
<code html>
<!-- Eine Bezeichnung im Titel des Debuggers ausgeben.
Auch Variablen sind im Titel auslesbar; im Beispiel: der Dateiname eines Bildes.
So lassen sich bei mehreren Bildern die Debugger leichter zuordnen.
Output:
Bild 'example-image.jpg': [column.dimensions.width]
-->
<f:debug title="Bild '{column.media.properties.name}': [column.dimensions.width]">{column.dimensions.width}</f:debug>
</code>

----

==== <f:translate> ====

<code html>
<f:translate key="LLL:EXT:templates/Resources/Private/Language/locallang.xlf:foo.bar" />

<!-- Fluid inline -->
{f:translate(key: 'foo.bar')}
</code>

Um nicht immer den vollen Pfad zur Sprachdatei angeben zu müssen, kann innerhalb des ''FLUIDTEMPLATE'' cObjects die folgende Konfiguration gesetzt werden. Hierfür muss die Sprachdatei allerdings auch im üblichen Pfad zu finden sein (siehe oben).

<code typoscript>
10 = FLUIDTEMPLATE
10 {
    // Extension-Name hier: 'templates'
    extbase.controllerExtensionName = templates
}
</code>