ブートストラップカラム用のTwigイメージギャラリーアルゴリズム

Question

こんにちは、私は、幅のアルゴリズムを持つtwigとブートストラップを使ってフォトギャラリーを作成しようとしています。 例： すべてのセクションが太い黒線で分けられていることを希望します。

は、だから私は物事アウトのアロットを試みたが、今では解決にイム近いようだが、そのまだ動作していないが、適切に、これは私のコードの気圧です：

<section> 
     <div class="row row-no-gutter"> 
      {% setcontent miniaanbod = "aanbod" %} 
      {% for items in miniaanbod|reverse %} 

       {% set cols = 3 %} 
       {% set totaal = miniaanbod|length %} 

       {# this is the beginning. #} 
        {% if totaal - cols <=0 %} {# if the total is less than 0 it means it is 1 or 2. so my colwidht would be or 6 or 12 #} 

         {% set colwidth = 12/totaal %} {# expected that totaal is 1 or 2 here #} 

        {% else %} 

         {% set totaal = totaal - cols %} {# expected that if the totaal is 4 it takes of 3 and goes back to the begining with 1. so the first IF statement can catch it. #} 
         {% set colwidth = 12/3 %} {# expected that totaal is 3 here so most likely I can just do 12/3 so I did that #} 

        {% endif %} 

       {#{{ dump(colwidth) }}#} 
       <div class="col-sm-6 col-md-{{ colwidth }}"> 
        <div class="product"> 
         <img src="{{ image(items.gallerij[0].filename, 1620, 880) }}" alt=""> 
         <div class="product__cnt"> 
          <h5 class="uppercase">{{ items.type }}</h5> 
          <ul class="pricing-table"> 
           <li>Prijs : <span class="price">{{ items.prijs }}</span></li> 
          </ul> 
          <span class="link"><a href="/aanbod/{{ items.slug }}">Continue</a></span> 
         </div> 
        </div> 
       </div> 
      {% endfor %} 
     </div> 
    </section> 

が、これは何をするか、それはすべての変更しますピクチャはcol-md-4になりますが、それは3つのアイテムの後に、ifステートメントの先頭に戻る必要があります。しかし私はそれを最初にもう一度得るように思わない。私はまた別のforループをもう1つのforループに入れようとしましたが、すべてのアイテムの後に最初に戻るようにしましたが、一度に1つのアイテムしか持たないので常にcol-md-12を作成します。

Answer 1

さらに2時間試行錯誤してください。私はついにこのソリューションを作りました。

<section> 
     <div class="row row-no-gutter"> 
      {% setcontent miniaanbod = "aanbod" %} 

       {% set teller4 = 0 %} 
       {% set teller6 = 0 %} 

       {% set breedte = 0 %} 
       {% set alles = miniaanbod|length %} 
       {% for item in miniaanbod|reverse %} 
        {% if (alles >= 3) or (teller4 is not divisible by(3)) %} 
         {% set breedte = 4 %} 
         {% set teller4 = teller4 + 1 %} 
         {% set alles = alles - 1 %} 
        {% elseif (alles > 1) or (teller6 is not divisible by(2)) %} 
         {% set breedte = 6 %} 
         {% set teller6 = teller6 + 1 %} 
         {% set alles = alles - 1 %} 
        {% else %} 
         {% set breedte = 12 %} 
         {% set alles = alles - 1 %} 
        {% endif %} 

        <div class="col-sm-6 col-md-{{ breedte }}"> 
         <div class="product"> 
          <img src="{{ image(item.gallerij[0].filename, 1620, 880) }}" alt=""> 
          <div class="product__cnt"> 
           <h5 class="uppercase">{{ item.type }}</h5> 
           <ul class="pricing-table"> 
            <li>Prijs : <span class="price">{{ item.prijs }}</span></li> 
           </ul> 
           <span class="link"><a href="/aanbod/{{ item.slug }}">Continue</a></span> 
          </div> 
         </div> 
        </div> 
       {% endfor %} 
     </div> 
    </section> 

これは完全に動作し、テスト済みです。私はこれが誰かにussefullであることを願っています。後でonn