TYPO3 FLUID 在循环时分组和限制元素

Question

我正在尝试制作 FLuID 循环，它将显示包含 4 张图片的 block 。我想实现这样的目标:

  <div class="carousel-inner">
    <div class="item active">
      <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://image1.jpg"></div>
      <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://image2.jpg"></div>
      <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://image3.jpg"></div>
      <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://image4.jpg"></div>
    </div>
    <div class="item">
      <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://image5.jpg"></div>
      <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://image6.jpg"></div>
      <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://image7.jpg"></div>
      <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://image8.jpg"></div>
    </div>
  </div>

问题是我是 FLUID 方面的新手，不知道如何制作只有 4 个元素的循环。我的 FLUID 循环看起来像这样:

    <div class="carousel-inner">                            
        <f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
            <f:if condition="{iterator.index} = 4">
            <div class="item{f:if(condition: '{iterator.index} == 0', then: ' active')}">
                <div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
                    <f:render partial="MediaAsset/Detail" section="Detail" arguments="{alt:mediaAsset.alternative,title:mediaAsset.title,mediaAsset:mediaAsset,width:settings.album.thumb.width,height:settings.album.thumb.height,resizeMode:settings.album.thumb.resizeMode}" />
                </div>
            </div>
            </f:if>
        </f:for>
    </div>              

但它显示类似的东西:

    <div class="carousel-inner">
        <div class="item active">
            <div data-target="#carousel" data-slide-to="0" class="thumb">
                <img title="Photo 1" alt="Photo 1" src="fileadmin/_processed_/csm_P1320323_f0d26808a1.jpg" width="800" height="600" />
            </div>
        </div>
        <div class="item">
            <div data-target="#carousel" data-slide-to="1" class="thumb">
                <img title="Photo 2" alt="Photo 2" src="fileadmin/_processed_/csm_P1320326_d00a6dfa33.jpg" width="800" height="600" />
            </div>
        </div>
        ...
        <div class="item">
            <div data-target="#carousel" data-slide-to="n" class="thumb">
                <img title="Photo n" alt="Photo n" src="fileadmin/_processed_/csm_P1234567_f001234567.jpg" width="800" height="600" />
            </div>
        </div>
    </div>

所以每个循环只显示一个(而不是 4 个)图像。有什么建议么？

如有任何帮助，我将不胜感激。

Answer 1

您可以使用迭代器的 isFirst、isLast 和 cycle 属性来实现这一点:

<f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
    <f:if condition="{iterator.isFirst}">
        <div class="item active">
    </f:if>
        <div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
            <f:render partial ... />
        </div>
    <f:if condition="{iterator.cycle} % 4">
        <f:else>
            </div>
            <div class="item">
        </f:else>
    </f:if>
    <f:if condition="{iterator.isLast}">
        </div>
    </f:if>
</f:for>