TYPO3、DCE 扩展和 Fluid：如何重置 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 has 10 items, the second DCE starts counting at 11, instead of 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 < 8 中您可能需要计算-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>

简单计算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>

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

TYPO3, DCE extension & Fluid: How to reset an f:cycle loop?

typo3

fluid

typo3-8.x