custom/static-plugins/NdTheme/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_alignment %}
  4.     {% set navigationArrows = false %}
  5.     {% set zoom = false %}
  6.     {% set magnifierOverGallery = false %}
  7.     {% set gallerySliderOptions = {
  8.         "dots": true,
  9.         "mobileFirst": true,
  10.         "arrows": false,
  11.         "responsive": [
  12.             {
  13.                 "breakpoint": 1023,
  14.                 "settings": "unslick"
  15.             }
  16.         ]
  17.     } %}
  18.     {% if navigationArrows %}
  19.         {% set gallerySliderOptions = gallerySliderOptions|replace_recursive({
  20.             "arrows": true,
  21.             "prevArrow": "#prev-slide-"~element.id,
  22.             "nextArrow": "#next-slide-"~element.id,
  23.         }) %}
  24.     {% endif %}
  28.     {% block element_image_gallery_inner %}
  29.         <div class="row gallery-slider-row{% if imageCount == 1 %} is-single-image{% else %} is-loading{% endif %} js-gallery-zoom-modal-container lg:grid lg:grid-cols-[48px_1fr] lg:grid-gap-2"
  30.                 {% if zoom %}
  31.                     data-magnifier="true"
  32.                 {% endif %}
  33.                 {% if magnifierOptions|length > 0 %}
  34.                     data-magnifier-options='{{ magnifierOptions|json_encode|raw }}'
  35.                 {% endif %}
  36.                 {% if imageCount > 1 %}
  37.             data-gallery-slider-options='{{ gallerySliderOptions|json_encode }}'
  38.             data-custom-slider="true"
  39.                 {% endif %}>
  41.             {% block element_image_gallery_inner_col %}
  42.                 <div class="gallery-slider-col lg:order-last{% if galleryPosition == "left" %} is-left{% elseif galleryPosition == "underneath" %} is-underneath{% endif %}"
  43.                      {% if zoomModal %}data-zoom-modal="true"{% endif %}>
  44.                     {# option "magnifierOverGallery" shows zoom container over gallery #}
  45.                     <div class="gallery-slider relative {% if navigationArrows == "outside" %} has-nav-outside{% endif %}{% if navigationDots == "outside" %} has-dots-outside{% endif %}{% if magnifierOverGallery %} js-magnifier-zoom-image-container{% endif %}">
  46.                         {% block element_image_gallery_inner_wrapper %}
  47.                             {% if imageCount > 1 %}
  48.                                 {% block element_image_gallery_inner_multiple_slides %}
  49.                                     {% block element_image_gallery_inner_container %}
  50.                                         <div class="custom-slider slick-init pb-4 hide-scrollbar lg:pb-0 lg:flex-col lg:grid-gap-2 lg:!overflow-y-scroll lg:h-[46vw] 2xl:h-[40vw] lg:max-h-[760px]"
  51.                                              data-slick='{{ gallerySliderOptions|json_encode }}'
  52.                                              data-slider-container="true">
  53.                                             {% for image in mediaItems %}
  54.                                                 {% block element_image_gallery_inner_item %}
  55.                                                     <div class="custom-slide js-magnifier-container ratio ratio_product_image"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}
  56.                                                          data-slide="{{ loop.index }}">
  57.                                                         {% set attributes = {
  58.                                                             'class': 'gallery-slider-image js-magnifier-image cursor-zoom-in',
  59.                                                             'alt': (image.translated.alt ?: fallbackImageTitle),
  60.                                                             'title': (image.translated.title ?: fallbackImageTitle),
  61.                                                             'data-full-image': image.url
  62.                                                         } %}
  64.                                                         {% if displayMode == 'cover' or displayMode == 'contain' %}
  65.                                                             {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  66.                                                         {% endif %}
  68.                                                         {% if isProduct %}
  69.                                                             {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  70.                                                         {% endif %}
  72.                                                         {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  73.                                                             media: image
  74.                                                         } %}
  75.                                                     </div>
  76.                                                 {% endblock %}
  77.                                             {% endfor %}
  78.                                         </div>
  79.                                     {% endblock %}
  81.                                     {% block element_image_gallery_inner_controls %}
  82.                                         {% if navigationArrows %}
  83.                                             <div class="gallery-slider-controls-container hidden absolute bottom-3 right-3 lg:block">
  84.                                                 <div class="flex grid-gap-2 justify-end">
  85.                                                     <button id="prev-slide-{{ element.id }}"
  86.                                                             class="products-back flex p-1 transition duration-300 active:-translate-x-0.5 hover:-translate-x-0.5">
  87.                                                         {% sw_icon 'arrow-head-left' %}
  88.                                                     </button>
  89.                                                     <button id="next-slide-{{ element.id }}"
  90.                                                             class="products-next flex p-1 transition duration-300 active:translate-x-0.5 hover:translate-x-0.5">
  91.                                                         {% sw_icon 'arrow-head-right' %}
  92.                                                     </button>
  93.                                                 </div>
  94.                                             </div>
  95.                                         {% endif %}
  96.                                     {% endblock %}
  97.                                 {% endblock %}
  98.                             {% else %}
  99.                                 {% block element_image_gallery_inner_single %}
  100.                                     <div class="gallery-slider-single-image js-magnifier-container ratio ratio_product_image"{% if minHeight %} style="min-height: {{ minHeight }}"{% endif %}>
  101.                                         {% if imageCount > 0 %}
  102.                                             {% set attributes = {
  103.                                                 'class': 'gallery-slider-image magnifier-image js-magnifier-image cursor-zoom-in',
  104.                                                 'alt': (mediaItems|first.translated.alt ?: fallbackImageTitle),
  105.                                                 'title': (mediaItems|first.translated.title ?: fallbackImageTitle),
  106.                                                 'data-full-image': mediaItems|first.url
  107.                                             } %}
  109.                                             {% if displayMode == 'cover' or displayMode == 'contain' %}
  110.                                                 {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  111.                                             {% endif %}
  113.                                             {% if isProduct %}
  114.                                                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  115.                                             {% endif %}
  117.                                             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  118.                                                 media: mediaItems|first,
  119.                                             } %}
  120.                                         {% else %}
  121.                                             {% sw_icon 'placeholder' style {
  122.                                                 'size': 'fluid'
  123.                                             } %}
  124.                                         {% endif %}
  125.                                     </div>
  126.                                 {% endblock %}
  127.                             {% endif %}
  128.                         {% endblock %}
  129.                     </div>
  130.                 </div>
  131.             {% endblock %}
  133.             {% block element_image_gallery_inner_thumbnails_col %}
  134.                 {% if imageCount > 1 %}
  135.                     <div class="custom-thumbnail-control-container hidden lg:block lg:order-first {% if galleryPosition == "left" %} is-left{% elseif galleryPosition == "underneath" %} is-underneath{% endif %}">
  136.                         {% block element_image_gallery_inner_thumbnails %}
  137.                             <div class="custom-thumbnail-control {% if galleryPosition == "underneath" %} is-underneath{% endif %} lg:grid lg:grid-gap-2"
  138.                                  data-slider-thumbnails="true" data-active-thumbnail-classes="active !border-grey-900">
  139.                                 {% block element_image_gallery_inner_thumbnails_items %}
  140.                                     {% for image in mediaItems %}
  141.                                         {% block element_image_gallery_inner_thumbnails_item %}
  142.                                             <div class="thumbnails-item">
  143.                                                 {% block element_image_gallery_inner_thumbnails_item_inner %}
  144.                                                     <div class="thumbnails-item-inner w-12 ratio ratio_product_image">
  145.                                                         {% set attributes = {
  146.                                                             'class': 'gallery-slider-thumbnails-image rounded-sm transition cursor-pointer border border-transparent ' ~ ((loop.first) ? '!border-grey-900' : ' border-transparent'),
  147.                                                             'alt': (image.translated.alt ?: fallbackImageTitle),
  148.                                                             'title': (image.translated.title ?: fallbackImageTitle)
  149.                                                         } %}
  151.                                                         {% if isProduct %}
  152.                                                             {% set attributes = attributes|merge({ 'itemprop': 'image', 'data-thumbnail': loop.index}) %}
  153.                                                         {% endif %}
  155.                                                         {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  156.                                                             media: image,
  157.                                                             sizes: {
  158.                                                                 'default': '200px'
  159.                                                             }
  160.                                                         } %}
  161.                                                     </div>
  162.                                                 {% endblock %}
  163.                                             </div>
  164.                                         {% endblock %}
  165.                                     {% endfor %}
  166.                                 {% endblock %}
  167.                             </div>
  168.                         {% endblock %}
  169.                     </div>
  170.                 {% else %}
  171.                     <div class="placeholder for-slider-thumbnails"></div>
  172.                 {% endif %}
  173.             {% endblock %}
  175.             {% block element_image_gallery_inner_zoom_modal_wrapper %}
  176.                 {% if zoomModal %}
  177.                     <div class="zoom-modal-wrapper">
  178.                         {% sw_include '@Storefront/storefront/component/product/image-gallery/zoom-modal.html.twig' %}
  179.                     </div>
  180.                 {% endif %}
  181.             {% endblock %}
  182.         </div>
  183.     {% endblock %}
  184. {% endblock %}