Twig and Entity Field API or how to take control of node.html.twig

The node template, like any other entity template has two primary variables available.

The first, content contains the render arrays prepared by the field formatters according to the entity view display configuration, visible on the "Manage display" page for the given view mode and node type.

The second, node is the node object, which contains the fields and all their raw values and referenced entities. It is useful to check if a field has values and for conditions based on boolean, list, number and similar fields.

While it is possible to access the raw values through the content variable as well, it is a lot easier to write and read when doing that through node.

Displaying formatted field output

Print a specified field, including the default or overriden field template.

{{ content.field_name }}

Print ony the first field item, without the wrapping field template, useful when the standard div wrappers should not be added.

{{ content.field_name.0 }}

Print all field items, without the wrapping template. useful for e.g. listing them as a comma separated list, without needing a separate field template.

{% for key, item in content.field_name if key|first != '#' %}
  {{ item }}</div>
{% endfor %}

Check field values and display output conditionally

Field values in the node object are always accessed like this: node.name_of_the_field.name_of_the_property.

Different field types and their properties.

Each field type can have different so called properties. Most simple field types (text, numbers, checkbox, lists, and so on) have a value property, that stores the raw, unformatted value. Reference fields that point to some other content (Including file and image fields as well as references to terms, users, ...) have a target_id which is the identifier of the reference as well as the entity property, which is the referenced entity. Check out the Entity Field API cheat sheet for more information.

Only display a field if a checkbox is checked, optionally with custom wrapping HTML

{% if node.field_checkbox.value %}
   <div class="only added when there are values">
  {{ content.field_name }}
  </div>
{% end %}

Display an image field if it has a value, otherwise display another. It is recommended to use the entity for such checks, for rare cases where the reference has been deleted.

{% if node.field_checkbox.entity %}
  {{ content.field_image }}
{% else %}
  {{ content.field_fallback }}
{% end %}

Check a field on a referenced entity, for example you might a highlight checkbox on a term reference that you want to display differently.

{% if node.field_category.entity.field_highlight.value %}
   <div class="highlight">
  {{ content.field_category.0 }}
  </div>
{% else %}
  {{ content.field_category.0 }}
{% end %}