zurb_foundation_6_paragraphs-1.0.1-beta1/templates/grid/paragraph--foundation-grid.html.twig

{##
 # Twig for the Foundation Grid paragraphs
 # Based on the Zurb Foundation XY Grid (https://get.foundation/sites/docs/xy-grid.html)
 # Based on the Zurb Foundation Flexbox Utilities classes (https://get.foundation/sites/docs/flexbox-utilities.html)
 #}
{%
  set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  'paragraphId-' ~ paragraph.id()
]
%}

{# Get the fields to define the background #}
{% set bgAttributes = create_attribute() %}
{% set bgColor = (content.field_foundation_bg_color[0] is defined) ? content.field_foundation_bg_color[0]['#markup'] : '' %}
{% set bgImage = (content.field_foundation_bg_image[0] is defined) ? content.field_foundation_bg_image[0]['#markup'] : '' %}
{% set bgExp = (content.field_foundation_bg_expanded[0] is defined) ? content.field_foundation_bg_expanded[0]['#markup']|number_format : 0 %}

{# Define the classes for the background #}
{% set bgClasses = [
  'backgroundDiv',
  (bgExp == 1) ? 'expendedBg' : 'internalBg',
  (bgColor != '') ? 'colorBg' : '',
  (bgColor != '') ? 'colorBg-' ~ bgColor : '',
  (bgImage != '') ? 'imageBg' : '',
] %}

{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}

      {% if ((bgColor != '') or (bgImage != '')) and (bgExp == 1) %}
        <div{{ bgAttributes.addClass(bgClasses) }} style="background-image: url('{{ bgImage }}');"></div>
      {% endif %}

      {# If needed, I open the Grid Container wrapper #}
      {% if containerType != 'none' %}
        <div class="grid-container {{ containerType }}">

        {% if ((bgColor != '') or (bgImage != '')) and (bgExp == 0) %}
          <div{{ bgAttributes.addClass(bgClasses) }} style="background-image: url('{{ bgImage }}');"></div>
        {% endif %}

      {% endif %}

      <div class="grid-x {{ gutterType }} {{ gutterCollapse}} {{ vertAlign }} {{ horizAlign }}">
        {{ content.field_foundation_grid_cells }}
      </div>

      {# If needed, I close the Grid Container wrapper #}
      {% if containerType != 'none' %}
        </div>
      {% endif %}

    {% endblock %}
  </div>
{% endblock paragraph %}