{% sw_extends '@Storefront/storefront/element/cms-element-image-gallery.html.twig' %}
{% block element_image_gallery_inner_col %}
{% if imageCount > 1 %}
<div class="gallery-slider-thumbnails-col col-0 col-md-2 order-1 order-md-1 is-left">
<div class="gallery-slider-thumbnails-container{% if galleryPosition == " underneath" %} is-underneath{% endif %}">
{% block element_image_gallery_inner_thumbnails %}
<div class="gallery-slider-thumbnails{% if galleryPosition == " underneath" %} is-underneath{% endif %}" data-gallery-slider-thumbnails="true">
{% block element_image_gallery_inner_thumbnails_items %}
{% for image in mediaItems %}
{% block element_image_gallery_inner_thumbnails_item %}
<div class="gallery-slider-thumbnails-item">
{% block element_image_gallery_inner_thumbnails_item_inner %}
<div class="gallery-slider-thumbnails-item-inner">
{% set attributes = {
'class': 'gallery-slider-thumbnails-image',
'alt': (image.translated.alt ?: fallbackImageTitle),
'title': (image.translated.title ?: fallbackImageTitle)
} %}
{% if isProduct %}
{% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
{% endif %}
{% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
media: image,
sizes: {
'default': '200px'
}
} %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
{% block element_image_gallery_inner_thumbnails_controls %}
<div data-thumbnail-slider-controls="true" class="gallery-slider-thumbnails-controls">
{% block element_image_gallery_inner_thumbnails_controls_prev %}
<button class="base-slider-controls-prev gallery-slider-thumbnails-controls-prev">
{% if galleryPosition == "left" %}
{% sw_icon 'arrow-head-up' %}
{% elseif galleryPosition == "underneath" %}
{% sw_icon 'arrow-head-left' %}
{% endif %}
</button>
{% endblock %}
{% block element_image_gallery_inner_thumbnails_controls_next %}
<button class="base-slider-controls-next gallery-slider-thumbnails-controls-next">
{% if galleryPosition == "left" %}
{% sw_icon 'arrow-head-down' %}
{% elseif galleryPosition == "underneath" %}
{% sw_icon 'arrow-head-right' %}
{% endif %}
</button>
{% endblock %}
</div>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
{% block element_image_gallery_inner_thumbnails_col %}
<div
class="gallery-slider-col col col-md-10 order-2 order-md-2" {% if zoomModal %} data-zoom-modal="true" {% endif %}>
{# option "magnifierOverGallery" shows zoom container over gallery #}
{% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
showText: false,
size: 'md',
productId: page.product.id
} %}
<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 %}">
{% block element_image_gallery_inner_wrapper %}
{% if imageCount > 1 %}
{% block element_image_gallery_inner_multiple_slides %}
{% block element_image_gallery_inner_container %}
<div class="gallery-slider-container" data-gallery-slider-container="true">
{% block element_image_gallery_inner_items %}
{% for image in mediaItems %}
{% block element_image_gallery_inner_item %}
<div class="gallery-slider-item-container">
<div class="gallery-slider-item is-{{ displayMode }} js-magnifier-container" {% if minHeight and (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}" {% endif %}>
{% set attributes = {
'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
'alt': (image.translated.alt ?: fallbackImageTitle),
'title': (image.translated.title ?: fallbackImageTitle),
'data-full-image': image.url
} %}
{% if displayMode == 'cover' or displayMode == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
{% endif %}
{% if isProduct %}
{% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
{% endif %}
{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
media: image
} %}
</div>
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
{% block element_image_gallery_inner_controls %}
{% if navigationArrows %}
<div class="gallery-slider-controls" data-gallery-slider-controls="{% if navigationArrows %}true{% else %}false{% endif %}">
{% block element_image_gallery_inner_control_items %}
{% block element_image_gallery_inner_control_prev %}
<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 %}" aria-label="{{ 'general.previous'|trans|striptags }}">
{% block element_image_gallery_inner_control_prev_icon %}
{% sw_icon 'arrow-head-left' %}
{% endblock %}
</button>
{% endblock %}
{% block element_image_gallery_inner_control_next %}
<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 %}" aria-label="{{ 'general.next'|trans|striptags }}">
{% block element_image_gallery_inner_control_next_icon %}
{% sw_icon 'arrow-head-right' %}
{% endblock %}
</button>
{% endblock %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% endblock %}
{% else %}
{% block element_image_gallery_inner_single %}
<div class="gallery-slider-single-image is-{{ displayMode }} js-magnifier-container" {% if minHeight %} style="min-height: {{ minHeight }}" {% endif %}>
{% if imageCount > 0 %}
{% set attributes = {
'class': 'img-fluid gallery-slider-image magnifier-image js-magnifier-image',
'alt': (mediaItems|first.translated.alt ?: fallbackImageTitle),
'title': (mediaItems|first.translated.title ?: fallbackImageTitle),
'data-full-image': mediaItems|first.url
} %}
{% if displayMode == 'cover' or displayMode == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
{% endif %}
{% if isProduct %}
{% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
{% endif %}
{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
media: mediaItems|first,
} %}
{% else %}
{% sw_icon 'placeholder' style {
'size': 'fluid'
} %}
{% endif %}
</div>
{% endblock %}
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}