Overriding node output

Question

I'm currently creating a website on Drupal 8, even if it's still in RC3.

I've been swimming in the sauerkraut since few days now and I still cannot figure it out how to override node output as I could do in Drupal 7. Because Drupal 8 is not as used as Drupal 7, it's tough to find answers on Google.

So, I'd like to do the following in my twig file(s):

<div class="images">
  <ul>
    <?php if ($field_images) { ?>
    <?php
      $img_url = $field_images[0]['uri'];
      $img_alt = $field_images[0]['alt'];
      $img_title = $field_images[0]['title'];
    ?>
    <li>
      <a data-lightbox="galleryWrapper" href="<?php print image_style_url('lightbox', $img_url); ?>">
        <img src="<?php print image_style_url('album_thumb', $img_url); ?>" alt="<?php echo $img_alt; ?>" title="<?php print $title; ?>" class="media" />
      </a>
    </li>
    <?php } ?>
  </ul>
</div>

I've seen that I could, as in Drupal 7, override a template file with a specific filename, such as: "field--node--field-images--gallery.html.twig".

The thing is that I don't know where to create my variables that will be available for my twig files (MYTHEME.theme?).

I've already tried this in "field--node--field-images--gallery.html.twig":

{% if multiple %}
  <div{{ attributes.addClass(classes, 'field__items') }}>
    {% for item in items %}
      <div{{ item.attributes.addClass('field__item') }}>
        {#  Before was {{ item.content }} instead of the 5 following lines  #}
        {% if item.content.url %}
          <a href="{{ item.content.url }}" class="lightbox" data-lightbox="gallery">{{ item.content.image }}</a>
        {% else %}
          {{ item.content.image }}
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% else %}
  {% for item in items %}
    <div{{ attributes.addClass(classes, 'field__item') }}>
      {#  Before was {{ item.content }} instead of the 5 following lines  #}
      {% if item.content.url %}
        <a href="{{ item.content.url }}" class="lightbox" data-lightbox="gallery">{{ item.content.image }}</a>
      {% else %}
        {{ item.content.image }}
      {% endif %}
    </div>
  {% endfor %}
{% endif %}

I've tried to access to "url" with {{ item.content.url }}, because {{ content }} seems to call "image-formatter.html.twig", which contains the following:

{% if url %}
  <a href="{{ url }}">{{ image }}</a>
{% else %}
  {{ image }}
{% endif %}

As you can imagine, it doesn't work.

And, that's another issue, but I've already tried to dump variables but I got this famous WSOD (White Screen Of Death). So, that's very difficult to know what this $variables contains.

Answer 1

The fields you are looking for are under '#item', for example:

 {{ item.content['#item'].title }}

To set variables for twig put a theme_preprocess_field() function in MYTHEME.theme.

To examine variables use kint (this is in the devel module):

{{ kint() }}
{{ kint(items) }}

Answer 2

(Crosspost with 4k4, slightly different approach and some background info, so still posting)

Yes, preprocess still exists and yes, you can put it in your yourtheme.theme file just like in D7. See template_preprocess_field() in theme.inc for the default logic.

Also see FormatterBase::view() for all the data that is passed to the field template. You can see entity and items in there. Those are basically the raw data.

Accessing them directly in twig is a bit complicated due to the #, You'd need something like {{ elements['#items'].0 }}, you could use preprocess to make that available (note that top-level items is created in the preprocess and something else.

For the url, you should actually be able to access it through content with a similar syntax as above, {{ item.content['#url'] }}.