Print image field with multiple entries from field in twig template

Question

I have a twig template for a custom content type. And it is able to render most fields just fine, but I am unable to print an image field with multiple images.

node--mycontenttype.html.twig contains

{{ 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 and content._field_myheaderimage outputs the title and image just fine. But when I use the for loop

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

I receive an error

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).

When I just use

{{ content.field_gallery_images }}

It's able to output each image, but this does not allow me to wrap each item in divs and add content to each one.

Answer 1

Print the image field in the node template like any other field:

{{ content.field_gallery_images }}

And then use a field twig to loop through multiple field items:

field--field-gallery-images.html.twig

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

Answer 2

On D8 I was able to make a foreach loop on my images in a way to generate a carousel.

<!-- 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>