web-dev-qa-db-fra.com

Comment incrémenter une variable dans un fichier Twig?

J'utilise un modèle de grille de vue et un views-view-fields--view-machine-name.html.twig fichier modèle pour rendre certaines images au format grille. Je veux attribuer des classes CSS dynamiques à chaque image en cours de rendu, par exemple, à l'aide du balisage suivant.

<div class="profile-pic pic{{id}}">{{ fields.field_picture.content }}</div>

J'ai défini une variable dans Twig avec le code suivant, mais comme il n'y a pas de boucle, elle n'est pas incrémentée.

{% set id = 0 %}

Donc, pour chaque image, j'ai les mêmes classes CSS (profile-pic pic0).

Je veux obtenir ce qui suit.

  • Image 1
    pic-profil pic0
  • Image 2
    pic-profil pic1
  • Image 3
    profil-pic pic2
  • Image 4
    pic-profil pic3

Si j'utilise le code suivant, la même image est rendue à la place des images que j'ai.

{% for field in fields -%}
  <div class="profile-pic pic{{id}}">{{ fields.field_picture.content }}</div>
{%- endfor %}

Comment puis-je augmenter le compteur et rendre toutes les images?

viewstheming8
7
Sugandh Khanna

Comme vous l'avez mentionné, il n'y a pas de boucle, vous ne pouvez donc pas le faire dans le fichier de modèle (vous pourriez le faire, mais cela ne vaut pas la peine).

Au lieu de cela, vous pouvez conserver une variable statique dans une fonction de prétraitement:

function MYTHEME_preprocess_views_view_fields__view_machine_name(&$vars) {
  static $counter = 0;
  $vars['counter'] = $counter++;
}

Et référez-vous-y normalement dans le modèle:

<div class="profile-pic pic{{ counter }}">{{ fields.field_picture.content }}</div>

Vous devrez peut-être l'ajuster, par exemple si la vue est rendue deux fois sur la même page.

2
Clive

Vous n'avez plus besoin d'une autre fonction de prétraitement car vous pouvez facilement le faire en seulement Twig maintenant. Mais vous avez besoin d'un autre modèle. Celui que vous utilisez actuellement passe en boucle tous les champs d'une ligne . Pas seulement votre champ d'image. Mais vous voulez avoir le modèle qui cible exactement ce champ d'image, où vous voulez parcourir tous les éléments de ce champ .content.

À des fins de démonstration, je vais laisser cela intact pour l'instant et vous montrer uniquement comment incrémenter des variables dans une boucle for dans Twig:

{% set id = 0 %}

{% for field in fields -%}
  <div class="profile-pic pic{{ id }}">{{ fields.field_picture.content }}</div>
  {% set id = id + 1 %}
{%- endfor %}

Vous pourriez également vouloir jeter un œil à la variable de boucle où {{ loop.index }} ou {{ loop.index0 }} vous donne simplement l'itération actuelle d'une boucle. Deux lignes supplémentaires enregistrées.

{% for field in fields -%}
  <div class="profile-pic pic{{ loop.index0 }}">{{ fields.field_picture.content }}</div>
{%- endfor %}

Et enfin et surtout ce petit bijou: tranche - pour afficher un sous-ensemble d'articles. Disons que les cinq premiers.

{% for field in fields|slice(0, 5) -%}
  <div class="profile-pic pic{{ loop.index0 }}">{{ fields.field_picture.content }}</div>
{%- endfor %}
2
leymannx