Freemarker：ブートストラップを使用してグリッドにデータを表示

Question

私はfreemarkerの写真のPATHを持つリストを持っており、HTMLページに写真を表示する必要があります。私はその

<#if photos?has_content> 
    <#list photos as photo> 
     <img src=${photo} 
    </#list> 
</#if> 

のように私のリストを反復処理し、また、私は、行のHTMLグリッドにこの写真を表示するためのブートストラップクラスを使用しているページ（3列）

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <div class="photo"></div> 
     </div> 
     <div class="col-lg-4"> 
      <div class="photo"></div> 
     </div> 
     <div class="col-lg-4"> 
      <div class="photo"></div> 
     </div> 
    </div> 
    <div class="row"> 
     ... 
    </div> 
</div> 

数は、写真の数に依存していそれは予測できませんでした。私は最初と3番目の写真のたびに、行のための開始と終了のdivを追加する方法を知らない。

誰かがこれを手伝ってくれることを願っています。 ありがとう！

Answer 1

あなたは使用することができ、そのため?chunk（http://freemarker.org/docs/ref_builtins_sequence.html#ref_builtin_chunk）：

<div class="container"> 
    <#list photos?chunk(3) as row> 
    <div class="row"> 
     <#list row as photo> 
     <div class="col-lg-4"> 
      <div class="photo"><img src="${photo}"></div> 
     </div>   
     </#list> 
    </div> 
    <#else> 
    <div class="something">No photos</div> 
    </#list> 
</div>