Getting Drupal 8 Field Values in Twig

  1. Body
  2. Text
  3. List
  4. Link
  5. Image
  6. File
  7. Boolean
  8. Number
  9. Email
  10. Phone
  11. Date
  12. Taxonomy/Entity Reference
  13. Labels for any field type
  14. Multi-value for any field type
  15. Examples
  16. Concepts/Background

Briefly, how to use this guide:

The Manage Display admin UI can change how a field’s label and content are displayed. When I want to show how to output just the Manage Display version of the content, I use the word ‘display’. When I’m talking about the more raw version of the content, I use ‘value’.

01. Body

The default body field on a content type is essentially a Text (formatted, long, with summary) field type.

02. Text

Very similar to Body, but why not just put it here so it’s easier for you to find?

Text (plain) and Text (plain, long)

Content (display): {{ content.field_name }}

Text (formatted), Text (formatted, long), Text (formatted, long, with summary)

Content (display): {{ content.field_name.0 }} Again, this shows whatever is set up in Manage Display, which could be Default or Trimmed.

03. List

List (float), List (integer), List (text)

These are fields with a key and label. The key is what is stored as the value. Remember label here doesn’t mean the field label, but the key’s label.

04. Link

Content (display): {{ content.field_name }}

05. Image

Content (display — the image): {{ content.field_name.0 }}

06. File

Content (display): {{ content.field_name.0 }}

07. Boolean

This works very much like List, but the key works a little differently. For boolean fields, the key are either 0 (not selected) or 1 (selected).

08. Number

Number (decimal) and Number (float)

Content (display): {{ content.field_name.0 }}

09. Email

Content (display): {{ content.field_name.0 }}

10. Phone

Content (display): {{ content.field_name.0 }}

11. Date

Content (display): {{ content.field_name.0 }}

12. Taxonomy/Entity Reference

I haven’t done a lot of digging into this field type, but here’s the Taxonomy term reference, at least.

13. Label for any field type

{{ node.field_name.fieldDefinition.label }}

14. Multi-Value for any field type

When a field allows multiple values, here’s how to print them out in the node template with a lot of control over HTML.

{% if content.field_name[0] %}
<ul>
{% for key, item in content.field_name if key|first != '#' %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endif %}

15. Examples

Example 1: make a ul of List field keys

{% if content.field_name[0] %}
<ul>
{% for key, item in node.field_name if key|first != '#' %}
<li>{{ item.value }}</li>
{% endfor %}
</ul>
{% endif %}
  1. To get the entire field I’d use {{ content.field_name }} so I want to check if there is at least one value with {% if content.field_name[0] %}.
  2. To get a single key I’d use {{ node.field_name.0.value }}, so I’ll use node.field_name as where I pull item from.
{% if content.field_name[0] %}
<ul>
{% for key, item in content.field_name if key|first != '#' %}
<li>{{ item['#title'] }}</li>
{% endfor %}
</ul>
{% endif %}
  1. To get the whole field I’d use {{ content.field_name }}, so I check to see if there is a value with {% content.field_name[0] %}
  2. To get a single tag title I’d use {{ content.field_name[0]['#title'] }}, so I use the first part in the for section: content.field_name.
  3. The 0 represents whichever item in the list, so I can replace that and everything before it with item, and look for ['#title'].

16. Concepts

Pay attention to when content and node are used above. In a node template like node--page.html.twig the content variable is looking at the options chosen in Manage Display for that content type. I love doing as much in the UI as I can, but sometimes we need to get parts of the field before they get changed by those settings.

  1. A user adds information to the form.
  2. This adds lots of little pieces of discrete data to where the node is stored.
  3. Then Drupal 8 and Manage Display combine that data and show it in a nice little preformatted chunk. That’s content, ya’ll.
  4. But! With node or sometimes element['#object'] or other things we can bypass Manage Display and display things more granularly.
A chart demonstration the Wonka Boat Scene journey of something being entered into a node form, how Drupal uses it, and how you can bypass.

More from Journal

There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sarah Carney

Sarah Carney

I’m a front-end developer and web designer and love to code a lot.