formatter-suite-field-list.html.twig in Formatter Suite 8

Override field template to support customized lists of fields.

This template is used by the Formatter Suite's field list formatters for numbers, entity references, etc. In each case, the formatter offers settings to select the type of list to create and whether to include separators (such as commas).

This template is loosely based upon the "field.html.twig" template in the Drupal core "classy" theme. That template is, in turn, based upon the Drupal core theme within the system module. The core theme does not add "field__*" classes, while the classy theme does. Most other core and third-party themes extend the classy theme in order to retain the "field__*" classes.

Available variables from Drupal core's FormatterBase:

• attributes: HTML attributes for the containing element.
• label_hidden: Whether to show the field label or not.
• title_attributes: HTML attributes for the title.
• label: The label for the field.
• multiple: TRUE if a field can contain multiple items.
• items: List of all the field items. Each item contains:
  • attributes: List of HTML attributes for each item.
  • content: The field item's content.
• entity_type: The entity type to which the field belongs.
• field_name: The name of the field.
• field_type: The type of the field.
• label_display: The display settings for the label.

Available variables added by Formatter Suite's list formatters:

• list_style: The type of list to create. One of: ul, ol, div, or span.
• list_separator: The separator string to append to each item, except the last.

See also

template_preprocess_field()

File

templates/formatter-suite-field-list.html.twig

{#
/**
 * @file
 * Override field template to support customized lists of fields.
 *
 * This template is used by the Formatter Suite's field list
 * formatters for numbers, entity references, etc. In each case,
 * the formatter offers settings to select the type of list to
 * create and whether to include separators (such as commas).
 *
 * This template is loosely based upon the "field.html.twig"
 * template in the Drupal core "classy" theme. That template is,
 * in turn, based upon the Drupal core theme within the system
 * module. The core theme does not add "field__*" classes, while
 * the classy theme does. Most other core and third-party themes
 * extend the classy theme in order to retain the "field__*"
 * classes.
 *
 * Available variables from Drupal core's FormatterBase:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * Available variables added by Formatter Suite's list formatters:
 * - list_style: The type of list to create. One of: ul, ol, div, or span.
 * - list_separator: The separator string to append to each item,
 *   except the last.
 *
 * @see template_preprocess_field()
 *
 * @ingroup formatter_suite
 */
#}

{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% set itemsLength = items|length %}
{% set itemsIndex = 1 %}
<div{{ attributes.addClass(classes) }}>
  {% if label_hidden == false %}
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
  {% endif %}
  {% if list_style == 'ul' %}
    <ul class="field__items">
    {% for item in items %}
      <li{{ item.attributes.addClass(classes, 'field__item') }}>
      {{ item.content }}
      </li>
      {% set itemsIndex = itemsIndex + 1 %}
    {% endfor %}
    </ul>
  {% elseif list_style == 'ol' %}
    <ol class="field__items">
    {% for item in items %}
      <li{{ item.attributes.addClass(classes, 'field__item') }}>
      {{ item.content }}
      </li>
      {% set itemsIndex = itemsIndex + 1 %}
    {% endfor %}
    </ol>
  {% elseif list_style == 'div' %}
    <div class="field__items">
    {% for item in items %}
      <div{{ item.attributes.addClass(classes, 'field__item') }}>
      {{ item.content }}
      </div>
      {% set itemsIndex = itemsIndex + 1 %}
    {% endfor %}
    </div>
  {% elseif multiple == true %}
    <div class="field__items">
      {% for item in items %}
        <span{{ item.attributes.addClass(classes, 'field__item') }}>
        {% if itemsIndex == itemsLength %}
          {{ item.content }}
        {% else %}
          {{ item.content }}{{ list_separator }}
        {% endif %}
        </span>
        {% set itemsIndex = itemsIndex + 1 %}
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ item.attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}
</div>

Related topics

Formatter Suite

@file Implements the principal entry points and hooks for the module.