Attention

TYPO3 v11 has reached end-of-life as of October 31th 2024 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.

Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v11 here: TYPO3 ELTS.

Fluid syntax

Variables

Assign a variable in PHP:

$this->view->assign('title', 'An example title');

Output it in a Fluid template:

<h1>{title}</h1>

The result:

<h1>An example title</h1>

In the template's HTML code, wrap the variable name into curly braces to output it:

Arrays and objects

Assign an array in PHP:

$this->view->assign('data', ['Low', 'High']);

Use the dot . to access array keys:

EXT:site_package/Resources/Private/Templates/SomeTemplate.html

<p>{data.0}, {data.1}</p>

This also works for object properties:

EXT:site_package/Classes/Controller/SomeController.php

$this->view->assign('product', $myProduct);

Use it like this:

EXT:site_package/Resources/Private/Templates/SomeTemplate.html

<p>{product.name}: {product.price}</p>

Accessing dynamic keys/properties

It is possible to access array or object values by a dynamic index:

EXT:site_package/Resources/Private/Templates/SomeTemplate.html

{myArray.{myIndex}}

ViewHelpers

ViewHelpers are special tags in the template which provide more complex functionality such as loops or generating links.

The functionality of the ViewHelper is implemented in PHP, every ViewHelper has its own PHP class.

See the Fluid Viewhelper Reference for a complete list of all available ViewHelpers.

Within Fluid, the ViewHelper is used as a special HTML element with a namespace prefix, for example the namespace prefix "f" is used for ViewHelpers from the Fluid namespace:

Fluid example with for ViewHelper

<f:for each="{results}" as="result">
   <li>{result.title}</li>
</f:for>

The "f" namespace is already defined, but can be explicitly specified to improve IDE autocompletion.

Fluid example with custom ViewHelper "custom" in namespace "blog":

EXT:blog_example/Resources/Private/Templates/SomeTemplate.html

<blog:custom argument1="something"/>

Here, we are using a custom ViewHelper within the namespace "blog". The namespace must be registered explicitly, see the next section.

Import ViewHelper namespaces

There are 3 ways to import ViewHelper namespaces in TYPO3. In all three examples blog is the namespace available within the Fluid template and MyVendor\BlogExample\ViewHelpers is the PHP namespace to import into Fluid.

Use an <html> tag with xmlns

EXT:blog_example/Resources/Private/Templates/SomeTemplate.html
```
<html
   xmlns:blog="http://typo3.org/ns/Myvendor/MyExtension/ViewHelpers"
   data-namespace-typo3-fluid="true"
>

</html>
```
Copied!
This is useful for various IDEs and HTML auto-completion. The <html> element itself will not be rendered if the attribute data-namespace-typo3-fluid="true" is specified.

The namespace is built using the fixed http://typo3.org/ns prefix followed by the vendor name, package name and the fixed ViewHelpers suffix.

Important

Do not use https://typo3.org (HTTPS instead of HTTP). Fluid would not be able to detect this namespace to convert it to PHP class name prefixes. Remember: This is a unique XML namespace, it does not need to contain a valid URI.
Local namespace import via curly braces {}-syntax

EXT:blog_example/Resources/Private/Templates/SomeTemplate.html
```
{namespace blog=MyVendor\BlogExample\ViewHelpers}
```
Copied!
Each of the rows will result in a blank line. Multiple import statements can go into a single or multiple lines.
Global namespace import

Fluid allows to register global namespaces. This is already done for typo3/cms-fluid and typo3fluid/fluid ViewHelpers. Therefore they are always available via the f namespace.

Custom ViewHelpers, for example for a site package, can be registered the same way. Namespaces are registered within $GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces'] , for example:

EXT:blog_example/ext_localconf.php
```
$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['blog'] = [
    'MyVendor\BlogExample\ViewHelpers',
];
```
Copied!

Viewhelper attributes

Simple

Variables can be inserted into ViewHelper attributes by putting them in curly braces:

EXT:site_package/Resources/Private/Templates/SomeTemplate.html

Now it is: <f:format.date format="{format}">{date}</f:format.date>

Fluid inline notation

Tip

There is an online converter from tag-based syntax to inline syntax: Fluid Converter

An alternative to the tag based notation used above is inline notation. For example, compare the 2 identical Fluid constructs:

EXT:my_extensions/Resources/Private/Templates/Something.html

<!-- tag based notation -->
<f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:bookmark_inactive"/>

<!-- inline notation -->
{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:bookmark_inactive')}

Tag based notation and inline notation can be freely mixed within one Fluid template.

Inline notation is often a better choice if HTML tags are nested, for example:

EXT:my_extensions/Resources/Private/Templates/Something.html

<!-- tag based notation -->
<span title="<f:translate key='LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:bookmark_inactive'/>">

<-- inline notation -->
<span title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:bookmark_inactive')}">

More complex example with chaining:

EXT:my_extensions/Resources/Private/Templates/Something.html

<!-- tag based notation -->
<f:format.padding padLength="40"><f:format.date format="Y-m-d">{post.date}</f:format.date></f:format.padding>

<!-- inline notation -->
{post.date -> f:format.date(format: 'Y-m-d') -> f:format.padding(padLength: 40)}

Boolean conditions

Boolean conditions are expressions that evaluate to true or false.

Boolean conditions can be used as ViewHelper arguments, whenever the datatype boolean is given, e.g. in the if ViewHelper condition argument.

The expression can be a variable which is evaluated as follows:
- number: evaluates to true, if > 0.
- array: evaluates to true if it contains at least one element
The expression can be a statement consisting of: term1 operator term2, for example {variable} > 3
- The operator can be one of >, >=, <, <=, ==, ===, !=, !== or %,
The previous expressions can be combined with || (or) or && (and).

Examples:

<f:if condition="{myObject}">
  ...
</f:if>

<f:if condition="{myNumber} > 3 || {otherNumber} || {somethingelse}">
   <f:then>
      ...
   </f:then>
   <f:else>
      ...
   </f:else>
</f:if>

<my:custom showLabel="{myString} === 'something'">
  ...
</my:custom>

Example using the inline notation:

<div class="{f:if(condition: blog.posts, then: 'blogPostsAvailable', else: 'noPosts')}">
   ...
</div>

Comments

As the Fluid syntax is basically XML, you can use CDATA tags to comment out parts of your template:

EXT:my_extension/Resources/Private/Templates/SomeTemplate.html

<![CDATA[
This will be ignored by the Fluid parser
]]>

If you want to hide the contents from the browser, you can additionally encapsulate the part in HTML comments:

EXT:my_extension/Resources/Private/Templates/SomeTemplate.html

<!--<![CDATA[
This will be ignored by the Fluid parser and by the browser
]]>-->

Note: This way the content will still be transferred to the browser! If you want to completely skip parts of your template, you can make use of the f:comment view helper. To disable parsing you best combine it with CDATA tags:

EXT:my_extension/Resources/Private/Templates/SomeTemplate.html

<f:comment><![CDATA[
This will be ignored by the Fluid parser and won't appear in the source code of the rendered template
]]></f:comment>