drowl_paragraphs_bs-1.x-dev/templates/inc/drowl_background_image.html.twig

{% block background_image %}
  {% if has_background_media %}
    {% if view_mode == 'preview' %}
      {# Show the chosen options + preview image in the (layout) Paragraph preview #}
      <div class="drowl-background-media__preview">
        <figure class="drowl-background-media__media-wrapper">
          {% if background_media_entity_bundle == 'video' %}
            {# Since we have no video preview image for now add an video icon instead #}
            <i class="drowl-admin-ico drowl-admin-ico-film"></i>
          {% endif %}
        </figure>
        <div class="drowl-background-media__preview-info">
          <strong>{{ 'Background-Media, with options:'|t }}</strong>
          {# @todo: check for classes instead the old vars #}
          {% if background_image_fixed or background_image_parallax or background_image_blurred or background_image_darken or background_image_lighten %}
            <ul>
              {% if background_image_fixed %}
                <li>
                  {{ 'Fixed Background (overscroll)'|t }}
                </li>
              {% endif %}
              {% if background_image_parallax %}
                <li>
                  {{ 'Parallax Effect (slowed down overscrolling)'|t }}
                </li>
              {% endif %}
              {% if background_image_blurred %}
                <li>
                  {{ 'Show blurred'|t }}
                </li>
              {% endif %}
              {% if background_image_lighten %}
                <li>
                  {{ 'Lighten Background'|t }}
                </li>
              {% endif %}
              {% if background_image_darken %}
                <li>
                  {{ 'Darken Background'|t }}
                </li>
              {% endif %}
            </ul>
          {% else %}
            -
          {% endif %}
        </div>
      </div>
    {% else %}
      {# Check if the fixed/parallax bgimage option is set - needs additional markup #}
      {{ attach_library('drowl_base/background-media') }}
      {% if background_image_parallax %}
        {{ attach_library('drowl_base/parallax') }}
      {% endif %}
      {# @todo @TF, "drowl_paragraphs_types" is deprecated, what should we do with this?}
      {# See drowl_paragraphs_types.module file for the according CSS code added to the page head (_drowl_paragraphs_types_preprocess_paragraph__layout_container()) #}
      <div {{ background_media_overlay_attributes.addClass('drowl-background-media__overlay') }}></div>
      <figure {{ background_media_attributes.addClass('drowl-background-media__media-wrapper') }}>
        {% set background_media_entity = content.field_background_media.0['#media'] %}
        {% set background_media_id = background_media_entity.id() %}
        {% if background_media_entity.field_media_video_file %}
          {{ drupal_entity('media', background_media_id, 'viewport_width') }}
        {% elseif background_media_entity.field_media_image %}
          {{ drupal_field('field_media_image', 'media', background_media_id, {type: 'responsive_image', settings: {responsive_image_style: paragraph.field_resp_imagestyle.value.0.target_id|default('page_width_crop')}})|field_value }}
        {% endif %}
        {% if media_field_name and background_media_id %}
        {% endif %}
      </figure>
    {% endif %}
  {% endif %}
{% endblock background_image %}