templates/pages/_includes/details/_gallery-viewer.html.twig line 1

Open in your IDE?
  1. {% set stopoverMedias = stopoversMedias|default(stopoverMedias|default([])) %}
  2. {% set shipMediasPool = shipMedias|default([]) %}
  3. {% set allMediasPool = [] %}
  5. {% if allMedias is defined and allMedias is iterable %}
  6. {% if allMedias.ship is defined or allMedias.stopovers is defined or allMedias.cabinTypes is defined %}
  7. {% set allMediasPool = allMediasPool
  8. |merge(allMedias.ship|default([]))
  9. |merge(allMedias.stopovers|default([]))
  10. |merge(allMedias.cabinTypes|default([]))
  11. %}
  12. {% else %}
  13. {% set allMediasPool = allMedias %}
  14. {% endif %}
  15. {% endif %}
  17. {# Pools simplifiés : on exclut uniquement les médias de type lien #}
  18. {% set stopoverPool = [] %}
  19. {% for media in stopoverMedias %}
  20. {% if media.extension|default('')|lower != 'link' and (media.cdnUrl is not empty or media.url is not empty) %}
  21. {% set stopoverPool = stopoverPool|merge([media]) %}
  22. {% endif %}
  23. {% endfor %}
  25. {% set shipPool = [] %}
  26. {% for media in shipMediasPool %}
  27. {% if media.extension|default('')|lower != 'link' and (media.cdnUrl is not empty or media.url is not empty) %}
  28. {% set shipPool = shipPool|merge([media]) %}
  29. {% endif %}
  30. {% endfor %}
  32. {% set allPool = [] %}
  33. {% for media in allMediasPool %}
  34. {% if media.extension|default('')|lower != 'link' and (media.cdnUrl is not empty or media.url is not empty) %}
  35. {% set allPool = allPool|merge([media]) %}
  36. {% endif %}
  37. {% endfor %}
  39. {% set usedMediaKeys = [] %}
  40. {% set selectedImages = [] %}
  42. {# 1) Stopover aléatoire #}
  43. {% if stopoverPool is not empty %}
  44. {% set firstImage = (stopoverPool|shuffle)|first %}
  45. {% set firstImageKey = firstImage.id|default(firstImage.cdnUrl|default(firstImage.url|default(''))) %}
  46. {% set selectedImages = selectedImages|merge([{ media: firstImage, category: 'stopovers' }]) %}
  47. {% set usedMediaKeys = usedMediaKeys|merge([firstImageKey]) %}
  48. {% endif %}
  50. {# 2) Ship tag main -> ship aléatoire -> allMedias aléatoire (non utilisée) #}
  51. {% set shipMainCandidates = [] %}
  52. {% for media in shipPool %}
  53. {% set hasMainTag = false %}
  54. {% for mediaTag in media.tags|default([]) %}
  55. {% set tagName = mediaTag.name|default(mediaTag.slug|default(mediaTag|default('')))|lower %}
  56. {% if tagName == 'main' %}
  57. {% set hasMainTag = true %}
  58. {% endif %}
  59. {% endfor %}
  60. {% if hasMainTag %}
  61. {% set shipMainCandidates = shipMainCandidates|merge([media]) %}
  62. {% endif %}
  63. {% endfor %}
  64. {% set shipFallbackCandidates = [] %}
  65. {% for media in shipPool %}
  66. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  67. {% if mediaKey not in usedMediaKeys %}
  68. {% set shipFallbackCandidates = shipFallbackCandidates|merge([media]) %}
  69. {% endif %}
  70. {% endfor %}
  71. {% set allFallbackCandidates = [] %}
  72. {% for media in allPool %}
  73. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  74. {% if mediaKey not in usedMediaKeys %}
  75. {% set allFallbackCandidates = allFallbackCandidates|merge([media]) %}
  76. {% endif %}
  77. {% endfor %}
  78. {% set secondImage = null %}
  79. {% set secondImageCategory = 'ship' %}
  80. {% if shipMainCandidates is not empty %}
  81. {% set secondImage = (shipMainCandidates|shuffle)|first %}
  82. {% elseif shipFallbackCandidates is not empty %}
  83. {% set secondImage = (shipFallbackCandidates|shuffle)|first %}
  84. {% elseif allFallbackCandidates is not empty %}
  85. {% set secondImage = (allFallbackCandidates|shuffle)|first %}
  86. {% endif %}
  87. {% if secondImage %}
  88. {% set secondImageKey = secondImage.id|default(secondImage.cdnUrl|default(secondImage.url|default(''))) %}
  89. {% if secondImageKey not in usedMediaKeys %}
  90. {% set selectedImages = selectedImages|merge([{ media: secondImage, category: secondImageCategory }]) %}
  91. {% set usedMediaKeys = usedMediaKeys|merge([secondImageKey]) %}
  92. {% endif %}
  93. {% endif %}
  95. {# 3) Stopover aléatoire, préférence non utilisée #}
  96. {% set stopoverAvailable = [] %}
  97. {% for media in stopoverPool %}
  98. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  99. {% if mediaKey not in usedMediaKeys %}
  100. {% set stopoverAvailable = stopoverAvailable|merge([media]) %}
  101. {% endif %}
  102. {% endfor %}
  103. {% set thirdImage = null %}
  104. {% if stopoverAvailable is not empty %}
  105. {% set thirdImage = (stopoverAvailable|shuffle)|first %}
  106. {% elseif stopoverPool is not empty %}
  107. {% set thirdImage = (stopoverPool|shuffle)|first %}
  108. {% endif %}
  109. {% if thirdImage %}
  110. {% set thirdImageKey = thirdImage.id|default(thirdImage.cdnUrl|default(thirdImage.url|default(''))) %}
  111. {% set selectedImages = selectedImages|merge([{ media: thirdImage, category: 'stopovers' }]) %}
  112. {% if thirdImageKey not in usedMediaKeys %}
  113. {% set usedMediaKeys = usedMediaKeys|merge([thirdImageKey]) %}
  114. {% endif %}
  115. {% endif %}
  117. {# 4) + 5) Ship tag boarding_life -> ship aléatoire non utilisée -> allMedias aléatoire non utilisée #}
  118. {% for i in 1..2 %}
  119. {% set shipBoardingCandidates = [] %}
  120. {% for media in shipPool %}
  121. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  122. {% if mediaKey not in usedMediaKeys %}
  123. {% set hasBoardingLifeTag = false %}
  124. {% for mediaTag in media.tags|default([]) %}
  125. {% set tagName = mediaTag.name|default(mediaTag.slug|default(mediaTag|default('')))|lower %}
  126. {% if tagName == 'boarding_life' %}
  127. {% set hasBoardingLifeTag = true %}
  128. {% endif %}
  129. {% endfor %}
  130. {% if hasBoardingLifeTag %}
  131. {% set shipBoardingCandidates = shipBoardingCandidates|merge([media]) %}
  132. {% endif %}
  133. {% endif %}
  134. {% endfor %}
  135. {% set shipAnyCandidates = [] %}
  136. {% for media in shipPool %}
  137. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  138. {% if mediaKey not in usedMediaKeys %}
  139. {% set shipAnyCandidates = shipAnyCandidates|merge([media]) %}
  140. {% endif %}
  141. {% endfor %}
  142. {% set allAnyCandidates = [] %}
  143. {% for media in allPool %}
  144. {% set mediaKey = media.id|default(media.cdnUrl|default(media.url|default(''))) %}
  145. {% if mediaKey not in usedMediaKeys %}
  146. {% set allAnyCandidates = allAnyCandidates|merge([media]) %}
  147. {% endif %}
  148. {% endfor %}
  149. {% set nextImage = null %}
  150. {% set nextImageCategory = 'ship' %}
  151. {% if shipBoardingCandidates is not empty %}
  152. {% set nextImage = (shipBoardingCandidates|shuffle)|first %}
  153. {% set nextImageCategory = 'cabin' %}
  154. {% elseif shipAnyCandidates is not empty %}
  155. {% set nextImage = (shipAnyCandidates|shuffle)|first %}
  156. {% elseif allAnyCandidates is not empty %}
  157. {% set nextImage = (allAnyCandidates|shuffle)|first %}
  158. {% endif %}
  159. {% if nextImage %}
  160. {% set nextImageKey = nextImage.id|default(nextImage.cdnUrl|default(nextImage.url|default(''))) %}
  161. {% if nextImageKey not in usedMediaKeys %}
  162. {% set selectedImages = selectedImages|merge([{ media: nextImage, category: nextImageCategory }]) %}
  163. {% set usedMediaKeys = usedMediaKeys|merge([nextImageKey]) %}
  164. {% endif %}
  165. {% endif %}
  166. {% endfor %}
  168. {% if selectedImages is not empty %}
  169. <div class="viewer" id="cruise-viewer" data-total-images="{{ selectedImages|length }}">
  170. <div class="viewer-desktop">
  171. <div class="viewer-main-image">
  172. <img
  173. src="{{ selectedImages[0].media.cdnUrl|default(selectedImages[0].media.url|default('')) }}"
  174. alt="{{ selectedImages[0].media.title|default(cruise.name|default('Image croisière')) }}"
  175. class="main-image"
  176. data-gallery-category="{{ selectedImages[0].category }}"
  177. data-gallery-src="{{ selectedImages[0].media.cdnUrl|default(selectedImages[0].media.url|default('')) }}"
  178. data-gallery-media-id="{{ selectedImages[0].media.id|default('') }}"
  179. >
  180. </div>
  181. <div class="viewer-thumbnails">
  182. {% if selectedImages|length > 1 %}
  183. <div class="thumbnail-item" data-index="1">
  184. <img
  185. src="{{ selectedImages[1].media.cdnUrl|default(selectedImages[1].media.url|default('')) }}"
  186. alt="{{ selectedImages[1].media.title|default(cruise.name|default('Image croisière')) }}"
  187. data-gallery-category="{{ selectedImages[1].category }}"
  188. data-gallery-src="{{ selectedImages[1].media.cdnUrl|default(selectedImages[1].media.url|default('')) }}"
  189. data-gallery-media-id="{{ selectedImages[1].media.id|default('') }}"
  190. >
  191. </div>
  192. {% endif %}
  193. {% if selectedImages|length > 2 %}
  194. <div class="thumbnail-item" data-index="2">
  195. <img
  196. src="{{ selectedImages[2].media.cdnUrl|default(selectedImages[2].media.url|default('')) }}"
  197. alt="{{ selectedImages[2].media.title|default(cruise.name|default('Image croisière')) }}"
  198. data-gallery-category="{{ selectedImages[2].category }}"
  199. data-gallery-src="{{ selectedImages[2].media.cdnUrl|default(selectedImages[2].media.url|default('')) }}"
  200. data-gallery-media-id="{{ selectedImages[2].media.id|default('') }}"
  201. >
  202. </div>
  203. {% endif %}
  204. {% if selectedImages|length > 3 %}
  205. <div class="thumbnail-item thumbnail-item-third" data-index="3">
  206. <img
  207. src="{{ selectedImages[3].media.cdnUrl|default(selectedImages[3].media.url|default('')) }}"
  208. alt="{{ selectedImages[3].media.title|default(cruise.name|default('Image croisière')) }}"
  209. data-gallery-category="{{ selectedImages[3].category }}"
  210. data-gallery-src="{{ selectedImages[3].media.cdnUrl|default(selectedImages[3].media.url|default('')) }}"
  211. data-gallery-media-id="{{ selectedImages[3].media.id|default('') }}"
  212. >
  213. {% if selectedImages|length >= 5 %}
  214. <div class="button-div button-desktop">
  215. <button type="button" id="view-all-photos-btn">
  216. <div class="icon-image" data-svg-static>{{ getLucidIcon('grip-vertical') }}</div>
  217. <div>Voir toutes les photos ({{ totalGalleryImages|default(selectedImages|length) }})</div>
  218. </button>
  219. </div>
  220. {% endif %}
  221. </div>
  222. {% endif %}
  223. {% if selectedImages|length > 4 %}
  224. <div class="thumbnail-item" data-index="4">
  225. <img
  226. src="{{ selectedImages[4].media.cdnUrl|default(selectedImages[4].media.url|default('')) }}"
  227. alt="{{ selectedImages[4].media.title|default(cruise.name|default('Image croisière')) }}"
  228. data-gallery-category="{{ selectedImages[4].category }}"
  229. data-gallery-src="{{ selectedImages[4].media.cdnUrl|default(selectedImages[4].media.url|default('')) }}"
  230. data-gallery-media-id="{{ selectedImages[4].media.id|default('') }}"
  231. >
  232. </div>
  233. {% endif %}
  234. </div>
  235. </div>
  237. <div class="carousel viewer-carousel">
  238. <div class="elements">
  239. {% for image in selectedImages %}
  240. <div class="carousel-image{% if loop.index0 == 0 %} active{% endif %}">
  241. <img
  242. src="{{ image.media.cdnUrl|default(image.media.url|default('')) }}"
  243. alt="{{ image.media.title|default(getCruiseName(cruise)|default('Image croisière')) }}"
  244. data-gallery-category="{{ image.category }}"
  245. data-gallery-src="{{ image.media.cdnUrl|default(image.media.url|default('')) }}"
  246. data-gallery-media-id="{{ image.media.id|default('') }}"
  247. >
  248. </div>
  249. {% endfor %}
  250. </div>
  251. <div class="carousel-navigation">
  252. <div class="controls">
  253. <div class="dots-container"></div>
  254. <button class="left-arrow" aria-label="Image précédente">‹</button>
  255. <button class="right-arrow" aria-label="Image suivante">›</button>
  256. </div>
  257. </div>
  258. </div>
  260. {% if selectedImages|length >= 5 %}
  261. <div class="button-div button-mobile">
  262. <button type="button" id="view-all-photos-btn-mobile">
  263. <div class="icon-image" data-svg-static>{{ getLucidIcon('grip-vertical') }}</div>
  264. <div>Voir toutes les photos ({{ totalGalleryImages|default(selectedImages|length) }})</div>
  265. </button>
  266. </div>
  267. {% endif %}
  268. </div>
  269. {% endif %}