Fluid Syntax: Escaping 

Escaping behavior in inline syntax 

At a certain nesting level, single quotes ' required for the inline syntax need to be escaped with a backslash:

<f:render partial="MyPartial" arguments="{
    myArgument: '{f:format.trim(value: \'{f:format.case(mode: \\\'upper\\\', value: \\\'{myVariable}\\\')}\')}',
}" />
Copied!

While escaping cannot be avoided in all cases, alternatives should always be preferred to improve the readability of templates. Depending on the use cases, there are different approaches to achieve this.

Passing variables to inline ViewHelpers 

If only a variable is passed as a ViewHelper argument, the single quotes ' and curly braces {} can be omitted:

{f:format.case(mode: 'upper', value: myVariable)}
Copied!

Using ViewHelper chaining if possible 

Many ViewHelpers that perform changes on a single value also accept that value as a child value. This allows a much cleaner syntax if you combine multiple ViewHelpers for one value:

{myVariable -> f:format.case(mode: 'upper') -> f:format.trim()}
Copied!

Avoiding syntax collision with JS and CSS 

While it is generally advisable to avoid inline JavaScript and CSS code within Fluid templates, sometimes it may be unavoidable. This can lead to collisions between Fluid's inline or variable syntax and the curly braces {} syntax characters used in JavaScript and CSS.

There are two approaches how these collisions can be avoided:

f:format.json ViewHelper 

If your goal is to create JSON in your template, you can create an object in Fluid and then use the <f:format.json> ViewHelper to generate valid JSON:

<div data-value="{f:format.json(value: {foo: 'bar', bar: 'baz'})}">
Copied!

This can also be used directly in JavaScript code that doesn't use any curly braces itself:

<script>
let data = {f:format.json(value: {foo: 'bar', bar: 'baz'}) -> f:format.raw()};
Copied!

CDATA sections 

New in version Fluid 5.0

CDATA sections can be used to avoid syntax collisions. For Fluid 4 and below, workarounds are documented in older versions of this documentation.

CDATA sections can be used in Fluid templates to partially switch off the Fluid parser and to alter the syntax for variables, expressions and inline ViewHelpers. This makes it possible to mix CSS or JS with certain Fluid features.

The following syntax rules apply to text wrapped with <![CDATA[ ]]> in Fluid templates:

  • ViewHelper tag syntax is ignored: ViewHelper tags will not be interpreted and will just remain as-is.
  • ViewHelper inline syntax, variables and expressions are only interpreted if they are using three curly braces {{{ }}} instead of just one { }.
  • The <![CDATA[ ]]> keyword will be removed. If you want the CDATA to remain in the output, consider using the <f:format.cdata> ViewHelper.

Note that there might still be syntax overlaps if your CSS or JS uses three curly braces that shouldn't be interpreted by Fluid.

Examples:

Avoiding collisions in HTML attribute 
<f:variable name="test" value="bar" />
<![CDATA[
<div
    x-data="{
        test: null,
        init() {
            test = 'foo';
        }
    }"
>
    {{{test}}}
</div>
]]>
Copied!
Avoiding collisions in inline CSS 
<f:variable name="color" value="red" />
<style>
<![CDATA[
    @media (min-width: 1000px) {
        p {
            background-color: {{{color}}};
        }
    }
]]>
</style>
Copied!
Avoiding collisions in inline JS 
<f:variable name="countries" value="{
    0: {key: 'de', name: 'Germany', short: 'DE'},
    1: {key: 'us', name: 'United States of America', short: 'US'},
}" />
<script>
<![CDATA[
    const settings = {
        countries: {{{countries -> f:format.json() -> f:format.raw()}}},
    };
]]>
</script>
Copied!