Even though the usage of this ViewHelper is a little limited, it's one of the ViewHelpers you should know well. If you're familiar with the old fed:if ViewHelper, you'll know what we're talking about.



Variable type
The content of the variable comparison rules. (See the examples.)
Default value

The following comparators are allowed: ==, !=, <, <=, >, >= and %

Only variables of the following types can be compared: numbers, object properties, arrays, strings (since v6.2) and the results of other ViewHelpers.

Complex conditional statements

From TYPO3 8.0 on Fluid supports any degree of complex conditional statements with nesting and grouping:

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">
  // Done if both variable one and two evaluate to true,
  // or if either variable three or four do.

In addition, f:else has been outfitted with an "elseif"-like behavior:

<f:if condition="{variableOne}">
    <f:then>Do this</f:then>
    <f:else if="{variableTwo}">
        Do this instead if variable two evals true
    <f:else if="{variableThree}">
        Or do this if variable three evals true
        Or do this if nothing above is true

Simple examples

<f:alias map="{value1: 1, value5: 5}">
  <f:if condition="{value1}==1">
    <p>The value is 1</p>
  <f:if condition="{value5}==5">
      <p>The value is 5</p>
      <p>The value is NOT 5</p>
  <f:if condition="{value5} % 2">
      <p>The calculation returns a remainder value of 1.</p>
      <p>The calculation did not return a remainder value.</p>
  <f:if condition="{value1}!={value5}">
    <p>value1 is NOT equal to value5</p>
  <f:if condition="{value1}<{value5}">
    <p>value1 is smaller than value5</p>
  <f:if condition="{0:value1,1:value5}=={0:1,1:5}">
    <p>Values in the first array are all the same as the values in the second array.</p>
<f:alias map="{elements: {0: value1, 1: value2}}">
  <f:if condition="{elements -> f:count()}==2">
    <p>Comparing with ViewHelpers: the array contains 2 elements.</p>
<f:alias map="{value1: 'hello'}">
  <f:if condition="{value1} == 'hello'">
    <p>String comparison works since v6.2.</p>
  <f:if condition="{0: value1} == {0: 'hello'}">
    <p>String comparisons only work in array syntax before v6.2.</p>

If there are no f:then or f:else ViewHelpers in use, the content between the f:if ViewHelpers will only be output if the comparison returns a positive result. If you need to use the full if-then-else construct, then you'll have to use the f:then / f:else ViewHelpers.

Inline notation

You can also use the ViewHelper with inline notation.

{f:if(condition: '{numberVar} == 1', then: 'active', else: 'disable')}
{f:if(condition: varName, then: 'varName evaluates to true')}
{f:if(condition: '{varA} && {varB}', then: 'both varA and varB evaluate to true')}
{f:if(condition: '{foo} == \'bar\'', then: 'var foo is equal to string bar')}
{f:if(condition: '{foo} == "bar"', then: 'var foo is equal to string bar')}

For example to output the class attribute of an html element

<span class="product-headline {f:if(condition: isHighlight, then: 'highlight-headline')}">{headline}</span>