✍️
Dev Patterns
  • Dev Patterns: Introduction
  • Drupal 8
    • Form Alter
      • data-twig-suggestion preprocess
      • Address field #after_build
    • Language
      • Language direction classes
      • Set twig variables for languages
      • Get the language direction (PHP)
    • Routes
      • Alter page title based on route
    • Preprocess Page
      • Preprocess users
      • Check if a node has body content and create a variable
    • Preprocess HTML
      • Check node ids and field values in preprocess_html
      • Add a body class based on route
    • General Theming
      • Preprocess Paragraph
      • Paragraph theme hook for a specific field value
      • Field theme hook suggestion based on the entity string
    • Twig
      • Twig include file
      • Twig loops
      • Loop index
    • Page alter
      • Page title theme hook
      • Page content type theme hook
      • Region alter
    • Users
      • Twig user variables
      • User view mode theme hook
    • Fields
      • Replace field name
      • Count number in a multi-value field array
    • Terminal
      • Query block ids for use with twig tweak
      • Check for available updates in terminal
  • Drupal 7
    • Create View modes programtically
    • Node form alter
    • Element Children
Powered by GitBook
On this page

Was this helpful?

  1. Drupal 8
  2. Twig

Twig loops

This example is in a custom paragraphs template

<nav class="orbit-bullets">
  {# Loop through for the bullets. #}
  {% for key, item in content.field_slides if key|first != '#' %}
    <button {% if loop.first %}class="is-active" {% endif %}data-slide="{{ key }}">
      <span class="show-for-sr">{{ trans }}Slide {{ key + 1 }} details.{{ endtrans }}</span>
    </button>
  {% endfor %}
</nav>

Get multi field values within a loop in a paragraphs template

{% for key, item in content.field_picture_buttons if key|first != '#' %}
  <div class="layout__region layout__region--three-col">
    <div class="picture-button">
      <div class="picture-button__wrap">

        <a class="picture-button__link" href="{{ item.field_button_link.0["#url"] }}">
          <div class="picture-button__media">
            {{ item.field_picture_button_image | field_value }}
          </div>

          <div class="picture-button__title">
            <h3 class="h4">
              {{ item.field_button_link.0["#title"] }}
            </h3>
          </div>
        </a>

      </div>
    </div>
  </div>
{% endfor %}

PreviousTwig include fileNextLoop index

Last updated 5 years ago

Was this helpful?