グリッド形式でいくつかの画像をレンダリングするために、ビューグリッドテンプレートとviews-view-fields--view-machine-name.html.twig
テンプレートファイルを使用しています。たとえば、次のマークアップを使用して、レンダリングされるすべての画像に動的CSSクラスを割り当てたいです。
<div class="profile-pic pic{{id}}">{{ fields.field_picture.content }}</div>
Twigに次のコードで変数を設定しましたが、ループがないため、インクリメントされません。
{% set id = 0 %}
したがって、すべての画像に同じCSSクラス(profile-pic pic0)があります。
以下を入手したいです。
次のコードを使用すると、私が持っている写真の代わりに同じ想像がレンダリングされます。
{% for field in fields -%}
<div class="profile-pic pic{{id}}">{{ fields.field_picture.content }}</div>
{%- endfor %}
カウンターを増やし、すべての画像をレンダリングするにはどうすればよいですか?
あなたが言ったように、ループはないので、テンプレートファイルではこれを行うことはできません(できますが、努力する価値はありません)。
代わりに、前処理関数で静的変数を維持できます。
function MYTHEME_preprocess_views_view_fields__view_machine_name(&$vars) {
static $counter = 0;
$vars['counter'] = $counter++;
}
そして通常通りテンプレートでそれを参照してください:
<div class="profile-pic pic{{ counter }}">{{ fields.field_picture.content }}</div>
たとえば、ビューが同じページで2回レンダリングされる場合など、これを微調整する必要があるかもしれません。