Is there a way to wrap X items in TYPO3 fluid?

Question

Using the extension DCE elements, I created a fluid template generating a li item for every item created. Now I would like to have every first to second item a wrapper. So that:

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>

Becomes:

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>
<ul>
    <li>item 3</li>
    <li>item 4</li>
</ul>
<ul>
    <li>item 5</li>
</ul>

Is this possible in a fluid template? Perhaps in combination with Typoscript?

Answer 1

Solution

This is what I ended up with using {cycle} to iterate trough every 2 items, and then closing and opening the tag. As well as making sure the last item does not end with an opening tag:

<ul>
    <f:for each="{field.item}" as="item" iteration="iterator">

        <f:if condition="{iterator.cycle} % 2">
            <f:then>
                <li>item {iterator.cycle}</li>
            </f:then>
            <f:else>
                <li>item {iterator.cycle}</li>
                <f:if condition="{iterator.isLast} != 1">
                    <f:then>
                        </ul><ul>
                    </f:then>
                </f:if>
            </f:else>
        </f:if>

    </f:for>
</ul>

Note

I understand that with the power of VHS v:iterator.chunk would probably solve this with a little less code, but I could not get it to work how I wanted to. If anyone would be willing to provide a working example to compare the 2 options I would be grateful.

With VHS

Update: 21.12.2017

So revisited the chunk option, and the same code is achieved with the following snippet using VHS iterator.chunk:

<f:for each="{field.item -> v:iterator.chunk(count: 2)}" as="col" iteration="cycle">
    <ul>
        <f:for each="{col}" as="item">
            <li>
                test
            </li>
        </f:for>
    </ul>
</f:for>                

Perhaps this helps someone out there!