drowl_paragraphs_bs-1.x-dev/modules/drowl_paragraphs_bs_type_image_text/templates/paragraph--drowl-paragraphs-bs--image-text.html.twig

{% extends "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig" %}

{% block paragraph %}
  {% set attributes = attributes.addClass('clearfix') %}
  {{ parent() }}
{% endblock %}

{% block content %}
  {% if not content.field_image.0 is empty %}
    {% set image_wrapper_classes =
      [
        'image-wrapper',
        'mb-3',
        image_wrapper_attributes.hasClass('float-start') ? 'float-md-start' : 'float-md-end',
        image_wrapper_attributes.hasClass('float-start') ? 'me-md-3' : 'ms-md-3',
        paragraph.field_image_clip_path.value ? 'css-shape-' ~ paragraph.id()
      ]
    %}

  {# Generate CSS Code for the clip-path option #}
  {% if paragraph.field_image_clip_path.value %}
    <style>
      .css-shape-{{ paragraph.id() }}{
        {{ paragraph.field_image_clip_path.value }}
        {{ paragraph.field_image_clip_path.value|replace({"clip-path": "shape-outside"}) }}
      }
    </style>
  {% endif %}

    {# Floated image #}
    {% block image_wrapper %}
      <div{{ image_wrapper_attributes.addClass(image_wrapper_classes) }}>
        {% block image %}
          {{ include('@drowl_paragraphs_bs/inc/flexible_image.html.twig', {
            image_field: content.field_image.0.field_media_image,
            image_is_zoomable: paragraph.field_image_zoomable.value,
            responsive_image_size: paragraph.field_resp_imagestyle.value.0.target_id,
            image_link: paragraph.field_link.value
          }) }}
        {% endblock image %}
      </div>
    {% endblock image_wrapper %}
    {% block text %}
      {# CSS-Shape need the text field without a field wrapper to work #}
      {{ content.field_text|field_value }}
    {% endblock text %}
  {% else %}
    {% block text_only %}
      {{ content.field_text }}
    {% endblock text_only %}
  {% endif %}
{% endblock content %}