text-media

// src/components/patterns/text-media/text-media.html.twig

{#
  Helper:
    - checks the image format: landscape or portrait;
    - portrait images should take 4 columns;
    - landscape images should take 5 columns;
#}
{% if media.image %}
  {% set image_type = media.is_portrait ? 'portraitImage' : 'landscapeImage' %}
{% endif %}

<div class="TextMedia u-container u-grid
            {%- if position and rte %} TextMedia--{{ position }}{% endif -%}
            {%- if image_type %} TextMedia--{{ image_type }}{% endif -%}
            {%- if not rte %} TextMedia--mediaOnly{% endif -%}
            {%- if media.image %} TextMedia--mediaImage{% endif -%}
            {%- if media.youtube_id %} TextMedia--mediaVideo{% endif -%}
            {%- if full_width %} TextMedia--fullWidth{% endif -%}
">
  <div class="TextMedia-content">
    {% if headline %}
      <h2 class="TextMedia-headline">{{ headline|german_quotes }}</h2>
    {% endif %}
    {% if media %}
      {% set media = media|merge({class: "TextMedia-media"}) %}
      {% include "@elements/media-template/media-template.html.twig" with media only %}
    {% endif %}
    {% if rte %}
      {% include "@elements/rte/rte.html.twig" with rte only %}
    {% endif %}
  </div>
</div>