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

{#
  Print out images with different imagecache/responsive image size + option to zoom the image with Photoswipe.
  Usage example (*-params are required!):

  {{ include('@drowl_paragraphs_bs/inc/flexible_image.html.twig', {
    *image_field: content.field_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,
    image_link_attributes: { 'class':['card__link'], 'target': '_blank' },
    image_shape: paragraph.field_image_shape.value
  }) }}
#}

{% if image_field.0 %}
  {% set image_field_name = image_field['#field_name'] %}
  {% set image_field_media_id = image_field['#object'].id() %}
  {% set raw_image_width = image_field.0['#item'].getValue().width %}
  {% set raw_image_height = image_field.0['#item'].getValue().height %}
  {% set raw_image_path = image_field.0['#item'].entity.uri.value %}
  {% set raw_image_alt = image_field.0['#item'].getValue().alt %}
  {% set raw_image_title = image_field.0['#item'].getValue().title %}
  {% set raw_image_is_svg = ('.svg' not in raw_image_path) ? false : true %}
  {% set image_link = image_link|default(false) %}
  {% set image_link_attributes = image_link_attributes|default(false) %}
  {% set image_shape = image_shape|default(false) %}
  {% set image_is_zoomable = (image_is_zoomable and raw_image_path and not raw_image_is_svg)|default(false) %}
  {# Caption #}
  {% set caption_text = caption_text|default(raw_image_title) %}
  {% set show_caption = show_caption|default(false) %}
  {% set show_pswp_caption = true %}

  {% if not image_link_attributes and image_link %}
    {% if image_link.0.options.attributes %}
      {% set image_link_attributes = image_link.0.options.attributes %}
    {% else %}
      {# Provide "fallback" link attributes #}
      {% set image_link_attributes = {'class':['image-link']} %}
    {% endif %}
  {% endif %}

  {% if not responsive_image_size %}
    {# Define fallback image style #}
    {% set responsive_image_size = 'page_width_scale' %}
  {% endif %}

  {# Put the rendered image into a variable #}
  {% if raw_image_path %}
    {% set image_rendered %}
      {% if raw_image_is_svg %}
        {# Print SVG as it is - still buggy with imagecache. #}
        {{ drupal_image(raw_image_path, NULL, {alt: raw_image_alt, width: raw_image_width, height: raw_image_height, title: raw_image_title}) }}
      {% else %}
        {{ drupal_field(image_field_name, 'media', image_field_media_id, {type: 'responsive_image', settings: {responsive_image_style: responsive_image_size}})|field_value }}
      {% endif %}
    {% endset %}
  {% endif %}

  {# Output #}
  {% if image_shape %}
    <div class="image-shape image-shape--{{ image_shape|clean_class }}">
  {% endif %}

  {# Hint: Linking an image prevents zooming it so this is an OR. #}
  {% if image_link %}
    {{ link(image_rendered, image_link.0.uri, image_link_attributes) }}
  {% elseif image_is_zoomable %}
    {{ attach_photoswipe() }}
    <a href="{{ raw_image_path|image_style('zoomed_image_lg') }}" class="photoswipe" data-pswp-width="{{ raw_image_width }}" data-pswp-height="{{ raw_image_height }}"{% if show_pswp_caption %} data-overlay-title="{{ caption_text }}"{% endif %} title="{{ raw_image_title }}">
      {{ image_rendered }}
    </a>
  {% else %}
    {{ image_rendered }}
  {% endif %}
  {# Caption #}
  {% if (not image_shape) and caption_text and show_caption %}
    {# Print visible caption #}
    <div class="figure-caption">
      {{ caption_text|raw }}
    </div>
  {% endif %}

  {% if image_shape %}
    </div>
  {% endif %}
{% endif %}