Drupal twig look up to access field data

This guide has been compiled as a reference tool on how to access field values for different field types.

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

I have used field_name as a placeholder machine name for each field. Replace it with your field’s machine name. You can find the machine name of fields in the Manage Fields of your content type.

Body

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

Content (display) - This will display whatever is set up in Manage Display. If the body field is set to Summary or Trimmed, this will show that.

{{ content.body.0 }}

Content (value, formatted): {{ node.body.value|raw }} This shows the content of the text field itself, regardless of what is set in Manage Display. This will parse any HTML. Note: it is my understanding that the Twig filter raw can present security problems, but I haven’t found another way to do this. More on the Twig raw filter.

Content (value, unparsed HTML) - Show the very raw value of the field, including unparsed HTML.

{{ node.body.0.value }}

Content (value, plain text) - As above, but will remove HTML, as if it were plain text.

{{ node.body.0.value|striptags }}

However if you want to leave some tags in the HTML, you can add this data afterwards.  For example, if you wanted to leave '<br><p>', then the command reference would be 

{{ node.body.0.value|striptags('<br><p>') }}

Summary:

{{ node.body.summary }}

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

Content (display):

{{ content.field_name.0 }}

Content (key):

{{ node.field_name.0.value }}

Conversion filters

boolean

{{ 0|boolean }} {# returns false #}
{{ 28|boolean }} {# returns true #}
{{ 0.0|boolean }} {# returns false #}
{{ 2.8|boolean }} {# returns true #}

date

{{ '2006-Apr-30'|date_from_format('Y-M-j', 'd/m/y') }}
{# returns '30/04/06' #}
{{ '2008-08-08 00:00:00'|date_from_format('Y-m-d H:i:s', 'c', 'America/New_York', 'UTC') }}
{# returns '2008-08-08T04:00:00+00:00' #}

float

{{ 14|float }} {# returns 14 #}
{{ 1.4|float }} {# returns 1.4 #}
{{ 0.84|float }} {# returns 0.84 #}
{{ 88000000.00|float }} {# returns 88000000 #}
{{ 32.0000000|float }} {# returns 32 #}
{{ -19.0000000|float }} {# returns -19 #}
{{ +55.0000000|float }} {# returns 55 #}
{{ 41.00000001|float }} {# returns 41.00000001 #}

integer

{{ 18|integer }} {# returns 18 #}
{{ 8.4|integer }} {# returns 8 #}
{{ '33'|integer }} {# returns 33 #}
{{ '+11'|integer }} {# returns 11 #}
{{ '-27'|integer }} {# returns -27 #}

string

{{ 15|string }} {# returns '15' #}
{{ 6.8|string }} {# returns '6.8' #}
{{ '82'|string }} {# returns '82' #}
{{ '+96'|string }} {# returns '+96' #}
{{ '-98'|string }} {# returns '-98' #}

Email, Phone, Date

Content (display):

{{ content.field_name.0 }}

Content (value): This shows the plain text email.

{{ node.field_name.0.value }}

Formatting the date field:

{{ content.field_name.0.value|date("j M Y") }}

Also, note it is worthwhile validating that data exists before executing the date filter.  Otherwise, you will receive an error - white screen.  Something similar to 

{% if fields.field_date.content|render|striptags|trim is not empty %}
    {{ fields.field_date.value|date("d M Y") }}
{% endif %}

File

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

Content (file path):

{{ file_url(content.field_name['#items'].entity.uri.value) }}

Description:

{{ node.field_name.description }}

Image

Content (display — the image):

{{ content.field_name.0 }}

Content (image path):

{{ file_url(content.field_name['#items'].entity.uri.value) }}

{{ content.field_paragraph_image['#items'].entity.field_media_image.entity.uri.value }}

Alt text:

{{ node.field_name.alt }}

{{ content.field_paragraph_image[0]['#media'].field_media_image.alt }}

Title text:

{{ node.field_name.title }}

{{ content.field_paragraph_image[0]['#media'].field_media_image.title }}

Height/Width:

{{ node.field_name.height }} or {{ node.field_name.width }}

Image styles

Using image styles to create an URL for your Twig file

{{ hero_uri|image_style('hero_image') }}

Such as

<div class="hero-container container-fluid gx-0" style="background-image:url('{{ hero_uri|image_style('hero_image') }}')">

Using image style to generate the image

{{ drupal_image(hero_uri, 'hero_image', {alt: hero_title, title: hero_title}) }}

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.

Content (display): If the Display is set to Key, it will show the key. If it’s set to Label, it will show a label

{{ content.field_name.0 }}

Content (label):

{{ content.field_name['#title']|upper }}

Content (key):

{{ node.field_name.0.value }}

These will show the first item in the field. For multi-value fields, you can show a different item by changing the 0 to another number. Remember to start counting at 0; the second item would be 1.

Link

Content (display):

{{ content.field_name }}

If it’s a multi-value field, the above example will output all of them, exactly as configured in the Manage display. To pull just one value in this way, add an index like this: {{ content.field_name.0 }}

Link only:

{{ content.field_name.0.url }}

Link text only:

{{ content.field_name.0.title }}{{ content.field_name.0.title }}

These will show the first item in the field. For multi-value fields, you can show a different item by changing the 0 to another number. Remember to start counting at 0; the second item would be 1.

Number

Number (decimal) and Number (float)

Content (display):

{{ content.field_name.0 }}

Content (value):

{{ node.field_name.0.value }}

This would remove any prefix/suffix.

Path

Creating a path in twig when you know the entity node nid or taxonomy tid value:

Node alias path:

{% set alias = path('entity.node.canonical', {'node': tid}) %}

Taxonomy term path:

{% set alias = path('entity.taxonomy_term.canonical', {'taxonomy_term': tid}) %}

Seeing this in action.  In the scenario below, presenting a node, that has a taxonomy reference field category

{% for category in node.field_category %}
  {% set tid = category.entity.tid.value %}
  {% set term = category.entity.name.value %}
  {% set alias = path('entity.taxonomy_term.canonical', {'taxonomy_term': tid}) %}
  <a href="{{ alias }}" hreflang="en">{{ term }}</a>
  {{ loop.last ? "" : ", " }}
{% endfor %}

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

Content (value):

{{content.field_name.0 }}

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

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

{{ content.field_name.0 }}

Content (value, formatted):

{{ node.field_name.0.value|raw }}

Content (value, unparsed): Show the very raw value of the field, including unparsed HTML.

{{ node.field_name.0.value }}

Content (value, plain text):

{{ node.field_name.0.value|striptags }}

{{ node.field_name.0.value|striptags('<br><p>') }}

Summary:

{{ node.field_name.summary }}

Displaying the label of the field:

{{ node.field_name.fieldDefinition.label|upper }}

Content title label:

{{ content.field_name['#title']|upper }}

Taxonomy/Entity Reference

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

Content (display):

{{ content.field_name.0 }}

Content (value): This shows the tag id, which is a number

{{ node.field_name.0.target_id }}

Content (term title):

{{ content.field_name[0]['#title'] }}

Content (term path):

{{ content.field_name[0]['#url'] }}

What about when you have the taxonomy term ID, and you want to access the name?

You can use:

drupal_field('name', 'taxonomy_term', tid)

How?  First, get the term id value.

{% set tid = rows[key].content['#row']._entity.field_data_custodian[0].target_id %}

Check that the value is valid, otherwise you will get an error screen

{% if tid is not empty %}

  {% set term = drupal_field('name', 'taxonomy_term', tid) %}

  {{ term }}

{% endif %}

Label for any field type

{{ node.field_name.fieldDefinition.label }}

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.

Here, {{ item }} displays the full field content as configured in the Manage Display. Here is how it works for a <ul>.

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