ビューポートサイズに基づいた枝でif/elseを使用する

Question

私はtwigを使用して、反応の少ないウェブサイトを作成し、配列から複数のページに渡って写真を一覧表示します。フロントエンドでは、ブートストラップを使用して、各デバイスのきれいな行に表示するようにリストしています。

<div class="row-fluid"> 
    {% for index, photo in photos %} 
     <div class="col-xs-6 col-sm-4"> 
     {% if (index + 1) % 2 == 0 %} 
     </div> 
      <div class="row-fluid"> 
     {% endif %} 
    {% endfor %}  
    </div> 
</div> 

携帯端末に2つ、大きいデバイスに3つあれば、これをリストにして新しい行を開始します。私の質問はこの行に基づいています。

{% if (index + 1) % 2 == 0 %} 

画面サイズに基づいて、私は、ビューポートの行に多くの製品を表示するための一定の幅であれば、より高い値に2を変更できるようにしたいです。私はこれを行うための解決策を考えることができません。私はAjaxを使って画面のサイズが変更されたときにビューポートの幅を渡すことができることを知っていますが、私はtwig if文を自動的に更新するようにその値を設定する方法を示していません。

ご協力いただければ幸いです。

Answer 1

私は小枝にspecial loop variablesがあることがわかります。しかし、それがうまくいくかどうかはわかりません。試してみることができます：

<div class="row-fluid"> 
    {% for photo in photos %} 
     <div class="col-xs-6 col-sm-4"> 
     {% if (loop.index + 1) % 2 == 0 %} 
      </div> 
      <div class="row-fluid"> 
     {% endif %} 
    {% endfor %}  
     </div> 
</div> 

これはうまく動作しますが、試してみてください！

Answer 2

純粋なTwigでは、@DarkBeeがコメントセクションで説明したように、本当に可能ではありません。

<div class="row-fluid"> 
    {% for photo in photos %} 
     <div class="col-xs-6 col-sm-4"> 
      <!-- YOUR PHOTO GOES HERE --> 
     </div> 
     {% if (loop.index + 1) % 2 == 0 %} 
      <div class="visible-xs"></div> 
     {% endif %} 
    {% endfor %}  
     </div> 
</div> 

とvisible-xs（official docs）を調べることで、それはより多くの何物でもありません：しかし、あなたがTwigで印刷いくつかの偽の要素と、TwigとCSSを組み合わせたならば、それはかなり簡単です

@media (max-width: 767px) { 
    /* ... */ 
    .visible-xs { 
     display: block !important; 
    } 
    /* ... */ 
} 

あなたはこれに似た独自のクラスを作成して、必要に応じて調整することができます。

これが役に立ちます。