custom/plugins/zenitPlatformHorizon/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.     {# TODO: Check again as soon as Shopware solves the bug in the original code itself. #}
  5.     {% if element.fieldConfig is defined and element.data is defined %}
  6.         {% if not config %}
  7.             {% set config = element.fieldConfig.elements %}
  8.         {% endif %}
  9.     {% endif %}
  11.     {{ parent() }}
  12. {% endblock %}
  14. {% block element_image_gallery_alignment %}
  15.     {% set magnifierOptions = magnifierOptions|merge({
  16.         'zoomFactor': theme_config('zen-product-gallery-slider-zoom-factor')?: 3
  17.     }) %}
  19.     {{ parent() }}
  20. {% endblock %}
  22. {% block element_image_gallery_inner_wrapper %}
  23.     {% if config('core.cart.wishlistEnabled') and page.product.id is not empty %}
  24.         {# ... @zenit fallback for older child-themes without this config #}
  25.         {% set productDetailWishlistPosition = theme_config('zen-product-details-wishlist-position') ?: 'default' %}
  26.         {% if productDetailWishlistPosition is same as ('gallery') %}
  27.             {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  28.                 showText: false,
  29.                 size: 'xl',
  30.                 productId: page.product.id,
  31.                 tooltip: true,
  32.                 tooltipPlacement: 'left'
  33.             } %}
  34.         {% endif %}
  35.     {% endif %}
  37.     {{ parent() }}
  38. {% endblock %}
  40. {% block element_image_gallery_slider_dots %}
  41.     {# ... add aria-label #}
  42.     {% if imageCount > 1 and navigationDots %}
  43.         <div class="base-slider-dots {% if imageCount > maxItemsToShowNav %} hide-dots{% elseif imageCount > maxItemsToShowMobileNav %} hide-dots-mobile{% endif %}">
  44.             {% block element_image_gallery_slider_dots_buttons %}
  45.                 {% for image in mediaItems %}
  46.                     {% block element_image_gallery_slider_dots_button %}
  47.                         <button class="base-slider-dot"
  48.                                 aria-label="base-slider-dot-{{ loop.index }}"
  49.                                 data-nav-dot="{{ loop.index }}"
  50.                                 tabindex="-1"></button>
  51.                     {% endblock %}
  52.                 {% endfor %}
  53.             {% endblock %}
  54.         </div>
  55.     {% endif %}
  56. {% endblock %}
  58. {% block element_image_gallery_inner %}
  59.     {# ... add nav to false, otherwise the tns-nav would appear when there are no thumbnails #}
  60.     {% if hideThumbnails is same as (true) %}
  61.         {% set gallerySliderOptions = gallerySliderOptions|replace_recursive({
  62.             slider: {
  63.                 nav: false
  64.             }
  65.         }) %}
  66.     {% endif %}
  68.     {# too many underneath thumbs or slider dots make them hard to see #}
  69.     {% set maxItemsToShowMobileNav = theme_config('zen-max-items-to-show-mobile-nav') ?: 5 %}
  70.     {% set maxItemsToShowNav = theme_config('zen-max-items-to-show-nav') ?: 8 %}
  72.     <div class="row gallery-slider-row{% if imageCount == 1 %} is-single-image{% else %} is-loading{% endif %} js-gallery-zoom-modal-container"
  73.         {% if zoom %}
  74.             data-magnifier="true"
  75.         {% endif %}
  76.         {% if magnifierOptions|length > 0 %}
  77.             data-magnifier-options='{{ magnifierOptions|json_encode|raw }}'
  78.         {% endif %}
  79.         {% if imageCount > 1 %}
  80.             data-gallery-slider="true"
  81.             data-gallery-slider-options='{{ gallerySliderOptions|json_encode }}'
  82.         {% endif %}
  83.         {# ... @zenit add galleryMode #}
  84.         {% if galleryMode is same as ('scroller') and isProduct %}
  85.             data-zen-gallery-scroller="true"
  86.         {% endif %}
  87.         {% if galleryMode is same as ('grid') and isProduct %}
  88.             data-zen-gallery-grid="true"
  89.         {% endif %}>
  91.         {{ block('element_image_gallery_inner_col') }}
  93.         {{ block('element_image_gallery_inner_thumbnails_col') }}
  95.         {{ block('element_image_gallery_inner_zoom_modal_wrapper') }}
  97.     </div>
  98. {% endblock %}
  100. {% block element_image_gallery_inner_item %}
  101.     {# ... add container .gallery-slider-item-wrap #}
  102.     <div class="gallery-slider-item-container">
  103.         <div class="gallery-slider-item-wrap">
  105.             {% if theme_config('zen-product-gallery-fallback-image-title') is not same as ('default') %}
  106.                 {% set fallbackImageTitle = image.fileName %}
  107.             {% endif %}
  109.             <div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  110.                 {% set attributes = {
  111.                     'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  112.                     'alt': (image.translated.alt ?: fallbackImageTitle),
  113.                     'title': (image.translated.title ?: fallbackImageTitle),
  114.                     'data-full-image': image.url
  115.                 } %}
  117.                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  118.                     {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  119.                 {% endif %}
  121.                 {% if isProduct %}
  122.                     {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  123.                 {% endif %}
  125.                 {# ... enables lazy loading for images,
  126.                 but only on cover mode, because of JS height calculation #}
  127.                 {% if displayMode == 'cover' %}
  128.                     {% if config('zenitPlatformHorizon.config.lazyloading') %}
  129.                         {% set attributes = attributes|merge({ 'loading': 'lazy' }) %}
  130.                     {% endif %}
  131.                 {% endif %}
  133.                 {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  134.                     media: image,
  135.                 } %}
  136.             </div>
  137.         </div>
  138.     </div>
  139. {% endblock %}
  141. {% block element_image_gallery_inner_single %}
  142.     <div class="gallery-slider-single-image is-{{ displayMode }}{% if imageCount <= 0 %} is-placeholder{% endif %} js-magnifier-container"{% if minHeight %} style="min-height: {{ imageCount > 0 ? minHeight : '430px' }}"{% endif %}>
  143.         {% if theme_config('zen-product-gallery-fallback-image-title') is not same as ('default') %}
  144.             {% set fallbackImageTitle = mediaItems|first.fileName %}
  145.         {% endif %}
  147.         {% if imageCount > 0 %}
  148.             {% set attributes = {
  149.                 'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  150.                 'alt': (mediaItems|first.translated.alt ?: fallbackImageTitle),
  151.                 'title': (mediaItems|first.translated.title ?: fallbackImageTitle),
  152.                 'data-full-image': mediaItems|first.url
  153.             } %}
  155.             {% if displayMode == 'cover' or displayMode == 'contain' %}
  156.                 {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  157.             {% endif %}
  159.             {% if isProduct %}
  160.                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  161.             {% endif %}
  163.             {# ... enables lazy loading for images #}
  164.             {% if config('zenitPlatformHorizon.config.lazyloading') %}
  165.                 {% set attributes = attributes|merge({ 'loading': 'lazy' }) %}
  166.             {% endif %}
  168.             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  169.                 media: mediaItems|first
  170.             } %}
  171.         {% else %}
  172.             {% sw_icon 'placeholder' style {
  173.                 'size': 'fluid'
  174.             } %}
  175.         {% endif %}
  176.     </div>
  177. {% endblock %}
  179. {% block element_image_gallery_inner_thumbnails_col %}
  180.     {% if hideThumbnails is not same as (true) %}
  181.         {{ parent() }}
  182.     {% endif %}
  183. {% endblock %}
  185. {% block element_image_gallery_inner_thumbnails_item_inner %}
  186.     {% if theme_config('zen-product-gallery-fallback-image-title') is not same as ('default') %}
  187.         {% set fallbackImageTitle = image.fileName %}
  188.     {% endif %}
  190.     {{ parent() }}
  191. {% endblock %}
  193. {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  194.     {% if theme_config('zen-product-gallery-fallback-image-title') is not same as ('default') %}
  195.         {% set fallbackImageTitle = image.fileName %}
  196.     {% endif %}
  198.     {{ parent() }}
  199. {% endblock %}