TYPO3 EXT: News system, Key: news - Gridview.

Question

I'm running TYPO3 v. 6.1 FLUID/EXTBASE.

With the extension: News system, Key: news.

On the list.html page that show all the news, I can add UL/LI layout, if I in setup have selected to show 6 news/site.

Is it then possible in the list.html page to tell it that:

LI 1 need style

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(0px, 0px);"

LI 2 need style

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(279px, 0px);"

LI 3 need style

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(558px, 0px);"

... to LI 6, all the li don't have a number, but here I ref. to the 6 news/site i have set in the setup.

so i can make a gridview of 6 news in 2 rows, with 3 columns ?

Answer 1

You could use iteration in the each-viewhelper like

<f:for each="{news}" as="newsItem" iteration="iterator">
    <f:if condition="{iterator.index} == 1">...</f:if>
        <li class="first-item"></li>
    </f:if>
    <f:if condition="{iterator.index} == 2">...</f:if>
        <li class="second-item"></li>
    </f:if>
</f:for>

but you have to add this conditions to all items. else you could use the cycle-viewhelper to define columns like this:

<f:for each="{news}" as="newsItem">
  <f:cycle values="{0: 1, 1: 2, 2: 3}" as="cycle">
    <f:if condition="{cycle} == 1">...</f:if>
        <li class="col-1"></li>
    </f:if>
    <f:if condition="{cycle} == 2">...</f:if>
        <li class="col-2"></li>
    </f:if>
    <f:if condition="{cycle} == 2">...</f:if>
        <li class="col-2"></li>
    </f:if>
  </f:cycle>
</f:for>

here you just have to add conditions to each column. i would add just classes by condition, not the whole li-tag but the code above is nicer to read i think.

<f:for each="{news}" as="newsItem" iteration="iterator">
    <li class="{f:if(condition: "{iterator.index} == 1", then: 'first-class')} {f:if(condition: "{iterator.index} == 2", then: 'second-class')}">

    </li>   
</f:for>

Answer 2

Execution start with 0 so it will be like...

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:if condition="{iterator.index} == 0">...</f:if>
    <li class="first-item"></li>
</f:if>
<f:if condition="{iterator.index} == 1">...</f:if>
    <li class="second-item"></li>
</f:if>
</f:for>