Useful/Tricky Twig Snippets

field--image.html.twig

/* 
 * Merge attributes onto an image
 *
 * Note: Attributes must have at least one non-null value.
 * If you don't have a value, enter an single-space string (' ').
 */
{% for item in items %}
  {{ item.content|merge({'#item_attributes': {'attribute-name': ['attribute', 'values', 'here']}}) }}
{% endfor %}

field--link.html.twig

/*
 * Merge attributes onto a link
 *
 * Note: Attributes must have at least one non-null value.
 * If you don't have a value, enter an single-space string (' ').
 */
{% for item in items %}
  {{ item.content|merge({'#options': {'attributes': {'class': ['some', 'class', 'here']}}}) }}
{% endfor %}

ternary-and-null-coalescing-operators.html.twig

/* Test & set/print based on true or false */
boolean ? val_if_true : val_if_false

/* Test and set/print only if true */ 
boolean ? val_if_true

/* Test and set/print only if false */
boolean ?: val_if_false

/* Test and set/print value if not undefined/NULL */
testValue ?? fallback

/*
 * Conditional Addition of classes using Ternary/Null-Coalescing Operator
 */
  
{% set classes = [
  is_front ? 'page--front': 'page--internal',
  has_parent ? 'child-item',
  is_teaser ?: 'full-node',
  randomVar ?? fallbackValue
] %}

/*
 * Conditional printing
 */
<div data-view-mode="{{ is_teaser ? "teaser" : "full" }}">
  <p>Lorem ipsum</p>
</div>