TYPO3，DCE扩展和流体：如何重置f：cycle循环？

Question

Setup

I am using DCE to create a slider / gallery module, where f:cycle loops trough 20 items. Each item renders an image in a different size. After 20, the count should start over again at 1. Using VHS I'm also cutting blocks of 5 images, per slide panel.

I tried to solve the problem by using f:cycle in following code:

<f:cycle values="{0: '1', 1: '2', 2: '3', 3: '4', 4: '5', 5: '6', 6: '7', 7: '8', 8: '9', 9: '10', 10: '11', 11: '12', 12: '13', 13: '14', 14: '15', 15: '16', 16: '17', 17: '18', 18: '19', 19: '20'}" as="i">

Problem

My problem starts when I have a gallery with less then 20 items, and create a second DCE instance on the same page. Instead of f:cycle starting fresh, like everything else in the template. It continues the cycle where another instance left off.

For example:

DCE 1 has 10 items, the second DCE starts counting at 11, instead of 1.

Because images are being cropped in different sizes, this completely breaks the layout. What could I possibly do to reset f:cycle to make it start at 1, or is there a better way to cycle trough 20 items and start over?

Code

Here is a stripped down version of my code, I'm open for suggestions to improving. Using either fluid or VHS is fine.

{namespace dce=ArminVieweg\Dce\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="None" />

<f:section name="main">

    <f:for each="{field.item -> v:iterator.chunk(count: 5)}" as="col" iteration="row">

        <div class="grid-container{row.cycle}">
            <f:for each="{col}" as="item" iteration="count">

                <f:cycle values="{0: '1', 1: '2', 2: '3', 3: '4', 4: '5', 5: '6', 6: '7', 7: '8', 8: '9', 9: '10', 10: '11', 11: '12', 12: '13', 13: '14', 14: '15', 15: '16', 16: '17', 17: '18', 18: '19', 19: '20'}" as="i">
                    <div class="col{count.cycle}">

                        <f:if condition="{i} == 1">
                            ...
                        </f:if>
                        <f:if condition="{i} == 2">
                            ...
                        </f:if>
                        <f:if condition="{i} == 3">
                            ...
                        </f:if>
                        <f:comment>Etcetera.</f:comment>

                    </div>
                </f:cycle>

            </f:for>
        </div>

    </f:for>

</f:section>    

Answer 1

either you use different cycle variables. maybe this kind will do (I doubt it, the continous counter probably will just be in different named variables):

<f:for each="{col}" as="item" iteration="count">
            <f:cycle values="{0: '1', 1: '2', 2: '3', 3: '4', 4: '5', 5: '6', 6: '7', 7: '8', 8: '9', 9: '10', 10: '11', 11: '12', 12: '13', 13: '14', 14: '15', 15: '16', 16: '17', 17: '18', 18: '19', 19: '20'}" as="i_{count.index}">
                <div class="col{count.cycle}">
                    <f:if condition="{i_{count.index}} == 1">
                        ...
                    </f:if>
                    <f:if condition="{i_{count.index}} == 2">
                        ...
                    </f:if>
                    <f:if condition="{i_{count.index}} == 3">
                        ...
                    </f:if>
                    <f:comment>Etcetera.</f:comment>
                </div>
            </f:cycle>
        </f:for>

or you do the calculation (based on your count iterator) by hand (in TYPO3 < 8 you may need a calculation-VH):

<f:for each="{col}" as="item" iteration="count">
    <div class="col{count.cycle}">
        <f:alias map="{modCounter:count.index % 20}">
            <f:if condition="{modCounter} == 1">
                  ...
            </f:if>
            <f:if condition="{modCounter} == 2">
                  ...
            </f:if>
            <f:comment>Etcetera.</f:comment>
        </f:alias>
    </div>
</f:for>

a simple calculation VH:

lib.calc = TEXT
lib.calc {
    current = 1
    prioriCalc = 1
}

usage:

<f:alias map="{modCounter:'{f:cObject(typoscriptObjectPath:\'lib.calc\', data:\'{count.index} % 20\')}'}">


<f:alias map="{modCounter:'{count.index} % 20'->f:cObject(typoscriptObjectPath:'lib.calc')}">

Answer 2

Solution

For anyone looking for a solution, I limited each cycle to the unique uid of the element in which the cycle takes place:

<f:cycle values="{0: '1', 1: '2', 2: '3', 3: '4'}" as="i_{contentObject.uid}">
    <f:if condition="{i_{contentObject.uid}} == 1_{contentObject.uid}">
        ...
    </f:if>
    <f:if condition="{i_{contentObject.uid}} == 2_{contentObject.uid}">
        ...
    </f:if>
    <f:if condition="{i_{contentObject.uid}} == 3_{contentObject.uid}">
        ...
    </f:if> 
    <f:if condition="{i_{contentObject.uid}} == 4_{contentObject.uid}">
        ...
    </f:if> 
</f:cycle>