Imprimer le champ d'image avec plusieurs entrées du champ dans le modèle de brindille

9

J'ai un modèle de brindille pour un type de contenu personnalisé. Et il est capable de rendre très bien la plupart des champs, mais je ne peux pas imprimer un champ d'image avec plusieurs images.

nœud - mycontenttype.html.twig contient

{{ content.field_mytitle }}
{{ content.field_myheaderimage }}
<div class="row expanded">
    {% for galleryimage in content.field_gallery_images %}
           <div class="gallery-image-item"> {{ galleryimage }} </div>
    {% endfor %}
</div>

content.field_mytitle et content._field_myheaderimage sort très bien le titre et l'image. Mais quand j'utilise la boucle for

    {% for galleryimage in content.field_gallery_images %}
           <div class="gallery-image-item"> {{ galleryimage }} </div>
    {% endfor %}

Je reçois une erreur

Exception: Object of type Drupal\node\Entity\Node cannot be printed. in Drupal\Core\Template\TwigExtension->escapeFilter() (line 443 of core/lib/Drupal/Core/Template/TwigExtension.php).

Quand j'utilise

{{ content.field_gallery_images }}

Il est capable de sortir chaque image, mais cela ne me permet pas d'envelopper chaque élément dans des divs et d'ajouter du contenu à chacune.

Mat
la source
La réponse de @ 4k4 ci-dessous présente de nombreux avantages, mais pour votre raison, le remplacement de: content.field_gallery_images par node.field_gallery_images dans votre brindille 'for' boucle vous aurait donné chaque entité d'image dans la boucle.
RominRonin

Réponses:

9

Imprimez le champ d'image dans le modèle de nœud comme n'importe quel autre champ:

{{ content.field_gallery_images }}

Et puis utilisez une brindille de champ pour parcourir plusieurs éléments de champ:

champ - field-gallery-images.html.twig

<div class="row expanded">
  {% for item in items %}
    <div class="gallery-image-item">{{ item.content }}</div>
  {% endfor %}
</div>
4k4
la source
1

Le D8, j'ai pu faire une boucle foreach sur mes images de manière à générer un carrousel.

<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    {% for i in 0..content.field_accueil_image_slide|length %}
     {%if content.field_accueil_image_slide[i]['#item'].entity.uri.value != "" and content.field_accueil_image_slide[i]['#item'].entity.uri.value is not empty %}
        <div class="item {{ (i == 0) ? 'active' : '' }}" style="">{{ content.field_accueil_image_slide[i]}}</div>
     {%endif%}
    {%endfor%}
  </div>
Pauleau
la source
Énorme aide merci. Pourquoi faire Drupal alors que vous pouvez comprendre le trou du lapin en brindille? : D
cwiggo