custom/plugins/sw-asus/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_col %}
  4.     <div class="gallery-slider-col{% if galleryPosition == "left" %} col-12 col-md-10 order-1 order-md-2{% elseif galleryPosition == "underneath" %} col-12 col-md-9{% endif %}"
  5.          {% if zoomModal %}data-zoom-modal="true"{% endif %}>
  6.         {# option "magnifierOverGallery" shows zoom container over gallery #}
  7.         <div class="base-slider gallery-slider{% if navigationArrows == "outside" %} has-nav-outside{% endif %}{% if navigationDots == "outside" %} has-dots-outside{% endif %} js-magnifier-zoom-image-container">
  8.             {% block element_image_gallery_inner_wrapper %}
  9.                 {{ parent() }}
  10.             {% endblock %}
  12.             {% block element_image_gallery_slider_dots %}
  13.                 {{ parent() }}
  14.             {% endblock %}
  15.         </div>
  16.     </div>
  17. {% endblock %}
  19. {# actual gallery image on top of page if products images > 1 #}
  20.  {% block element_image_gallery_inner_items %}
  21.      {% for image in mediaItems %}
  22.          {% if image.translated and image.translated.title != 'eegl' %}
  23.              {% block element_image_gallery_inner_item %}
  24.                  <div class="gallery-slider-item-container">
  25.                      <div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  26.                          {% set attributes = {
  27.                              'class': 'img-fluid gallery-slider-image gallery-slider-image-normal magnifier-image js-magnifier-image',
  28.                              'alt': (image.translated.alt ?: fallbackImageTitle ~ " " ~ loop.index),
  29.                              'title': (image.translated.title ?: fallbackImageTitle ~ " " ~ loop.index),
  30.                              'data-full-image': image.url
  31.                          } %}
  33.                          {% if displayMode == 'cover' or displayMode == 'contain' %}
  34.                              {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  35.                          {% endif %}
  37.                          {% if isProduct %}
  38.                              {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  39.                          {% endif %}
  41.                          {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  42.                              media: image,
  43.                              sizes: {
  44.                                  'xs': '390px',
  45.                                  'sm': '390px',
  46.                                  'md': '60vw',
  47.                                  'lg': '600px',
  48.                                  'xl': '600px'
  49.                              },
  50.                              load: loop.index > 2 ? false : true
  51.                          } %}
  52.                      </div>
  53.                  </div>
  54.              {% endblock %}
  55.          {% endif %}
  56.      {% endfor %}
  57.  {% endblock %}
  60. {# actual gallery image on top of page if single image #}
  61.  {% block element_image_gallery_inner_single %}
  62.      <div class="gallery-slider-single-image is-{{ displayMode }} js-magnifier-container"{% if minHeight %} style="min-height: {{ minHeight }}"{% endif %}>
  63.          {% if imageCount > 0 %}
  64.              {% set attributes = {
  65.                  'class': 'img-fluid gallery-slider-image gallery-slider-image-normal-2 magnifier-image js-magnifier-image',
  66.                  'alt': (mediaItems|first.translated.alt ?: fallbackImageTitle ~ " " ~ loop.index),
  67.                  'title': (mediaItems|first.translated.title ?: fallbackImageTitle ~ " " ~ loop.index),
  68.                  'data-full-image': mediaItems|first.url
  69.              } %}
  71.              {% if displayMode == 'cover' or displayMode == 'contain' %}
  72.                  {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  73.              {% endif %}
  75.              {% if isProduct %}
  76.                  {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  77.              {% endif %}
  79.              {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  80.                  media: mediaItems|first,
  81.                  sizes: {
  82.                      'xs': '390px',
  83.                      'sm': '390px',
  84.                      'md': '60vw',
  85.                      'lg': '800px',
  86.                      'xl': '600px'
  87.                  },
  88.                  load: loop.index > 2 ? false : true
  89.              } %}
  90.          {% else %}
  91.              {% sw_icon 'placeholder' style {
  92.                  'xs': '390px',
  93.                  'sm': '390px',
  94.                  'md': '60vw',
  95.                  'lg': '800px',
  96.                  'xl': '600px'
  97.              } %}
  98.          {% endif %}
  99.      </div>
  100.  {% endblock %}
  102. {# thumbnail Slider #}
  103. {% block element_image_gallery_inner_thumbnails_items %}
  104.     {% for image in mediaItems %}
  105.         {% if image.translated and image.translated.title != 'eegl' %}
  106.             {% block element_image_gallery_inner_thumbnails_item %}
  107.                 <div class="gallery-slider-thumbnails-item">
  108.                     {% block element_image_gallery_inner_thumbnails_item_inner %}
  109.                         <div class="gallery-slider-thumbnails-item-inner">
  110.                             {% set attributes = {
  111.                                 'class': 'gallery-slider-thumbnails-image gallery-slider-thumbnails-image-thumbnail',
  112.                                 'alt': (image.translated.alt ?: fallbackImageTitle ~ " thumbnail " ~ loop.index),
  113.                                 'title': (image.translated.title ?: fallbackImageTitle ~ " thumbnail " ~ loop.index)
  114.                             } %}
  116.                             {% if isProduct %}
  117.                                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  118.                             {% endif %}
  120.                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  121.                                 media: image,
  122.                                 sizes: {
  123.                                     'xs': '1px',
  124.                                     'sm': '60px',
  125.                                     'md': '60px',
  126.                                     'lg': '60px',
  127.                                     'xl': '60px'
  128.                                 },
  129.                                 load: loop.index > 6 ? false : true
  130.                             } %}
  131.                         </div>
  132.                     {% endblock %}
  133.                 </div>
  134.             {% endblock %}
  135.         {% endif %}
  136.     {% endfor %}
  137. {% endblock %}
  139. {# Zoom Modal Item #}
  140. {% block element_image_gallery_inner_zoom_modal_slider_items %}
  141.     {% for image in mediaItems %}
  142.         {% block element_image_gallery_inner_zoom_modal_slider_item %}
  143.             <div class="gallery-slider-item">
  144.                 {% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
  145.                     <div class="image-zoom-container"
  146.                          data-image-zoom="true">
  147.                         {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  148.                             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  149.                                 media: image,
  150.                                 attributes: {
  151.                                     'class': 'gallery-slider-image gallery-slider-image-zoom js-image-zoom-element js-load-img',
  152.                                     'alt': (image.translated.alt ?: fallbackImageTitle ~ " zoom " ~ loop.index),
  153.                                     'title': (image.translated.title ?: fallbackImageTitle ~ " zoom " ~ loop.index)
  154.                                 },
  155.                                 sizes: {
  156.                                     'xs': '390px',
  157.                                     'sm': '390px',
  158.                                     'md': '1200px',
  159.                                     'lg': '1200px',
  160.                                     'xl': '1200px'
  161.                                 },
  162.                                 lazyLoadTrigger: 'gallery-image-clicked'
  163.                             } %}
  164.                         {% endblock %}
  165.                     </div>
  166.                 {% endblock %}
  167.             </div>
  168.         {% endblock %}
  169.     {% endfor %}
  170. {% endblock %}
  172. {# Zoom Modal Thumbnails #}
  173. {% block element_image_gallery_inner_zoom_modal_thumbnails %}
  174.     <div class="gallery-slider-thumbnails"
  175.          data-gallery-slider-thumbnails=true>
  176.         {% block element_image_gallery_inner_zoom_modal_thumbnails_items %}
  177.             {% for image in mediaItems %}
  178.                 {% block element_image_gallery_inner_zoom_modal_thumbnails_item %}
  179.                     <div class="gallery-slider-thumbnails-item">
  180.                         {% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner %}
  181.                             <div class="gallery-slider-thumbnails-item-inner">
  182.                                 {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  183.                                     media: image,
  184.                                     sizes: {
  185.                                         'xs': '1vw',
  186.                                         'sm': '1vw',
  187.                                         'md': '10vw',
  188.                                         'lg': '121px',
  189.                                         'xl': '121px'
  190.                                     },
  191.                                     attributes: {
  192.                                         'class': 'gallery-slider-thumbnails-image gallery-slider-thumbnails-image-zoom-thumbnail js-load-img',
  193.                                         'alt': (image.translated.alt ?: fallbackImageTitle ~ " zoom thumbnail " ~ loop.index),
  194.                                         'title': (image.translated.title ?: fallbackImageTitle ~ " zoom thumbnail " ~ loop.index)
  195.                                     },
  196.                                     load: false
  197.                                 } %}
  198.                             </div>
  199.                         {% endblock %}
  200.                     </div>
  201.                 {% endblock %}
  202.             {% endfor %}
  203.         {% endblock %}
  204.     </div>
  205. {% endblock %}