custom/plugins/GrimmTheme/src/Resources/views/storefront/element/cms-element-image-gallery.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-image-gallery.html.twig' %}
  3. {% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
  4.     {% set zomm_container_style = "" %}
  5.     {% if "youtube" in image.customFields.grimm_media_src %}
  6.         {% set zomm_container_style = "grimm-video" %}
  7.     {% endif %}
  8.     <div class="image-zoom-container {{ zomm_container_style }}"
  9.          data-image-zoom="true">
  10.         {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  11.             {% if "youtube" in image.customFields.grimm_media_src %}
  12.                 <iframe width="450" height="{{ minHeight }}" src="{{ image.customFields.grimm_media_src }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  13.             {% endif %}
  15.             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  16.                 media: image,
  17.                 attributes: {
  18.                     'class': 'gallery-slider-image js-image-zoom-element js-load-img',
  19.                     'alt': (image.translated.alt ?: fallbackImageTitle),
  20.                     'title': (image.translated.title ?: fallbackImageTitle)
  21.                 },
  22.                 load: false
  23.             } %}
  24.         {% endblock %}
  25.     </div>
  26. {% endblock %}
  28. {% block element_image_gallery_inner_item %}
  29.     {% set slider_container_style = "" %}
  30.     {% if "youtube" in image.customFields.grimm_media_src %}
  31.         {% set slider_container_style = "contains-video" %}
  32.     {% endif %}
  33.     <div class="gallery-slider-item-container">
  34.         <div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container {{ slider_container_style }}"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  35.             {% if "youtube" in image.customFields.grimm_media_src %}
  36.                 <iframe width="100%" height="{{ minHeight }}" src="{{ image.customFields.grimm_media_src }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  37.             {% else %}
  39.                 {% set attributes = {
  40.                     'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  41.                     'alt': (image.translated.alt ?: fallbackImageTitle),
  42.                     'title': (image.translated.title ?: fallbackImageTitle),
  43.                     'data-full-image': image.url
  44.                 } %}
  46.                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  47.                     {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  48.                 {% endif %}
  50.                 {% if isProduct %}
  51.                     {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  52.                 {% endif %}
  55.                 {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  56.                     media: image
  57.                 } %}
  59.             {% endif %}
  61.         </div>
  62.     </div>
  63. {% endblock %}
  65. {% block element_image_gallery_inner_zoom_modal_close_icon %}
  66.     <span aria-hidden="true">
  67.        {% sw_icon "schliessen" style {"namespace": "GrimmTheme", "pack": "grimmtheme"} %}
  68.     </span>
  69. {% endblock %}
  71. {% block element_image_gallery_inner_zoom_modal_action_zoom_out_icon %}
  72.     {% sw_icon 'minus' %}
  73. {% endblock %}
  75. {% block element_image_gallery_inner_zoom_modal_action_zoom_in_icon %}
  76.     {% sw_icon 'plus' %}
  77. {% endblock %}