親ギャラリーがtwigループ内にある画像ギャラリーアルゴリズム

Question

twigを使って画像ギャラリーを作成しようとしています。私は前にこれをやった。 Here was my initial question.そして、そのギャラリーは（ほぼ常に）働いています。私が既に作成したのは、Twig for eachループを親divの下に置き、colブートストラップのクラスだけをループすれば、ブートストラップに使用されます。

しかし、私は親のdivをfor eachループの中に入れなければなりません。だから、いくつかのチェックをして、ヘッダーが新しい行に移動したときにのみ表示されるようにして、アイテムが正しい幅を取得するようにしています（ヘッダーにあります）。

これは親クラスで、表示されているように、columns4は子クラスにその幅を与えるタグです。ですから、私が始めたのは、すでに使用されているアルゴリズムを使用することでした。

<div class="sorting_block portfolio_block image-grid columns4 flex_allign" id="list"> 

この時点で私のコード：

<div class="col-sm-12"> 
     {% setcontent sponsor = "sponsor" %} 

     {% set Rest = sponsor|length %} 
     {% set Totaal = sponsor|length %} 
     {% set TellerLayer = 4 %} 
     {% set EndTotaal = 0 %} 

     {% for item in sponsor|reverse %} 

      {% set EndTotaal = EndTotaal + 1 %} 

      {% if (Rest == 4) %} 
      {% if (TellerLayer != 4) %} 
       </div> 
       <div class="spacer-75"></div> 
      {% endif %} 
      <div class="sorting_block portfolio_block image-grid columns4 flex_allign" id="list"> 

      {% elseif (Rest == 3) %} 
      </div> 
      <div class="spacer-75"></div> 
      <div class="sorting_block portfolio_block image-grid columns3 flex_allign" id="list"> 

      {% elseif (Rest == 2) %} 
      </div> 
      <div class="spacer-75"></div> 
      <div class="sorting_block portfolio_block image-grid columns2 flex_allign" id="list"> 

      {% elseif (Rest == 1) %} 
      </div> 
      <div class="spacer-40"></div> 
      <div class="sorting_block portfolio_block image-grid columns1 flex_allign" id="list"> 

      {% endif %} 

     {% set TellerLayer = TellerLayer + 1 %} 
     {% set Rest = Rest - 1 %} 

      <div class="events people places streets element portfolio_item"> 
       <div class="portfolio_item_block"> 
         <div class="portfolio_item_wrapper"> 
          CONTENT HERE  
         </div> 
       </div> 
       {% if (Totaal == EndTotaal) %} 
       </div> 
       {% endif %} 
     {% endfor %} 
</div> 

これは、私は6つのアイテムを持って言うことができますどういう。

• columns4、3つの項目
• columns3、1つの項目
• columns2、1つの項目
• columns1、1つの項目

そして、ここで予想は以下のとおりです。

• columns4、4項目
• columns2
、2つの項目

私は誰もが、それはちょうど今、最後のヘッダが満ちていた前のヘッダーにプッシュしbecouse私はこの中でいくつかのより多くのエラー制御を置くことができる方法上の任意のヒントを持っている願っています。

は、事前に

EDITをありがとう：アイブ氏はそれがinitialisez時に小枝が実質的にPHPに変換されbecouse PHPタグを追加しました。このためPHPソリューションがある場合は、twigでうまくいくかもしれません。

Answer 1

もう少し手を加えて、それを修正しました。私は2つの構文でそれを修正しました。 Joeのコメントありがとうございます。

バージョン1、これは質問に表示される独自の作成された構文に関するものです。 これは、自分のニーズに合わせてカスタマイズすることも非常に簡単です。

<div class="col-sm-12"> 
    {% setcontent sponsor = "sponsor" %} 
     {% set Rest = sponsor|length %} 
     {% set Totaal = sponsor|length %} 
     {% set TellerLayer = 4 %} 
     {% set EndTotaal = 0 %} 

     {% for item in sponsor|reverse %} 
      {% set EndTotaal = EndTotaal + 1 %} 

      {% if (Rest >= 4) and (TellerLayer is divisible by(4)) %} 
        {% if (TellerLayer != 4) %} 
        </div> 
        <div class="spacer-75"></div> 
        {% endif %} 
      <div class="sorting_block portfolio_block image-grid columns4 flex_allign" id="list"> 

      {% elseif (Rest == 3) and (TellerLayer is divisible by(4)) %} 
      </div> 
      <div class="spacer-75"></div> 
      <div class="sorting_block portfolio_block image-grid columns3 flex_allign" id="list"> 

      {% elseif (Rest == 2) and (TellerLayer is divisible by(4)) %} 
      </div> 
      <div class="spacer-75"></div> 
      <div class="sorting_block portfolio_block image-grid columns2 flex_allign" id="list"> 

      {% elseif (Rest == 1) and (TellerLayer is divisible by(4)) %} 
      </div> 
      <div class="spacer-40"></div> 
      <div class="sorting_block portfolio_block image-grid columns1 flex_allign" id="list"> 

      {% endif %} 

     {% set TellerLayer = TellerLayer + 1 %} 
     {% set Rest = Rest - 1 %} 

     <div class="events people places streets element portfolio_item"> 
      CONTENT GOES HERE            
     </div> 
     {% if (Totaal == EndTotaal) %} 
     </div> 
     {% endif %} 
     {% endfor %} 
</div> 

バージョン2は、** Joe *のコメントを使用して作成されました。個人的に私はこれをより整理し、 "正しい構文"を見つけました。しかし、V1は

<div class="col-sm-12"> 
    {% setcontent sponsor = "sponsor" %} 
     {% set Totaal = sponsor|length %} 
     {% set FoutControle1 = 4 %} 
     {% set Variabel = 4 %} 

     {% for row in sponsor|reverse|batch(4) %} 
      <div class="spacer-75"></div> 
      <div class="sorting_block portfolio_block image-grid columns{{ Variabel }} flex_allign" id="list"> 
       {% for item in row %} 
        <div class="events people places streets element portfolio_item">   Content Goes here 
        </div> 
        {% set Totaal = Totaal - 1 %} 
        {% set FoutControle1 = FoutControle1 + 1 %} 
       {% endfor %} 
      </div> 
     {% if Totaal >= 4 %} 
      {% set Variabel = 4 %} 
     {% elseif (Totaal == 3) and (FoutControle1 is divisible by(4)) %} 
      {% set Variabel = 3 %} 
     {% elseif (Totaal == 2) and (FoutControle1 is divisible by(4)) %} 
      {% set Variabel = 2 %} 
     {% elseif (Totaal == 1) and (FoutControle1 is divisible by(4)) %} 
      {% set Variabel = 1 %} 
     {% endif %} 
     {% endfor %} 
</div> 

をカスタマイズする方が簡単です私は、これはこれまでのところ、私はこれは小枝で最初の「作業」可変画像ギャラリー解析である知っているように、他の人に役立ちます願っています。だからこれが助けて欲しい!!:)