templates/default/components/molecules/image-slider/image-slider.html.twig line 1

Open in your IDE?
  1. {% macro item(content) %}
  2. <div class="swiper-slide image-slider__slide">
  3. <div class="image-slider__slide-inner">
  4. {{ content }}
  5. </div>
  6. </div>
  7. {% endmacro %}
  9. {% macro itemImage(image, showImageSimilarFlag) %}
  10. {% set content %}
  11. {% include 'components/atoms/image/image.html.twig' with {
  12. 'src': attribute(image.thumbnail, 'large'),
  13. 'alt': image.text,
  14. 'class': 'image-slider__image js-show-lightbox js-zoom-image',
  15. 'attributes': {
  16. 'data-original': attribute(image.thumbnail, 'large')
  17. },
  18. 'imageSimilar': (showImageSimilarFlag|default(false) and image.imageSimilar)
  19. } %}
  20. {% endset %}
  21. {{ _self.item(content) }}
  22. {% endmacro %}
  24. {% macro itemOrbitvu(obitvuSku, showOrbitvuThumbnail, showOrbitvuPreview) %}
  25. {% set content %}
  26. {% if showOrbitvuThumbnail %}
  27. {% include 'components/atoms/image/image.html.twig' with {
  28. 'src': asset('build/images/thumbnails/orbitvu-thumbnail.svg'),
  29. 'alt': '',
  30. 'class': 'image-slider__image'
  31. } %}
  32. {% else %}
  33. <div class="image-slider__orbitvu {% if showOrbitvuPreview %}image-slider__orbitvu--preview{% endif %} image-slider__image js-show-lightbox">
  34. {% set ovusFolder = orbitvuBaseUrl ~ obitvuSku %}
  35. {% set imagesFolder = ovusFolder ~ "/images" %}
  36. <div
  37. class="container"
  38. id="{{ uniqid() }}"
  39. data-orbitvu-ovus-folder="{{ ovusFolder }}"
  40. data-orbitvu-images-folder="{{ imagesFolder }}"
  41. data-orbitvu-preview="{{ showOrbitvuPreview }}"
  42. >
  43. <div class="loader loader--big"></div>
  44. </div>
  45. </div>
  46. {% endif %}
  47. {% endset %}
  48. {{ _self.item(content) }}
  49. {% endmacro %}
  51. {% macro itemVideo(videoId, showVideoThumbnail, showVideoPreview) %}
  52. {% set content %}
  53. {% if showVideoThumbnail %}
  54. {% include 'components/atoms/image/image.html.twig' with {
  55. 'src': '/build/images/thumbnails/video-thumbnail.svg',
  56. 'alt': '',
  57. 'class': 'image-slider__image'
  58. } %}
  59. {% else %}
  60. {% if showVideoPreview %}
  61. <div class="image-slider__video js-show-lightbox">
  62. {% if ("C0003:1" in app.request.cookies.get("OptanonConsent")|default) %}
  63. {% include 'components/atoms/image/image.html.twig' with {
  64. 'src': 'https://img.youtube.com/vi/' ~ videoId ~ '/maxresdefault.jpg',
  65. 'static': true,
  66. 'alt': '',
  67. 'class': 'image-slider__image'
  68. } %}
  69. {% endif %}
  70. </div>
  71. {% else %}
  72. {% include 'components/atoms/youtube/youtube.html.twig' with {'id': videoId, 'autostart': true} %}
  73. {% endif %}
  74. {% endif %}
  75. {% endset %}
  76. {{ _self.item(content) }}
  77. {% endmacro %}
  79. <div class="swiper-container image-slider js-image-slider {{ class|default }}" {{ attributes|default([])|getAttributes }}>
  80. <div class="swiper-wrapper image-slider__wrapper">
  81. {% for image in images|default([])[:1] %}
  82. {{ _self.itemImage(image, showImageSimilarFlag|default(false)) }}
  83. {% endfor %}
  85. {% for videoId in videos|default([]) %}
  86. {{ _self.itemVideo(videoId, showVideoThumbnail|default, showVideoPreview|default) }}
  87. {% endfor %}
  89. {% if obitvuSku|default %}
  90. {{ _self.itemOrbitvu(obitvuSku|default, showOrbitvuThumbnail|default, showOrbitvuPreview|default) }}
  91. {% endif %}
  93. {% for image in images|default([])[1:] %}
  94. {{ _self.itemImage(image, showImageSimilarFlag|default(false)) }}
  95. {% endfor %}
  96. </div>
  98. {% if showPagination|default == true %}
  99. <div class="swiper-pagination image-slider__pagination"></div>
  100. {% endif %}
  102. {% if showNavigation|default == true %}
  103. <div class="swiper-button-prev image-slider__prev"></div>
  104. <div class="swiper-button-next image-slider__next"></div>
  105. {% endif %}
  106. </div>