custom/plugins/theme/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 class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  6.             {% block element_image_gallery_badges %}
  7.                 {% if product is defined and product %}
  8.                     <div class="product-badges">
  9.                         {% block element_image_gallery_badge_soldout %}
  10.                             {% if product.available == false %}
  11.                                 <div class="badge badge-info badge-soldout badge-pdp">
  12.                                     <span>{{"listing.boxLabelSoldout"|trans|sw_sanitize}}</span>
  13.                                 </div>
  14.                             {% endif %}
  15.                         {% endblock %}
  17.                         {% block element_image_gallery_badge_custom %}
  18.                             {% if product.getExtension("doncarneProductBadge") %}
  19.                                 {% set badgeExtension = product.getExtension("doncarneProductBadge").all()|first %}
  20.                                 {% if badgeExtension %}
  21.                                     {% if badgeExtension.media %}
  22.                                         <div class="badge badge-pdp" style="background:{{badgeExtension.colorHexCode}};width:auto;height:auto;">
  23.                                             <img style="height:auto;width:100%;max-width:92px;object-fit:contain;" src="{{badgeExtension.media.url}}" alt="{{badgeExtension.media.alt}}">
  24.                                         </div>
  25.                                     {% else %}
  26.                                         <div class="badge badge-pdp" style="background:{{badgeExtension.colorHexCode}}">
  27.                                             <span>{{ badgeExtension.translated.name }}</span>
  28.                                         </div>
  29.                                     {% endif %}
  30.                                 {% endif %}
  31.                             {% endif %}
  32.                         {% endblock %}
  33.                     </div>
  34.                 {% endif %}
  35.             {% endblock %}
  37.             {% set attributes = {
  38.                 'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  39.                 'alt': (image.translated.alt ?: fallbackImageTitle),
  40.                 'title': (image.translated.title ?: fallbackImageTitle),
  41.                 'data-full-image': image.url
  42.             } %}
  44.             {% if displayMode == 'cover' or displayMode == 'contain' %}
  45.                 {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  46.             {% endif %}
  48.             {% if isProduct %}
  49.                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  50.             {% endif %}
  52.             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  53.                 media: image
  54.             } %}
  55.         </div>
  56.     </div>
  57. {% endblock %}
  59. {% block element_image_gallery_alignment %}
  60.     {% if controllerName == "Product" %}
  61.         {% set zoom = true %}
  62.         {% set zoomModal = true %}
  63.         {% set gutter = 20 %}
  64.         {% set displayMode = 'contain' %}
  65.         {% set navigationArrows = false %}
  66.         {% set navigationDots = "inside" %}
  67.         {% set galleryPosition = "underneath" %}
  68.         {% set maxItemsToShowMobileNav = 15 %}
  70.         {% if config.verticalAlign.value %}
  71.             <div class="cms-element-alignment{% if verticalAlign == " center" %} align-self-center{% elseif verticalAlign == " flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  72.         {% endif %}
  74.         {% set gallerySliderOptions = {
  75.             slider: {
  76.                 navPosition: 'bottom',
  77.                 gutter: 20,
  78.                 controls: false,
  79.                 autoHeight: false,
  80.                 startIndex: 1,
  81.                 nav: true,
  82.                 responsive: {
  83.                     xs: {
  84.                         nav: true
  85.                     },
  86.                     sm: {
  87.                         nav: true
  88.                     },
  89.                     md: {
  90.                         nav: true
  91.                     }
  92.                 }
  93.             },
  94.             thumbnailSlider: {
  95.                 items: 5,
  96.                 slideBy: 1,
  97.                 controls: true,
  98.                 startIndex: 1,
  99.                 gutter: 20,
  100.                 autoHeight: false,
  101.                 enabled: true,
  102.                 lazyload: false,
  103.                 responsive: {
  104.                     xs: {
  105.                         enabled: false,
  106.                     },
  107.                     sm: {
  108.                         enabled: false,
  109.                     },
  110.                     md: {
  111.                         enabled: false,
  112.                     }
  113.                 }
  114.             }
  115.         } %}
  117.         {% block element_image_gallery_inner %}
  118.             {{ parent() }}
  119.         {% endblock %}
  121.         {% if config.verticalAlign.value %}
  122.             </div>
  123.         {% endif %}
  124.     {% else %}
  125.         {{ parent() }}
  126.     {% endif %}
  127. {% endblock %}