Typo3 Fluid: Add Class to Element if it is First

Question

I'm feeding Contentelments into an Extension using Fluid:

<f:for each="{field.children}" as="myObj" iteration="iterator">
  {myObj.render -> f:format.raw()}
</f:for>

which is working fine.

Elements look something like this:

<div class="childElement">
  <h1>I'm a Caption!</h1>
  <p>I'm some text.....</p>
</div>

The Elements are then displayed in a certain way.

Now I want the first Element to have one extra class called "first". The first Element would then look like this:

<div class="childElement first">
  <h1>I'm a Caption!</h1>
  <p>I'm some text.....</p>
</div>

I tried solving this using an iterator and simply checking if the iterator "isfirst". Something like this:

<f:for each="{field.children}" as="myObj" iteration="iteration">
 <f:if condition="iteration.isFirst">
    <f:then>
     ...

But then I still need to insert the class and it anyways feels like there has to be a better way to solve it.

Can someone maybe point me to the right direction?

Edit(Solution):

The accepted answer worked for me after I did the "<div class="childElement">" -wrapping in the extension rather then in the Child. My solution looks like this now:

<f:for each="{field.children}" as="myObj" iteration="iterator">
  <div class="childElement {f:if(condition:iterator.isFirst, then: ' first')}">
     {childDce.render -> f:format.raw()}
   </div>
</f:for>

<f:if condition="iteration.isFirst"> will not work because you need to use curly braces here: condition=“{….}” — Kocio

The F The F · Accepted Answer · 2017-09-01T13:11:30

You can simply use the inline version of the f:if viewhelper to avoid repeating yourself in an <f:then> -> <f:else> construct:

<f:for each="{field.children}" as="myObj" iteration="iter">
    <div class="childElement{f:if(condition:iter.isFirst, then: ' first')}">

Since you don't have an else case, you can just drop it. Depending on your fluid version, you might need to wrap your condition expression with more curly braces, like so:

<f:for each="{field.children}" as="myObj" iteration="iter">
    <div class="childElement{f:if(condition: '{iter.isFirst}', then: ' first')}">

But that shouldn't be necessary (though it works).

Typo3 Fluid: Add Class to Element if it is First

1 Answers