custom/plugins/MDR_Theme/src/Resources/views/storefront/element/cms-element-image-gallery.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@parent/storefront/element/cms-element-image-gallery.html.twig' %}
  3. {% block element_image_gallery_inner %}
  4.     <div class="row gallery-slider-row{% if imageCount == 1 %} is-single-image{% endif %} js-gallery-zoom-modal-container"
  5.             {% if zoom %}
  6.                 data-magnifier="true"
  7.             {% endif %}
  8.             {% if magnifierOptions|length > 0 %}
  9.                 data-magnifier-options='{{ magnifierOptions|json_encode|raw }}'
  10.             {% endif %}
  11.             {% if imageCount > 1 %}
  12.         data-gallery-slider="true"
  13.         data-gallery-slider-options='{
  14.                                 "slider": {
  15.                                     "navPosition": "bottom",
  16.                                     "speed": 500,
  17.                                     "gutter": {% if gutter %} {{ gutter }} {% else %} 0 {% endif %},
  18.                                     "controls": {% if navigationArrows %}true{% else %}false{% endif %},
  19.                                     "autoHeight": {% if displayMode == "standard" %}true{% else %}false{% endif %}
  20.                                     {% if startIndexThumbnails %}
  21.                                     ,"startIndex": {{ startIndexThumbnails }}
  22.                                     {% endif %}
  23.                                 },
  24.                                 "thumbnailSlider": {
  25.                                     {% if galleryPosition == "underneath" %}
  26. {#                                    "autoWidth": true,#}
  27. {#                                    "controls": false,#}
  28.                                     {% endif %}
  29.                                     {% if startIndexThumbnails %}
  30.                                     "startIndex": {{ startIndexThumbnails }},
  31.                                     {% endif %}
  32.                                     "items": 4,
  33.                                     "loop" : true,
  34.                                     "responsive": {
  35.                                         "xs": {
  36.                                             "enabled": false,
  37.                                             "controls": false
  38.                                         },
  39.                                         "sm": {
  40.                                             "enabled": false,
  41.                                             "controls": false
  42.                                         }{% if galleryPosition == "left" %},
  43.                                         "md": {
  44.                                             "axis": "vertical"
  45.                                         },
  46.                                         "lg": {
  47.                                             "axis": "vertical"
  48.                                         },
  49.                                         "xl": {
  50.                                             "axis": "vertical"
  51.                                         }{% else %},
  52.                                         "md": {
  53.                                             "axis": "horizontal",
  54.                                             "items" : 3
  55.                                         },
  56.                                         "lg": {
  57.                                             "axis": "horizontal"
  58.                                         },
  59.                                         "xl": {
  60.                                             "axis": "horizontal",
  61.                                             "items": 4
  62.                                         }{% endif %}
  63.                                     }
  64.                                 }
  65.                             }'
  66.             {% endif %}>
  68.         {% block element_image_gallery_inner_col %}
  69.             {{ parent() }}
  70.         {% endblock %}
  72.         {% block element_image_gallery_inner_thumbnails_col %}
  73.             {% if imageCount > 1 %}
  74.                 <div class="gallery-slider-thumbnails-col{% if galleryPosition == "left" %} col-0 col-md-auto order-2 order-md-1 is-left{% elseif galleryPosition == "underneath" %} col-12 order-2 is-underneath{% endif %}">
  75.                     <div class="gallery-slider-thumbnails-container">
  76.                         {% block element_image_gallery_inner_thumbnails %}
  77.                             <div class="gallery-slider-thumbnails{% if galleryPosition == "underneath" %} is-underneath{% endif %}"
  78.                                  data-gallery-slider-thumbnails="true">
  79.                                 {% block element_image_gallery_inner_thumbnails_items %}
  80.                                     {% for image in mediaItems %}
  81.                                         {% block element_image_gallery_inner_thumbnails_item %}
  82.                                             <div class="gallery-slider-thumbnails-item">
  83.                                                 {% block element_image_gallery_inner_thumbnails_item_inner %}
  84.                                                     <div class="gallery-slider-thumbnails-item-inner">
  85.                                                         {% set attributes = {
  86.                                                             'class': 'gallery-slider-thumbnails-image',
  87.                                                             'alt': (image.translated.alt ?: fallbackImageTitle),
  88.                                                             'title': (image.translated.title ?: fallbackImageTitle)
  89.                                                         } %}
  91.                                                         {% if isProduct %}
  92.                                                             {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  93.                                                         {% endif %}
  95.                                                         {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  96.                                                             media: image,
  97.                                                             sizes: {
  98.                                                                 'default': '200px'
  99.                                                             }
  100.                                                         } %}
  101.                                                     </div>
  102.                                                 {% endblock %}
  103.                                             </div>
  104.                                         {% endblock %}
  105.                                     {% endfor %}
  106.                                 {% endblock %}
  107.                             </div>
  108.                         {% endblock %}
  110.                         {% block element_image_gallery_inner_thumbnails_controls %}
  111.                             {% if galleryPosition == "left" %}
  112.                                 <div data-thumbnail-slider-controls="true"
  113.                                      class="gallery-slider-thumbnails-controls">
  114.                                     <button class="base-slider-controls-prev gallery-slider-thumbnails-controls-prev">
  115.                                         {% sw_icon 'arrow-head-up' %}
  116.                                     </button>
  117.                                     <button class="base-slider-controls-next gallery-slider-thumbnails-controls-next">
  118.                                         {% sw_icon 'arrow-head-down' %}
  119.                                     </button>
  120.                                 </div>
  121.                             {% else %}
  122.                                 <div data-thumbnail-slider-controls="true"
  123.                                      class="gallery-slider-thumbnails-controls">
  124.                                     <button class="base-slider-controls-prev gallery-slider-thumbnails-controls-prev">
  125.                                         {% sw_icon 'fa-angle-left' style {'pack' : 'light', 'namespace': 'MDR_Theme'} %}
  126.                                     </button>
  127.                                     <button class="base-slider-controls-next gallery-slider-thumbnails-controls-next">
  128.                                         {% sw_icon 'fa-angle-right' style {'pack' : 'light', 'namespace': 'MDR_Theme'} %}
  129.                                     </button>
  130.                                 </div>
  131.                             {% endif %}
  132.                         {% endblock %}
  133.                     </div>
  134.                 </div>
  135.             {% endif %}
  136.         {% endblock %}
  138.         {% block element_image_gallery_inner_zoom_modal_wrapper %}
  139.             {{ parent() }}
  140.         {% endblock %}
  141.     </div>
  142. {% endblock %}
  144. {% block element_image_gallery_inner_control_prev_icon %}
  145.     {% sw_icon 'fa-angle-left' style {'pack' : 'light', 'namespace': 'MDR_Theme'} %}
  146. {% endblock %}
  148. {% block element_image_gallery_inner_control_next_icon %}
  149.     {% sw_icon 'fa-angle-right' style {'pack' : 'light', 'namespace': 'MDR_Theme'} %}
  150. {% endblock %}