custom/static-plugins/theme-base/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_item %}
  4. <div class="gallery-slider-item-container">
  5.     <div
  6.         class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  7.         {% set attributes = {
  8.             'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  9.             'alt': (image.translated.alt ?: fallbackImageTitle),
  10.             'title': (image.translated.title ?: fallbackImageTitle),
  11.             'data-full-image': image.url
  12.         } %}
  14.         {% if displayMode == 'cover' or displayMode == 'contain' %}
  15.             {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  16.         {% endif %}
  18.         {% if isProduct %}
  19.             {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  20.         {% endif %}
  22.         {% if image.mimetype is same as ("video/mp4") %}
  23.         {% block video_gallery %}
  24.         <div class="videoInGallery">
  25.             <video width="100%" height="100%" controls>
  26.                 <source src="{{ image.url }} " type="{{ image.mimetype }}">
  27.             </video>
  28.         </div>
  29.         {% endblock %}
  30.         {% else %}
  32.             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  33.                 media: image,
  34.                 sizes: {
  35.                     'xs': '225px',
  36.                     'sm': '430px',
  37.                     'md': '430px',
  38.                     'lg': '430px'
  39.                 }
  40.             } %}
  42.         {% endif %}
  43.     </div>
  44. </div>
  45. {% endblock %}
  48.  {% block element_image_gallery_inner_thumbnails_item %}
  49.      <div class="gallery-slider-thumbnails-item">
  50.          {% block element_image_gallery_inner_thumbnails_item_inner %}
  51.              <div class="gallery-slider-thumbnails-item-inner">
  52.                  {% set attributes = {
  53.                      'class': 'gallery-slider-thumbnails-image',
  54.                      'alt': (image.translated.alt ?: fallbackImageTitle),
  55.                      'title': (image.translated.title ?: fallbackImageTitle)
  56.                  } %}
  58.                  {% if isProduct %}
  59.                      {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  60.                  {% endif %}
  63.                  {% if image.mimetype is same as ("video/mp4") %}
  64.                  {% block video_gallery_icon %}
  66.                      <div class="videoIcon"></div>
  67.                  {% endblock %}
  68.                  {% else %}
  71.                  {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  72.                      media: image,
  73.                      sizes: {
  74.                          'default': '200px'
  75.                      }
  76.                  } %}
  78.                  {% endif %}
  80.              </div>
  81.          {% endblock %}
  82.      </div>
  83.  {% endblock %}