views-view-flexbox.html.twig in Views Flexbox 8

Default theme implementation for views to display rows in a grid.

Available variables:

• attributes: HTML attributes for the wrapping element.
• title: The title of this group of rows.
• view: The view object.
• rows: The rendered view results.
• options: The view plugin style options.
  • row_class_default: A flag indicating whether default classes should be used on rows.
  • col_class_default: A flag indicating whether default classes should be used on columns.
• items: A list of grid items. Each item contains a list of rows or columns. The order in what comes first (row or column) depends on which alignment type is chosen (horizontal or vertical).
  • attributes: HTML attributes for each row or column.
  • content: A list of columns or rows. Each row or column contains:
    • attributes: HTML attributes for each row or column.
    • content: The row or column contents.

See also

template_preprocess_views_view_grid()

File

templates/views-view-flexbox.html.twig

{#
/**
 * @file
 * Default theme implementation for views to display rows in a grid.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapping element.
 * - title: The title of this group of rows.
 * - view: The view object.
 * - rows: The rendered view results.
 * - options: The view plugin style options.
 *   - row_class_default: A flag indicating whether default classes should be
 *     used on rows.
 *   - col_class_default: A flag indicating whether default classes should be
 *     used on columns.
 * - items: A list of grid items. Each item contains a list of rows or columns.
 *   The order in what comes first (row or column) depends on which alignment
 *   type is chosen (horizontal or vertical).
 *   - attributes: HTML attributes for each row or column.
 *   - content: A list of columns or rows. Each row or column contains:
 *     - attributes: HTML attributes for each row or column.
 *     - content: The row or column contents.
 *
 * @see template_preprocess_views_view_grid()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'views-view-flexbox',
    'views-flexbox-direction-' ~ options.direction,
    'views-flexbox-justify-' ~ options.justify,
    'views-flexbox-align-items-' ~ options.align_items,
    'views-flexbox-align-content-' ~ options.align_content,
  ]
%}
{%
  set item_classes = [
    'views-flexbox-item',
  ]
%}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
<div{{ attributes.addClass(classes, options.style ? 'views-flexbox-' ~ options.style ) }}>
    {% for item in items %}
      {% if item.link %}
        <a{{ item.attributes.addClass(item_classes, options.item_class_default ? 'item-' ~ loop.index).setAttribute('href', item.link) }}>
      {% else %}
        <div{{ item.attributes.addClass(item_classes, options.item_class_default ? 'item-' ~ loop.index) }}>
      {% endif %}

          {{- item.content -}}

      {% if item.link %}
        </a>
      {% else %}
        </div>
      {% endif %}
    {% endfor %}
</div>