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

Question

设置

我正在使用DCE 创建一个滑块/画廊模块，其中f:cycle 循环通过 20 个项目。每个项目都以不同的大小呈现图像。 20 之后，计数应该从 1 重新开始。使用VHS，我还在每个幻灯片面板上切割 5 个图像块。

我尝试在以下代码中使用f:cycle 来解决问题：

<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">

问题

当我有一个少于 20 个项目的画廊并在同一页面上创建第二个 DCE 实例时，我的问题就开始了。而不是 f:cycle 重新开始，就像模板中的其他所有内容一样。它继续另一个实例停止的循环。

例如：

DCE 1 有 10 个项目，第二个 DCE 从 11 开始计数，而不是 1.

因为图像被裁剪成不同的尺寸，这完全破坏了布局。我可以做些什么来重置 f:cycle 以使其从 1 开始，或者有更好的方法来循环 20 个项目并重新开始？

代码

这是我的代码的精简版，我愿意提供改进建议。使用流体或 VHS 都可以。

{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

要么使用不同的循环变量。也许这种会做（我怀疑，连续计数器可能只是在不同的命名变量中）：

<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>

或者您手动进行计算（基于您的 count 迭代器）（在 TYPO3

<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>

一个简单的计算VH：

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

用法：

<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

解决方案

对于任何寻求解决方案的人，我将每个循环限制为循环发生的元素的唯一 uid：

<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>