Getting the first field item in Twig

Question

Why does this work in Twig:

{{ content.field_image.0 }}

but this does not?

{% for item in content.field_gallery|slice(0, 1) %}
<div>{{ item }}</div>
{% endfor %}

Answer 1

At a guess...

field_gallery, and other fields, are render arrays; that means they have extra elements in them for the meta data (so called # properties). slice doesn't know the difference between a render array child element, and a # property, so it just chops the array up the same way it would any other. The first item in the array is probably a # property, hence nothing is being rendered.

The first example works because you're referencing a specific child of the render array by key, which is then rendered immediately.