custom/plugins/SolidProductVideos/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 %}
  4.     {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  5.     {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  6.     {% set imageCount = mediaItems|length %}
  8.     {{ parent() }}
  9. {% endblock %}
  11. {% block element_image_gallery_inner_items %}
  12.     {% block solid_pv_element_image_gallery_inner_items %}
  13.         {% set productVideosConfig = config('SolidProductVideos.config') %}
  14.         {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  15.         {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  17.         {% for mediaItem in mediaItems %}
  18.             {% block element_image_gallery_inner_item %}
  19.                 <div class="gallery-slider-item-container">
  20.                     {% if (isProduct or isMappedToProductMedia) and ((mediaItem.source and mediaItem.videoId) or mediaItem.media.mimeType | split('/')[0] == 'video') %}
  21.                         {% set isVideo = true %}
  22.                     {% endif %}
  24.                     <div class="gallery-slider-item is-{{ displayMode }} {% if isVideo %}is-video{% else %}js-magnifier-container{% endif %}" {% if minHeight and (displayMode == "cover" or displayMode == "contain" ) %} style="min-height: {{ minHeight }}" {% endif %}>
  25.                         {% set attributes = {
  26.                             'class': 'img-fluid gallery-slider-image' ~ (isVideo ?: ' magnifier-image js-magnifier-image'),
  27.                             'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  28.                             'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle)),
  29.                             'data-full-image': (isVideo ?: (isProduct or isMappedToProductMedia ? mediaItem.media.url : mediaItem.url))
  30.                         } %}
  32.                         {% if displayMode == 'cover' or displayMode == 'contain' %}
  33.                             {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  34.                         {% endif %}
  36.                         {% if (isProduct or isMappedToProductMedia) and not isVideo %}
  37.                             {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  38.                         {% endif %}
  40.                         {% block solid_pv_gallery_slider_image_conditions %}
  41.                             {% if (isProduct or isMappedToProductMedia) and (mediaItem.source and mediaItem.videoId) %}
  42.                                 {% if productVideosConfig.forceUserConsent %}
  43.                                     {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-content-blocker.html.twig' with {
  44.                                         source: mediaItem.source,
  45.                                         videoId: mediaItem.videoId
  46.                                     } %}
  47.                                 {% else %}
  48.                                     {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-' ~ mediaItem.source ~ '.html.twig' with {
  49.                                         videoId: mediaItem.videoId
  50.                                     } %}
  51.                                 {% endif %}
  52.                             {% elseif (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType | split('/')[0] == 'video' %}
  53.                                 {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-video.html.twig' %}
  54.                             {% else %}
  55.                                 {% block solid_pv_gallery_slider_image_image %}
  56.                                     {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  57.                                         media: (isProduct or isMappedToProductMedia ? mediaItem.media : mediaItem)
  58.                                     } %}
  59.                                 {% endblock %}
  60.                             {% endif %}
  61.                         {% endblock %}
  62.                     </div>
  63.                 </div>
  64.             {% endblock %}
  65.         {% endfor %}
  66.     {% endblock %}
  67. {% endblock %}
  69. {% block element_image_gallery_inner_single %}
  70.     {% set productVideosConfig = config('SolidProductVideos.config') %}
  71.     {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  72.     {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  73.     {% set mediaItem = mediaItems|first %}
  74.     {% set imageCount = mediaItems|length %}
  76.     {% block solid_pv_element_image_gallery_inner_single %}
  77.         {% if (isProduct or isMappedToProductMedia) and ((mediaItem.source and mediaItem.videoId) or mediaItem.media.mimeType | split('/')[0] == 'video') %}
  78.             {% set isVideo = true %}
  79.         {% endif %}
  81.         <div class="gallery-slider-single-image is-{{ displayMode }} {% if isVideo %}is-video{% else %}js-magnifier-container{% endif %}" {% if minHeight %} style="min-height: {{ minHeight }}" {% endif %}>
  82.             {% if imageCount > 0 %}
  83.                 {% set attributes = {
  84.                     'class': 'img-fluid gallery-slider-image' ~ (isVideo ?: ' magnifier-image js-magnifier-image'),
  85.                     'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  86.                     'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle)),
  87.                     'data-full-image': (isVideo ?: (isProduct or isMappedToProductMedia ? mediaItem.media.url : mediaItem.url))
  88.                 } %}
  90.                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  91.                     {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  92.                 {% endif %}
  94.                 {% if (isProduct or isMappedToProductMedia) and not isVideo %}
  95.                     {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  96.                 {% endif %}
  98.                 {% block solid_pv_gallery_slider_image_single_conditions %}
  99.                     {% if (isProduct or isMappedToProductMedia) and (mediaItem.source and mediaItem.videoId) %}
  100.                         {% if productVideosConfig.forceUserConsent %}
  101.                             {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-content-blocker.html.twig' with {
  102.                                 source: mediaItem.source,
  103.                                 videoId: mediaItem.videoId
  104.                             } %}
  105.                         {% else %}
  106.                             {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-' ~ mediaItem.source ~ '.html.twig' with {
  107.                                 videoId: mediaItem.videoId
  108.                             } %}
  109.                         {% endif %}
  110.                     {% elseif (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType | split('/')[0] == 'video' %}
  111.                         {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-video.html.twig' %}
  112.                     {% else %}
  113.                         {% block solid_pv_gallery_slider_image_single_image %}
  114.                             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  115.                                 media: (isProduct or isMappedToProductMedia ? mediaItem.media : mediaItem)
  116.                             } %}
  117.                         {% endblock %}
  118.                     {% endif %}
  119.                 {% endblock %}
  120.             {% else %}
  121.                 {% sw_icon 'placeholder' style {
  122.                     'size': 'fluid'
  123.                 } %}
  124.             {% endif %}
  125.         </div>
  126.     {% endblock %}
  127. {% endblock %}
  129. {% block element_image_gallery_inner_thumbnails_items %}
  130.     {% block solid_pv_element_image_gallery_inner_thumbnails_items %}
  131.         {% set productVideosConfig = config('SolidProductVideos.config') %}
  132.         {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  133.         {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  135.         {% for mediaItem in mediaItems %}
  136.             {% block element_image_gallery_inner_thumbnails_item %}
  137.                 <div class="gallery-slider-thumbnails-item">
  138.                     {% block element_image_gallery_inner_thumbnails_item_inner %}
  139.                         <div class="gallery-slider-thumbnails-item-inner">
  140.                             {% set attributes = {
  141.                                 'class': 'gallery-slider-thumbnails-image',
  142.                                 'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  143.                                 'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle))
  144.                             } %}
  146.                             {% if (isProduct or isMappedToProductMedia) and not isVideo %}
  147.                                 {% set attributes = attributes|merge({ 'itemprop': 'image' }) %}
  148.                             {% endif %}
  150.                             {% block solid_pv_gallery_slider_thumbnail_conditions %}
  151.                                 {% if (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType | split('/')[0] == 'video' and not mediaItem.extensions.solidPvVideoThumbnail %}
  152.                                     {% block solid_pv_gallery_slider_thumbnail_video %}
  153.                                         <div class="solid-pv-item">
  154.                                             <video preload="none">
  155.                                                 <source src="{{ mediaItem.media.url }}" type="{{ mediaItem.media.mimeType }}">
  156.                                             </video>
  158.                                             <div class="solid-pv-icon">
  159.                                                 {% sw_icon 'multicolor-action-play' style {
  160.                                                     'namespace': 'SolidProductVideos'
  161.                                                 } %}
  162.                                             </div>
  163.                                         </div>
  164.                                     {% endblock %}
  165.                                 {% else %}
  166.                                     {% block solid_pv_gallery_slider_thumbnail_image %}
  167.                                         {% if mediaItem.source and mediaItem.videoId %}
  168.                                             {% if mediaItem.thumbnailMedia %}
  169.                                                 {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  170.                                                     media: mediaItem.thumbnailMedia,
  171.                                                     sizes: {
  172.                                                         'default': '200px'
  173.                                                     }
  174.                                                 } %}
  175.                                             {% else %}
  176.                                                 <img
  177.                                                     class="gallery-slider-thumbnails-image"
  178.                                                     src="{{ solidPvGetProductEmbeddedVideoMediaThumbnailUrl(mediaItem) }}"
  179.                                                     alt="{{ page.product.translated.name }}"
  180.                                                     title="{{ page.product.translated.name }}"
  181.                                                 >
  182.                                             {% endif %}
  183.                                         {% elseif mediaItem.extensions.solidPvVideoThumbnail %}
  184.                                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  185.                                                 media: mediaItem.extensions.solidPvVideoThumbnail.media,
  186.                                                 sizes: {
  187.                                                     'default': '200px'
  188.                                                 }
  189.                                             } %}
  190.                                         {% else %}
  191.                                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  192.                                                 media: (isProduct or isMappedToProductMedia ? mediaItem.media : mediaItem),
  193.                                                 sizes: {
  194.                                                     'default': '200px'
  195.                                                 }
  196.                                             } %}
  197.                                         {% endif %}
  199.                                         {% block solid_pv_gallery_slider_thumbnail_icon %}
  200.                                             {% if (isProduct or isMappedToProductMedia) and ((mediaItem.source and mediaItem.videoId) || mediaItem.media.mimeType | split('/')[0] == 'video') %}
  201.                                                 <div class="solid-pv-icon">
  202.                                                     {% sw_icon 'multicolor-action-play' style {
  203.                                                         'namespace': 'SolidProductVideos'
  204.                                                     } %}
  205.                                                 </div>
  206.                                             {% endif %}
  207.                                         {% endblock %}
  208.                                     {% endblock %}
  209.                                 {% endif %}
  210.                             {% endblock %}
  211.                         </div>
  212.                     {% endblock %}
  213.                 </div>
  214.             {% endblock %}
  215.         {% endfor %}
  216.     {% endblock %}
  217. {% endblock %}
  219. {% block element_image_gallery_inner_zoom_modal_slider_items %}
  220.     {% block solid_pv_element_image_gallery_inner_zoom_modal_slider_items %}
  221.         {% set productVideosConfig = config('SolidProductVideos.config') %}
  222.         {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  223.         {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  225.         {% for mediaItem in mediaItems %}
  226.             {% block element_image_gallery_inner_zoom_modal_slider_item %}
  227.                 <div class="gallery-slider-item">
  228.                     {% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
  229.                         {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  230.                             {% block solid_pv_gallery_slider_zoom_modal_image_conditions %}
  231.                                 {% if (isProduct or isMappedToProductMedia) and (mediaItem.source and mediaItem.videoId) %}
  232.                                     {% if productVideosConfig.forceUserConsent %}
  233.                                         {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-content-blocker.html.twig' with {
  234.                                             source: mediaItem.source,
  235.                                             videoId: mediaItem.videoId
  236.                                         } %}
  237.                                     {% else %}
  238.                                         {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-' ~ mediaItem.source ~ '.html.twig' with {
  239.                                             videoId: mediaItem.videoId
  240.                                         } %}
  241.                                     {% endif %}
  242.                                 {% elseif (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType | split('/')[0] == 'video' %}
  243.                                     {% sw_include '@SolidProductVideos/storefront/element/cms-element-image-gallery/image-gallery-components/cms-element-image-gallery-video.html.twig' %}
  244.                                 {% else %}
  245.                                     <div class="image-zoom-container" data-image-zoom="true">
  246.                                         {% block solid_pv_gallery_slider_zoom_modal_image_image %}
  247.                                             {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  248.                                                 media: (isProduct or isMappedToProductMedia ? mediaItem.media : mediaItem),
  249.                                                 attributes: {
  250.                                                     'class': 'gallery-slider-image js-image-zoom-element js-load-img',
  251.                                                     'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  252.                                                     'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle))
  253.                                                 }
  254.                                             } %}
  255.                                         {% endblock %}
  256.                                     </div>
  257.                                 {% endif %}
  258.                             {% endblock %}
  259.                         {% endblock %}
  260.                     {% endblock %}
  261.                 </div>
  262.             {% endblock %}
  263.         {% endfor %}
  264.     {% endblock %}
  265. {% endblock %}
  267. {% block element_image_gallery_inner_zoom_modal_thumbnails_items %}
  268.     {% block solid_pv_element_image_gallery_inner_zoom_modal_thumbnails_items %}
  269.         {% set productVideosConfig = config('SolidProductVideos.config') %}
  270.         {% set isMappedToProductMedia = element.config.sliderItems.source == 'mapped' and element.config.sliderItems.value == 'product.media' %}
  271.         {% set mediaItems = isProduct or isMappedToProductMedia ? page.product.extensions.solidPvCombinedMedia.get('combinedMedia') : mediaItems %}
  273.         {% for mediaItem in mediaItems %}
  274.             {% block element_image_gallery_inner_zoom_modal_thumbnails_item %}
  275.                 <div class="gallery-slider-thumbnails-item {% if (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType |
  276.                         split('/')[0] == 'video' %}is-video{% endif %}">
  277.                     {% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner %}
  278.                         <div class="gallery-slider-thumbnails-item-inner">
  279.                             {% block solid_pv_gallery_slider_zoom_modal_thumbnail_conditions %}
  280.                                 {% if (isProduct or isMappedToProductMedia) and mediaItem.media.mimeType | split('/')[0] == 'video' and not mediaItem.extensions.solidPvVideoThumbnail %}
  281.                                     {% block solid_pv_gallery_slider_zoom_modal_thumbnail_video %}
  282.                                         <div class="solid-pv-item">
  283.                                             <video preload="none">
  284.                                                 <source src="{{ mediaItem.media.url }}" type="{{ mediaItem.media.mimeType }}">
  285.                                             </video>
  287.                                             <div class="solid-pv-icon">
  288.                                                 {% sw_icon 'multicolor-action-play' style {
  289.                                                     'namespace': 'SolidProductVideos'
  290.                                                 } %}
  291.                                             </div>
  292.                                         </div>
  293.                                     {% endblock %}
  294.                                 {% else %}
  295.                                     {% block solid_pv_gallery_slider_zoom_modal_thumbnail_image %}
  296.                                         {% if mediaItem.source and mediaItem.videoId %}
  297.                                             {% if mediaItem.thumbnailMedia %}
  298.                                                 {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  299.                                                     media: mediaItem.thumbnailMedia,
  300.                                                     sizes: {
  301.                                                         'default': '200px'
  302.                                                     },
  303.                                                     attributes: {
  304.                                                         'class': 'gallery-slider-thumbnails-image',
  305.                                                         'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  306.                                                         'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle))
  307.                                                     }
  308.                                                 } %}
  309.                                             {% else %}
  310.                                                 <img
  311.                                                     class="gallery-slider-thumbnails-image"
  312.                                                     src="{{ solidPvGetProductEmbeddedVideoMediaThumbnailUrl(mediaItem) }}"
  313.                                                     alt="{{ page.product.translated.name }}"
  314.                                                     title="{{ page.product.translated.name }}"
  315.                                                 >
  316.                                             {% endif %}
  317.                                         {% elseif mediaItem.extensions.solidPvVideoThumbnail %}
  318.                                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  319.                                                 media: mediaItem.extensions.solidPvVideoThumbnail.media,
  320.                                                 sizes: {
  321.                                                     'default': '200px'
  322.                                                 },
  323.                                                 attributes: {
  324.                                                     'class': 'gallery-slider-thumbnails-image',
  325.                                                     'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  326.                                                     'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle))
  327.                                                 }
  328.                                             } %}
  329.                                         {% else %}
  330.                                             {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  331.                                                 media: (isProduct or isMappedToProductMedia ? mediaItem.media : mediaItem),
  332.                                                 sizes: {
  333.                                                     'default': '200px'
  334.                                                 },
  335.                                                 attributes: {
  336.                                                     'class': 'gallery-slider-thumbnails-image',
  337.                                                     'alt': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.alt ?: fallbackImageTitle) : (mediaItem.translated.alt ?: fallbackImageTitle)),
  338.                                                     'title': (isProduct or isMappedToProductMedia ? (mediaItem.media.translated.title ?: fallbackImageTitle) : (mediaItem.translated.title ?: fallbackImageTitle))
  339.                                                 }
  340.                                             } %}
  341.                                         {% endif %}
  343.                                         {% block solid_pv_gallery_slider_zoom_modal_thumbnail_icon %}
  344.                                             {% if (isProduct or isMappedToProductMedia) and ((mediaItem.source and mediaItem.videoId) || mediaItem.media.mimeType | split('/')[0] == 'video') %}
  345.                                                 <div class="solid-pv-icon">
  346.                                                     {% sw_icon 'multicolor-action-play' style {
  347.                                                         'namespace': 'SolidProductVideos'
  348.                                                     } %}
  349.                                                 </div>
  350.                                             {% endif %}
  351.                                         {% endblock %}
  352.                                     {% endblock %}
  353.                                 {% endif %}
  354.                             {% endblock %}
  355.                         </div>
  356.                     {% endblock %}
  357.                 </div>
  358.             {% endblock %}
  359.         {% endfor %}
  360.     {% endblock %}
  361. {% endblock %}