custom/plugins/ATNTheme/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 order-1 order-md-2{% elseif galleryPosition == "underneath" %} col-12 order-1{% endif %}"
  5.          {% if zoomModal %}data-zoom-modal="true"{% endif %}>
  6.         <div class="product-slider-info">{{ "detail.productInfo"|trans|sw_sanitize }}</div>
  7.         {# option "magnifierOverGallery" shows zoom container over gallery #}
  8.         <div class="base-slider gallery-slider{% if navigationArrows == "outside" %} has-nav-outside{% endif %}{% if navigationDots == "outside" %} has-dots-outside{% endif %}{% if magnifierOverGallery %} js-magnifier-zoom-image-container{% endif %}">
  9.             {% block element_image_gallery_inner_wrapper %}
  10.                 {% if imageCount > 1 %}
  11.                     {% block element_image_gallery_inner_multiple_slides %}
  12.                         {% block element_image_gallery_inner_container %}
  13.                             <div class="gallery-slider-container"
  14.                                  data-gallery-slider-container="true">
  15.                                 {% block element_image_gallery_inner_items %}
  16.                                     {% for image in mediaItems %}
  17.                                         {% block element_image_gallery_inner_item %}
  18.                                             <div class="gallery-slider-item-container">
  19.                                                 <div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container"{% if minHeight and  (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}"{% endif %}>
  20.                                                     {% set attributes = {
  21.                                                         'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  22.                                                         'alt': (image.translated.alt ?: fallbackImageTitle),
  23.                                                         'title': (image.translated.title ?: fallbackImageTitle),
  24.                                                         'data-full-image': image.url
  25.                                                     } %}
  27.                                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  28.                                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  29.                                                     {% endif %}
  31.                                                     {% if isProduct %}
  32.                                                         {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  33.                                                     {% endif %}
  35.                                                     {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  36.                                                         media: image
  37.                                                     } %}
  38.                                                 </div>
  39.                                             </div>
  40.                                         {% endblock %}
  41.                                     {% endfor %}
  42.                                 {% endblock %}
  43.                             </div>
  44.                         {% endblock %}
  46.                         {% block element_image_gallery_inner_controls %}
  47.                             {% if navigationArrows %}
  48.                                 <div class="gallery-slider-controls"
  49.                                      data-gallery-slider-controls="{% if navigationArrows %}true{% else %}false{% endif %}">
  50.                                     {% block element_image_gallery_inner_control_items %}
  51.                                         {% block element_image_gallery_inner_control_prev %}
  52.                                             <button class="base-slider-controls-prev gallery-slider-controls-prev{% if navigationArrows == "outside" %} is-nav-prev-outside{% elseif navigationArrows == "inside" %} is-nav-prev-inside{% endif %}"
  53.                                                     aria-label="{{ 'general.previous'|trans|striptags }}">
  54.                                                 {% block element_image_gallery_inner_control_prev_icon %}
  55.                                                     {% sw_icon 'arrow-head-left' %}
  56.                                                 {% endblock %}
  57.                                             </button>
  58.                                         {% endblock %}
  60.                                         {% block element_image_gallery_inner_control_next %}
  61.                                             <button class="base-slider-controls-next gallery-slider-controls-next{% if navigationArrows == "outside" %} is-nav-next-outside{% elseif navigationArrows == "inside" %} is-nav-next-inside{% endif %}"
  62.                                                     aria-label="{{ 'general.next'|trans|striptags }}">
  63.                                                 {% block element_image_gallery_inner_control_next_icon %}
  64.                                                     {% sw_icon 'arrow-head-right' %}
  65.                                                 {% endblock %}
  66.                                             </button>
  67.                                         {% endblock %}
  68.                                     {% endblock %}
  69.                                 </div>
  70.                             {% endif %}
  71.                         {% endblock %}
  72.                     {% endblock %}
  73.                 {% else %}
  74.                     {% block element_image_gallery_inner_single %}
  75.                         <div class="gallery-slider-single-image is-{{ displayMode }} js-magnifier-container"{% if minHeight %} style="min-height: {{ minHeight }}"{% endif %}>
  76.                             {% if imageCount > 0 %}
  77.                                 {% set attributes = {
  78.                                     'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
  79.                                     'alt': (mediaItems|first.translated.alt ?: fallbackImageTitle),
  80.                                     'title': (mediaItems|first.translated.title ?: fallbackImageTitle),
  81.                                     'data-full-image': mediaItems|first.url
  82.                                 } %}
  84.                                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  85.                                     {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  86.                                 {% endif %}
  88.                                 {% if isProduct %}
  89.                                     {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  90.                                 {% endif %}
  92.                                 {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  93.                                     media: mediaItems|first,
  95.                                 } %}
  96.                             {% else %}
  97.                                 {% sw_icon 'placeholder' style {
  98.                                     'size': 'fluid'
  99.                                 } %}
  100.                             {% endif %}
  101.                         </div>
  102.                     {% endblock %}
  103.                 {% endif %}
  104.             {% endblock %}
  106.             {% block element_image_gallery_slider_dots %}
  107.                 {% if imageCount > 1 and navigationDots %}
  108.                     <div class="base-slider-dots {% if imageCount > maxItemsToShowNav %} hide-dots{% elseif imageCount > maxItemsToShowMobileNav %} hide-dots-mobile{% endif %}">
  109.                         {% block element_image_gallery_slider_dots_buttons %}
  110.                             {% for image in mediaItems %}
  111.                                 {% block element_image_gallery_slider_dots_button %}
  112.                                     <button class="base-slider-dot"
  113.                                             data-nav-dot="{{ loop.index }}"
  114.                                             tabindex="-1"></button>
  115.                                 {% endblock %}
  116.                             {% endfor %}
  117.                         {% endblock %}
  118.                     </div>
  119.                 {% endif %}
  120.             {% endblock %}
  121.         </div>
  122.     </div>
  123. {% endblock %}