Symfony Profiler

{% sw_extends '@Storefront/storefront/element/cms-element-image-gallery.html.twig' %}
{% set sliderButtonVariant = 'tertiary' %}
{% set sliderButtonAttrs = 'icon-button' %}
{% block element_image_gallery %}
{# cms element data and configs #}
{% if element.fieldConfig is defined and element.data is defined %}
{% set sliderConfig = element.fieldConfig.elements %}
{% set mediaItems = [] %}
{% for item in element.data.sliderItems %}
{% set mediaItems = mediaItems|merge([item.media]) %}
{% endfor %}
{# added by wyn to have an additional image on position 0 #}
{% set variantMediaId = page.product.customFields.wyn_product_additional_information_additional_product_image %}
{% if variantMediaId %}
{% set variantMedia = searchMedia([variantMediaId], context.context).elements|first %}
{% set tmpVariantMediaArray = [variantMedia] %} {# necessary to have the image on position 0 #}
{% set mediaItems = tmpVariantMediaArray|merge(mediaItems) %}
{% endif %}
{# end of wyn part #}
{% set zoom = sliderConfig.zoom.value %}
{% set gutter = sliderConfig.gutter.value %}
{% set magnifierOverGallery = true %}
{% set zoomModal = sliderConfig.fullScreen.value %}
{% set minHeight = sliderConfig.minHeight.value %}
{% set displayMode = sliderConfig.displayMode.value %}
{% set navigationArrows = sliderConfig.navigationArrows.value %}
{% set navigationDots = sliderConfig.navigationDots.value %}
{% set galleryPosition = sliderConfig.galleryPosition.value %}
{% set verticalAlign = sliderConfig.verticalAlign.value %}
{% set zoomImageContainerSelector = sliderConfig.zoomImageContainerSelector.value %}
{% endif %}
{% if fallbackImageTitle is not defined %}
{% set fallbackImageTitle = '' %}
{% endif %}
{# @var mediaItems \Shopware\Core\Content\Media\MediaCollection #}
{% set imageCount = mediaItems|length %}
{# too many underneath thumbs or slider dots make them hard to see #}
{% set maxItemsToShowMobileNav = 5 %}
{% set maxItemsToShowNav = 8 %}
{% set magnifierOptions = [] %}
{% if magnifierOverGallery %}
{% set magnifierOptions = magnifierOptions|merge({
'magnifierOverGallery': true,
'cursorType': 'crosshair'
}) %}
{% endif %}
{% if zoomImageContainerSelector %}
{% set magnifierOptions = magnifierOptions|merge({
'zoomImageContainerSelector': zoomImageContainerSelector
}) %}
{% endif %}
<div
class="cms-element-{{ element.type }}{% if displayMode == "standard" and verticalAlign %} has-vertical-alignment{% endif %}"
>
{% block element_image_gallery_alignment %}
{% if config.verticalAlign.value %}
<div class="cms-element-alignment{% if verticalAlign == "center" %} align-self-center{% elseif verticalAlign == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
{% endif %}
{% set gallerySliderOptions = {
slider: {
navPosition: 'bottom',
speed: 500,
gutter: gutter ? gutter : 0,
controls: navigationArrows ? true : false,
autoHeight: false,
startIndex: startIndexThumbnails ? startIndexThumbnails : null
},
thumbnailSlider: {
items: (galleryPosition == "underneath") ? 6 : 5,
slideBy: (galleryPosition == "underneath") ? 5 : 4,
controls: true,
startIndex: startIndexThumbnails ? startIndexThumbnails : null,
responsive: {
xs: {
enabled: false,
controls: false
},
sm: {
enabled: false,
controls: false
}
}
}
} %}
{% if galleryPosition == "left" %}
{% set gallerySliderOptions = gallerySliderOptions|replace_recursive({
thumbnailSlider: {
responsive: {
md: {
axis: 'vertical'
},
lg: {
axis: 'vertical'
},
xl: {
axis: 'vertical'
}
}
}
}) %}
{% endif %}
{% block element_image_gallery_inner %}
<wyn-carousel
type="slide"
per-page="1"
per-move="1"
class="media-carousel"
no-pagination
auto-hide-controls
update-on-move
{% if imageCount > 1 %}
sync-with="#product-image-gallery-thumbnails-{{ element.id }}"
{% endif %}
>
{% for image in mediaItems %}
{% block element_image_gallery_inner_item %}
<div
class="media-carousel__slide is-{{ displayMode }}"
{% 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,
attributes: {
class: 'gallery-slider-image js-zoom'
}
} %}
</div>
{% endblock %}
{% endfor %}
{% if imageCount > 1 and navigationDots %}
<wyn-carousel-pagination
{% if navigationDots == "inside" %}class="pagination-inside"{% endif %}
></wyn-carousel-pagination>
{% endif %}
{% block element_image_gallery_swiper_prev_next_buttons %}
<div class="splide__arrows">
<wyn-button
variant="{{ sliderButtonVariant }}"
{{ sliderButtonAttrs }}
class="splide__arrow splide__arrow--prev"
>
{% sw_icon 'arrow-slider' style { 'slotAttr': 'icon', 'class': 'rotate-180' } %}
</wyn-button>
<wyn-button
variant="{{ sliderButtonVariant }}"
{{ sliderButtonAttrs }}
class="splide__arrow splide__arrow--next"
>
{% sw_icon 'arrow-slider' style { 'slotAttr': 'icon' } %}
</wyn-button>
</div>
{% endblock %}
</wyn-carousel>
{% block element_image_gallery_inner_col %}
{% endblock %}
{% block element_image_gallery_inner_thumbnails_col %}
{% if imageCount > 1 %}
{# Thumbnails are not shown in viewports < 1200px width #}
{% set breakpoints = thumbnailBreakpoints ?? {
1200: {perPage: 4, perMove: 4},
1536: {perPage: 5, perMove: 5}
} %}
<wyn-carousel
id="product-image-gallery-thumbnails-{{ element.id }}"
class="thumbnail-carousel"
type="slide"
per-page="{{ thumbnailPerPage ?? 4 }}"
per-move="{{ thumbnailPerMove ?? 4 }}"
breakpoints="{{ breakpoints|json_encode }}"
auto-hide-controls
update-on-move
no-pagination
is-navigation
>
{% block element_image_gallery_inner_thumbnails %}
{% block element_image_gallery_inner_thumbnails_items %}
{% for image in mediaItems %}
{% block element_image_gallery_inner_thumbnails_item %}
{% block element_image_gallery_inner_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'
}
} %}
{% endblock %}
{% endblock %}
{% endfor %}
{% endblock %}
{% endblock %}
{% block element_image_gallery_inner_thumbnails_controls %}
<div class="splide__arrows">
<wyn-button
variant="{{ sliderButtonVariant }}"
{{ sliderButtonAttrs }}
class="splide__arrow splide__arrow--prev"
>
{% sw_icon 'arrow-slider' style { 'slotAttr': 'icon', 'class': 'rotate-180' } %}
</wyn-button>
<wyn-button
variant="{{ sliderButtonVariant }}"
{{ sliderButtonAttrs }}
class="splide__arrow splide__arrow--next"
>
{% sw_icon 'arrow-slider' style { 'slotAttr': 'icon' } %}
</wyn-button>
</div>
{% endblock %}
</wyn-carousel>
{% endif %}
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_wrapper %}
{% if zoomModal %}
<div class="zoom-modal-wrapper">
{% block element_image_gallery_inner_zoom_modal %}
<div
class="modal is-fullscreen zoom-modal js-zoom-modal{% if imageCount is same as(1) %} no-thumbnails{% endif %}"
data-image-zoom-modal="true"
tabindex="-1"
role="dialog"
>
{% block element_image_gallery_inner_zoom_modal_dialog %}
<div
class="modal-dialog"
role="document"
>
{% block element_image_gallery_inner_zoom_modal_content %}
<div class="modal-content"{% if imageCount > 1 %} data-modal-gallery-slider="true"{% endif %}>
{% block element_image_gallery_inner_zoom_modal_close_button %}
<button
type="button"
class="modal-close close"
data-dismiss="modal"
aria-label="Close"
>
{% block element_image_gallery_inner_zoom_modal_close_icon %}
<span aria-hidden="true">
{% sw_icon 'x' style { 'size': 'sm' } %}
</span>
{% endblock %}
</button>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_body %}
<div class="modal-body">
{% block element_image_gallery_inner_zoom_modal_action_buttons %}
<div
class="zoom-modal-actions btn-group"
role="group"
aria-label="zoom actions"
>
{% block element_image_gallery_inner_zoom_modal_action_zoom_out %}
<button class="btn btn-light image-zoom-btn js-image-zoom-out">
{% block element_image_gallery_inner_zoom_modal_action_zoom_out_icon %}
{% sw_icon 'minus-circle' %}
{% endblock %}
</button>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_action_zoom_reset %}
<button class="btn btn-light image-zoom-btn js-image-zoom-reset">
{% block element_image_gallery_inner_zoom_modal_action_zoom_reset_icon %}
{% sw_icon 'screen-minimize' %}
{% endblock %}
</button>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_action_zoom_in %}
<button class="btn btn-light image-zoom-btn js-image-zoom-in">
{% block element_image_gallery_inner_zoom_modal_action_zoom_in_icon %}
{% sw_icon 'plus-circle' %}
{% endblock %}
</button>
{% endblock %}
</div>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_slider %}
<div
class="gallery-slider"
data-gallery-slider-container="true"
>
{% block element_image_gallery_inner_zoom_modal_slider_items %}
{% for image in mediaItems %}
{% block element_image_gallery_inner_zoom_modal_slider_item %}
<div class="gallery-slider-item">
{% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
<div
class="image-zoom-container"
data-image-zoom="true"
>
{% block element_image_gallery_inner_zoom_modal_slider_item_image %}
{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
media: image,
attributes: {
'class': 'gallery-slider-image js-image-zoom-element js-load-img',
'alt': (image.translated.alt ?: fallbackImageTitle),
'title': (image.translated.title ?: fallbackImageTitle)
},
load: false,
loadOriginalImage: true,
autoColumnSizes: false
} %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_slider_controls %}
{% if imageCount > 1 %}
<div
class="gallery-slider-controls"
data-gallery-slider-controls="true"
>
{% block element_image_gallery_inner_zoom_modal_slider_control_prev %}
<button
class="base-slider-controls-prev gallery-slider-controls-prev btn-icon btn-icon--light btn-icon--with-shadow"
aria-label="{{ 'general.previous'|trans|striptags }}"
>
{% block element_image_gallery_inner_zoom_modal_slider_control_prev_icon %}
{% sw_icon 'arrow-head-left' %}
{% endblock %}
</button>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_slider_control_next %}
<button
class="base-slider-controls-next gallery-slider-controls-next btn-icon btn-icon--light btn-icon--with-shadow"
aria-label="{{ 'general.next'|trans|striptags }}"
>
{% block element_image_gallery_inner_zoom_modal_slider_control_next_icon %}
{% sw_icon 'arrow-head-right' %}
{% endblock %}
</button>
{% endblock %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% if imageCount > 1 %}
{% block element_image_gallery_inner_zoom_modal_footer %}
<div class="modal-footer">
{% block element_image_gallery_inner_zoom_modal_thumbnails_controls %}
<div class="gallery-slider-modal-controls">
<div
data-thumbnail-slider-controls="true"
class="gallery-slider-modal-thumbnails"
>
<button
class="base-slider-controls-prev gallery-slider-thumbnails-controls-prev"
aria-label="{{ 'general.previous'|trans|striptags }}"
>
{% sw_icon 'arrow-head-left' %}
</button>
<button
class="base-slider-controls-next gallery-slider-thumbnails-controls-next"
aria-label="{{ 'general.next'|trans|striptags }}"
>
{% sw_icon 'arrow-head-right' %}
</button>
</div>
</div>
{% endblock %}
{% block element_image_gallery_inner_zoom_modal_thumbnails %}
<div
class="gallery-slider-thumbnails"
data-gallery-slider-thumbnails=true
>
{% block element_image_gallery_inner_zoom_modal_thumbnails_items %}
{% for image in mediaItems %}
{% block element_image_gallery_inner_zoom_modal_thumbnails_item %}
<div class="gallery-slider-thumbnails-item">
{% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner %}
<div class="gallery-slider-thumbnails-item-inner">
{% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
media: image,
sizes: {
'default': '200px'
},
attributes: {
'class': 'gallery-slider-thumbnails-image js-load-img',
'alt': (image.translated.alt ?: fallbackImageTitle),
'title': (image.translated.title ?: fallbackImageTitle)
},
load: false
} %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endif %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% endblock %}
{% if config.verticalAlign.value %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}

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