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 <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扩展程序和流体：如何重设f：cycle循环？

2 个答案: