custom/plugins/HyBuys/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 %}
  4.     {# cms element data and configs #}
  5.     {% if element.fieldConfig is defined and element.data is defined %}
  6.         {% set sliderConfig = element.fieldConfig.elements %}
  8.         {% set mediaItems = [] %}
  9.         {% for item in element.data.sliderItems %}
  10.             {% set mediaItems = mediaItems|merge([item.media]) %}
  11.         {% endfor %}
  13.         {% set zoom = sliderConfig.zoom.value %}
  14.         {% set gutter = sliderConfig.gutter.value %}
  15.         {% set keepAspectRatioOnZoom = sliderConfig.keepAspectRatioOnZoom.value %}
  16.         {% set magnifierOverGallery = sliderConfig.magnifierOverGallery.value %}
  17.         {% set zoomModal = sliderConfig.fullScreen.value %}
  18.         {% set minHeight = sliderConfig.minHeight.value %}
  19.         {% set displayMode = sliderConfig.displayMode.value %}
  20.         {% set navigationArrows = sliderConfig.navigationArrows.value %}
  21.         {% set navigationDots = sliderConfig.navigationDots.value %}
  22.         {% set galleryPosition = sliderConfig.galleryPosition.value %}
  23.         {% set verticalAlign = sliderConfig.verticalAlign.value %}
  24.         {% set zoomImageContainerSelector = sliderConfig.zoomImageContainerSelector.value %}
  25.     {% endif %}
  27.     {% if fallbackImageTitle is not defined %}
  28.         {% set fallbackImageTitle = '' %}
  29.     {% endif %}
  31.     {# @var mediaItems \Shopware\Core\Content\Media\MediaCollection #}
  32.     {% set imageCount = mediaItems|length %}
  34.     {# too many underneath thumbs or slider dots make them hard to see #}
  35.     {% set maxItemsToShowMobileNav = 5 %}
  36.     {% set maxItemsToShowNav = 8 %}
  38.     {% set magnifierOptions = [] %}
  40.     {% if magnifierOverGallery %}
  41.         {% set magnifierOptions = magnifierOptions|merge({
  42.             'magnifierOverGallery': true,
  43.             'cursorType': 'crosshair'
  44.         }) %}
  45.     {% endif %}
  47.     {% if keepAspectRatioOnZoom is defined and keepAspectRatioOnZoom is not null %}
  48.         {% set magnifierOptions = magnifierOptions|merge({
  49.             'keepAspectRatioOnZoom': keepAspectRatioOnZoom
  50.         }) %}
  51.     {% endif %}
  53.     {% if zoomImageContainerSelector %}
  54.         {% set magnifierOptions = magnifierOptions|merge({
  55.             'zoomImageContainerSelector': zoomImageContainerSelector
  56.         }) %}
  57.     {% endif %}
  59.     <div class="big_images">
  61.         {% for image in mediaItems %}
  62.             {% block element_image_gallery_inner_item %}
  63.                 <div class="image_block">
  64.                     {% block element_image_gallery_inner_item_inner %}
  66.                     <a href="{{ image.url }}" data-fancybox="product_images">
  67.                         {% set attributes = {
  68.                             'data-zoom-image': image.url,
  69.                             'alt': (image.translated.alt ?: fallbackImageTitle),
  70.                             'title': (image.translated.title ?: fallbackImageTitle)
  71.                         } %}
  73.                         {% if isProduct %}
  74.                             {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  75.                         {% endif %}
  77.                         {% sw_thumbnails 'gallery-slider-thumbnails-image' with {
  78.                             media: image,
  79.                             sizes: {
  80.                                 'default': '784px'
  81.                             }
  82.                         } %}
  83.                     </a>
  84.                     {% endblock %}
  85.                 </div>
  86.             {% endblock %}
  87.         {% endfor %}
  88.     </div>
  89.     <div class="small_images">
  91.         {% for image in mediaItems %}
  92.             {% block element_image_gallery_inner_thumbnails_item %}
  93.                 <div class="image_block">
  94.                     {% block element_image_gallery_inner_thumbnails_item_inner %}
  96.                             {% set attributes = {
  97.                                 'class': '',
  98.                                 'alt': (image.translated.alt ?: fallbackImageTitle),
  99.                                 'title': (image.translated.title ?: fallbackImageTitle)
  100.                             } %}
  102.                             {% if isProduct %}
  103.                                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  104.                             {% endif %}
  106.                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  107.                                 media: image,
  108.                                 sizes: {
  109.                                     'default': '105px'
  110.                                 }
  111.                             } %}
  113.                     {% endblock %}
  114.                 </div>
  115.             {% endblock %}
  116.         {% endfor %}
  119.     </div>
  122. {% endblock %}