gridstack-box.html.twig in GridStack 8

Default theme implementation for the individual GridStack box/item template.

Available variables:

• attributes: An array of attributes to apply to the element.
• item.box: A renderable array of the main image/background, or empty if CSS background image is preferred.
• item.caption: A renderable array containing caption fields if provided:
  • title: The individual box title.
  • link: The box links or buttons.
  • data: any possible field for more complex data if crazy enough.
• settings: An array containing the given settings.

See also

template_preprocess_gridstack_box()

1 theme call to gridstack-box.html.twig

template_preprocess_gridstack in templates/gridstack.theme.inc

Prepares variables for gridstack.html.twig templates.

File

templates/gridstack-box.html.twig

{#
/**
 * @file
 * Default theme implementation for the individual GridStack box/item template.
 *
 * Available variables:
 * - attributes: An array of attributes to apply to the element.
 * - item.box: A renderable array of the main image/background, or empty if
 *   CSS background image is preferred.
 * - item.caption: A renderable array containing caption fields if provided:
 *   - title: The individual box title.
 *   - link: The box links or buttons.
 *   - data: any possible field for more complex data if crazy enough.
 * - settings: An array containing the given settings.
 *
 * @see template_preprocess_gridstack_box()
 */
#}
{%
  set classes = [
    'gridstack__box',
    'box',
    'box--' ~ (delta + 1),
    settings.nested_id ? 'box--' ~ settings.nested_id,
    settings.layout ? 'box--caption--' ~ settings.layout|clean_class,
    settings.class ? settings.class,
    settings.background ? 'box--background',
    settings.type ? 'box--' ~ settings.type|clean_class,
    item.box is empty ? 'box--empty',
    settings.attributes.class ? settings.attributes.class|join(' '),
    not settings.use_framework ? 'grid-stack-item',
  ]
%}
{%
  set content_classes = [
    'box__content',
  ]
%}
<{{ wrapper }}{{ attributes.addClass(classes) }}>
  {% if not settings.use_framework %}<div{{ content_attributes.addClass(content_classes) }}>{% endif %}

  {{ item.box }}

  {% if item.caption %}
    <div class="box__caption">

      {% if item.caption.title %}
        <h2 class="box__title">{{ item.caption.title }}</h2>
      {% endif %}

      {% if item.caption.data or item.caption.alt %}
        <div class="box__description">
          {{ item.caption.data }}
          {{ item.caption.alt }}
        </div>
      {% endif %}

      {% if item.caption.link %}
        <div class="box__link">{{ item.caption.link }}</div>
      {% endif %}

    </div>
  {% endif %}

  {% if not settings.use_framework %}</div>{% endif %}
</{{ wrapper }}>