TYPO3 FLUID группировка и ограничивающие элементы при циклировании

Question

Я пытаюсь создать цикл FLuID, который будет отображать блок с четырьмя изображениями. Я хотел бы, чтобы добиться чего-то вроде этого:

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

Проблема заключается в том, что я новичок в ЖИДКОСТИ вещи и не знаю, как сделать петлю только с 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_f0.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>