DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Render news items in columns¶

If you need to list news next to each other and need some additional CSS classes, you can use the modulo operator to achieve this. The provided example will wrap 3 items into a div with the class "row".

<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
        <f:if condition="{iterator.isFirst}">
                <div class="row">
        </f:if>

        <f:if condition="{iterator.cycle} % 3">
                <f:then>
                        <div class="col-md-4">
                                <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings, className:className, view:'list'}"/>
                        </div>
                </f:then>

                <f:else>
                        <div class="col-md-4">
                                <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings, className:className, view:'list'}"/>
                        </div>

                        <f:if condition="{iterator.isLast}">
                                <f:then></f:then>
                                <f:else>
                                        </div><div class="row">
                                </f:else>
                        </f:if>
                </f:else>
        </f:if>

        <f:if condition="{iterator.isLast}">
                </div>
        </f:if>
</f:for>

By using the extension "vhs" you can achieve this in far less lines:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{news -> v:iterator.chunk(count: 3)}" as="col" iteration="cycle">
   <div class="row">
      <f:for each="{col}" as="newsItem">
         <div class="col-md-4">
            <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}"/>
         </div>
      </f:for>
   </div>
</f:for>