How to get field values in node template in Twig

Question

I have an image field named Gallery. You can add multiple images in this field. It’s in a content type named Gallery with Captions.

I have a twig template named field--node--field-gallery--gallery-with-captions.html.twig. Within that, I have the following, so that I can use the title and alt fields as content:

{% for item in items %}
<div{{ item.attributes }}> {{ item.content }} <h2>{{ item.content['#item'].title }}</h2> <p>{{ item.content['#item'].alt }}</p></div>
{% endfor %}

This all works great! Except when I want to use a different Display for this where it’s related to another entity type. There are two template hints I can use there:

node--gallery-with-captions--teaser-complementary.html.twig

field--node--field-gallery--gallery-with-captions.html.twig

I don’t want to use the latter, because I've already configured that for the full gallery/node page and in this case a) I only want to output the first image as a thumbnail to link to the gallery and b) I don’t want the title or alt. The node template has the right display type, but I’m struggling with digging into a) the first image in the gallery and b) the fields I want.

Any suggestions on zeroing in on the first image in this field displaying it as just the image linked to the entry? The template debug suggestions aren't suggesting a field template by display type, which is where this would ideally reside.

Answer 1

A teaser image linked to the content is the standard configuration for the teaser view mode. You only need to limit it to one image. This is a feature request for core, see this issue https://www.drupal.org/node/1234624. Until then you can use this sandbox project: https://www.drupal.org/node/1234624#comment-11868691.

If you want to do this in a node twig you can get the first field item with the delta 0:

{{ content.field_image.0 }}

and then remove the field from the main content to avoid double content:

{{ content|without('field_image') }}