TYPO3 Fluid Template - как обернуть колонки в тег row в процессе цикла

01.02.2017 | Extbase, Разработка | автор: Dmitry Vasilev

При работе с CSS фреймворком bootstrap очень часто возникает необходимость обернуть несколько колонок в один столбец (в тег row) во время работы цикла for each. Т.е. html код должен выглядеть примерно следующим образом.

<div class="container">  
   <div class="row">
      <div class="col-md-3">element content</div>
      <div class="col-md-3">element content</div>
      <div class="col-md-3">element content</div>
      <div class="col-md-3">element content</div>
   </div>
   <div class="row">
      <div class="col-md-3">element content</div>
      <div class="col-md-3">element content</div>
      <div class="col-md-3">element content</div>
   </div>
</div>


Ниже хочу привести решение с использованием стандартного Fluid, без дополнительных ViewHelpers.

<div class="container">
    <div class="row">
    <f:for each="{elements}" as="element" iteration="iterator">
        <div class="col-md-3">
            {element.content}
        </div>
        <f:if condition="{iterator.cycle} % 4">
            <f:then>
            </f:then>
            <f:else>
                <f:if condition="{iterator.isLast}">
                    <f:then>
                    </f:then>
                    <f:else>
                        <!--  close row -->
                        </div>
                        <!-- open new row -->
                        <div class="row">
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:for>
    <!-- close last open row -->
    </div>
</div>


comments powered by HyperComments