custom/plugins/ItmMagb1/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' %}
  2.  {% block element_image_gallery_inner_items %}
  3.      {% for image in mediaItems %}
  5.          {% set continue = true %}
  6.          {% if image.mediaType.name == 'DOCUMENT' %}
  7.              {% set continue = false %}
  8.          {% endif %}
  9.          {% if continue %}
  10.              {% block element_image_gallery_inner_item %}
  11.                  <div class="gallery-slider-item-container">
  12.                      <div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  13.                          {% set attributes = {
  14.                              'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  15.                              'alt': (image.translated.alt ?: fallbackImageTitle),
  16.                              'title': (image.translated.title ?: fallbackImageTitle),
  17.                              'data-full-image': image.url
  18.                          } %}
  20.                          {% if displayMode == 'cover' or displayMode == 'contain' %}
  21.                              {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  22.                          {% endif %}
  24.                          {% if isProduct %}
  25.                              {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  26.                          {% endif %}
  28.                          {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  29.                              media: image
  30.                          } %}
  31.                      </div>
  32.                  </div>
  33.              {% endblock %}
  34.          {% endif %}
  35.      {% endfor %}
  36.  {% endblock %}
  37.  {% block element_image_gallery_slider_dots_buttons %}
  38.      {% for image in mediaItems %}
  39.          {% set continue = true %}
  40.          {% if image.mediaType.name == 'DOCUMENT' %}
  41.              {% set continue = false %}
  42.          {% endif %}
  43.          {% if continue %}
  44.              {% block element_image_gallery_slider_dots_button %}
  45.                  <button class="base-slider-dot"
  46.                          data-nav-dot="{{ loop.index }}"
  47.                          tabindex="-1"></button>
  48.              {% endblock %}
  49.          {% endif %}
  50.      {% endfor %}
  51.  {% endblock %}
  52.  {% block element_image_gallery_inner_thumbnails_items %}
  53.      {% for image in mediaItems %}
  54.          {% set continue = true %}
  55.          {% if image.mediaType.name == 'DOCUMENT' %}
  56.              {% set continue = false %}
  57.          {% endif %}
  58.          {% if continue %}
  59.              {% block element_image_gallery_inner_thumbnails_item %}
  60.                  <div class="gallery-slider-thumbnails-item">
  61.                      {% block element_image_gallery_inner_thumbnails_item_inner %}
  62.                          <div class="gallery-slider-thumbnails-item-inner">
  63.                              {% set attributes = {
  64.                                  'class': 'gallery-slider-thumbnails-image',
  65.                                  'alt': (image.translated.alt ?: fallbackImageTitle),
  66.                                  'title': (image.translated.title ?: fallbackImageTitle)
  67.                              } %}
  69.                              {% if isProduct %}
  70.                                  {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  71.                              {% endif %}
  73.                              {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  74.                                  media: image,
  75.                                  sizes: {
  76.                                      'default': '200px'
  77.                                  }
  78.                              } %}
  79.                          </div>
  80.                      {% endblock %}
  81.                  </div>
  82.              {% endblock %}
  83.          {% endif %}
  84.      {% endfor %}
  85.  {% endblock %}
  86.  {% block element_image_gallery_inner_zoom_modal_slider_items %}
  87.      {% for image in mediaItems %}
  88.          {% set continue = true %}
  89.          {% if image.mediaType.name == 'DOCUMENT' %}
  90.              {% set continue = false %}
  91.          {% endif %}
  92.          {% if continue %}
  93.              {% block element_image_gallery_inner_zoom_modal_slider_item %}
  94.                  <div class="gallery-slider-item">
  95.                      {% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
  96.                          <div class="image-zoom-container"
  97.                               data-image-zoom="true">
  98.                              {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  99.                                  {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  100.                                      media: image,
  101.                                      attributes: {
  102.                                          'class': 'gallery-slider-image js-image-zoom-element js-load-img',
  103.                                          'alt': (image.translated.alt ?: fallbackImageTitle),
  104.                                          'title': (image.translated.title ?: fallbackImageTitle)
  105.                                      },
  106.                                      load: false,
  107.                                      loadOriginalImage: true,
  108.                                      autoColumnSizes: false
  109.                                  } %}
  110.                              {% endblock %}
  111.                          </div>
  112.                      {% endblock %}
  113.                  </div>
  114.              {% endblock %}
  115.          {% endif %}
  116.      {% endfor %}
  117.  {% endblock %}
  118. {% block element_image_gallery_inner_zoom_modal_thumbnails_items %}
  119.     {% for image in mediaItems %}
  120.         {% set continue = true %}
  121.         {% if image.mediaType.name == 'DOCUMENT' %}
  122.             {% set continue = false %}
  123.         {% endif %}
  124.         {% if continue %}
  125.             {% block element_image_gallery_inner_zoom_modal_thumbnails_item %}
  126.                 <div class="gallery-slider-thumbnails-item">
  127.                     {% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner %}
  128.                         <div class="gallery-slider-thumbnails-item-inner">
  129.                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  130.                                 media: image,
  131.                                 sizes: {
  132.                                     'default': '200px'
  133.                                 },
  134.                                 attributes: {
  135.                                     'class': 'gallery-slider-thumbnails-image js-load-img',
  136.                                     'alt': (image.translated.alt ?: fallbackImageTitle),
  137.                                     'title': (image.translated.title ?: fallbackImageTitle)
  138.                                 },
  139.                                 load: false
  140.                             } %}
  141.                         </div>
  142.                     {% endblock %}
  143.                 </div>
  144.             {% endblock %}
  145.         {% endif %}
  146.     {% endfor %}
  147. {% endblock %}
  148. {% block element_image_gallery_inner %}
  149.     {{ parent() }}
  150.     <div class="product-documents">
  151.         {% for image in mediaItems %}
  152.             {% set continue = true %}
  153.             {% if image.mediaType.name == 'DOCUMENT' %}
  154.                 <span class="product-document-parent">
  155.                     <span class="product-document">
  156.                         <a href="{{ image.url }}" target="_blank" class="itm-product-a">
  157.                              {% if image.translated.title == true %}
  158.                                  {{ image.translated.title }}
  159.                              {% endif %}
  160.                             {% if image.translated.title == false %}
  161.                                 Document
  162.                             {% endif %}
  163.                         </a>
  164.                     </span>
  165.                 </span>
  166.             {% endif %}
  167.         {% endfor %}
  168.     </div>
  169. {% endblock %}