templates/_snippets/carousel.html.twig line 1

Open in your IDE?
  1. {% set filterColor = carousel.filterColor|default('#000') %}
  2. {% set filterColorOpacity = carousel.filterColorOpacity|default(0) %}
  4. {# Paramètres des vignettes #}
  5. {% set showThumbnails = carousel.showThumbnails|default(false) %}
  7. {% set height = carousel.height|default(400) %}
  8. {% set heightUnit = carousel.heightUnit|default('px') %}
  10. {% set bordersRadius = carousel.bordersRadius|default(0) ~ carousel.bordersRadiusUnit|default('px') %}
  12. {% set isSwitchSlideTime = carousel.isSwitchSlideTime|default(false) %}
  13. {% set switchSlideTime = (isSwitchSlideTime and carousel.switchSlideTime is not null and carousel.switchSlideTime != 0 ? carousel.switchSlideTime * 1000 : 5000) %}
  15. {% set carouselId = 'carousel-' ~ random() %}
  16. {% set slidesToUse = slidesByType['carousel1'] ?? [] %}
  17. {% set firstCarouselSlide = slidesToUse|first %}
  18. {% set carouselLcpPreloadHref = null %}
  19. {% if firstCarouselSlide %}
  20. {% set se0 = firstCarouselSlide.elements ?? [] %}
  21. {% set med0 = null %}
  22. {% if firstCarouselSlide.mediaUrl is not empty %}
  23. {% set med0 = {'url': firstCarouselSlide.mediaUrl, 'thumbnails': {'800x': firstCarouselSlide.mediaUrl, '1200x': firstCarouselSlide.mediaUrl}, 'isVideo': firstCarouselSlide.isVideo} %}
  24. {% elseif se0.media is defined and se0.media.id is defined %}
  25. {% set med0 = sulu_resolve_media(se0.media.id, app.request.locale) %}
  26. {% endif %}
  27. {% if med0 is not null %}
  28. {% set mUrl0 = med0.url %}
  29. {% set isVid0 = med0.isVideo is defined ? med0.isVideo : (mUrl0 matches '/\.mp4(\\?.*)?$/' or mUrl0 matches '/\.webm(\\?.*)?$/' or mUrl0 matches '/\.ogg(\\?.*)?$/') %}
  30. {% if not isVid0 %}
  31. {% set carouselLcpPreloadHref = sulu_media_url(med0, '1200x') %}
  32. {% else %}
  33. {% set poster0 = sulu_media_url(med0, '1200x') %}
  34. {% if poster0 and not (poster0 matches '/\.(mp4|webm|ogg)(\\?.*)?$/i') %}
  35. {% set carouselLcpPreloadHref = poster0 %}
  36. {% endif %}
  37. {% endif %}
  38. {% endif %}
  39. {% endif %}
  41. {% if true %}
  42. <div class="carousel-wrapper"
  43. data-type="carousel"
  44. id="{{ carouselId }}"
  45. data-carousel-id="{{ carouselId }}"
  46. data-carousel-options='{{ {
  47. "showDots": carousel.showDots|default(false),
  48. "showThumbnails": showThumbnails,
  49. "isAutoSlide": isSwitchSlideTime,
  50. "animation": {
  51. "contentDuration": 0.5,
  52. "contentDelay": 0.2,
  53. "mediaDuration": 0.55,
  54. "mediaDelay": 0
  55. }
  56. }|json_encode|raw }}'
  57. style="--switch-slide-time: {{ switchSlideTime }}ms;">
  58. {% if carouselLcpPreloadHref %}
  59. <link rel="preload" as="image" href="{{ carouselLcpPreloadHref }}" fetchpriority="high">
  60. {% endif %}
  61. <div class="carousel-container">
  62. <div class="carousel" data-observed>
  63. {% for slideEntity in slidesToUse %}
  64. {# ============================================================ #}
  65. {# RECONSTRUCTION DE LA STRUCTURE SLIDE DEPUIS L'ENTITÉ SLIDE #}
  66. {# ============================================================ #}
  68. {# Extraire les données de l'entité Slide #}
  69. {% set slideElements = slideEntity.elements ?? [] %}
  70. {% set slideStyles = slideEntity.styles ?? {} %}
  72. {# Gestion du média : mediaUrl de l'entité ou depuis elements #}
  73. {% set media = null %}
  74. {% if slideEntity.mediaUrl is not empty %}
  75. {% set media = {'url': slideEntity.mediaUrl, 'thumbnails': {'800x': slideEntity.mediaUrl, '1200x': slideEntity.mediaUrl}, 'isVideo': slideEntity.isVideo} %}
  76. {% elseif slideElements.media is defined and slideElements.media.id is defined %}
  77. {% set media = sulu_resolve_media(slideElements.media.id, app.request.locale) %}
  78. {% endif %}
  80. {% if media is not null %}
  81. {% set mediaUrl = sulu_media_original_url(media) %}
  82. {% set mediaPoster = sulu_media_url(media, '1200x') %}
  83. {% set mediaThumb800 = sulu_media_url(media, '800x') %}
  84. {% set mediaThumb1200 = sulu_media_url(media, '1200x') %}
  85. {% set mediaThumb1920 = sulu_media_url(media, '1600x') %}
  86. {# Utiliser isVideo depuis la base de données si disponible, sinon deviner depuis l'extension #}
  87. {% set isVideo = media.isVideo is defined ? media.isVideo : (mediaUrl matches '/\.mp4(\\?.*)?$/' or mediaUrl matches '/\.webm(\\?.*)?$/' or mediaUrl matches '/\.ogg(\\?.*)?$/') %}
  88. {% else %}
  89. {% set mediaUrl = '' %}
  90. {% set mediaPoster = '' %}
  91. {% set mediaThumb800 = null %}
  92. {% set mediaThumb1200 = null %}
  93. {% set mediaThumb1920 = null %}
  94. {% set isVideo = false %}
  95. {% endif %}
  97. {# Reconstruire la structure slide complète #}
  98. {% set slide = {
  99. 'media': media,
  100. 'title': slideEntity.subtitle ?? '',
  101. 'isColorGradient': slideStyles.isColorGradient ?? false,
  102. 'isCustomBackgroundFilter': slideStyles.isCustomBackgroundFilter ?? false,
  103. 'customBackgroundFilterColor': slideStyles.customBackgroundFilterColor ?? '#000000',
  104. 'customBackgroundFilterOpacity': slideStyles.customBackgroundFilterOpacity ?? 40,
  105. 'gradientOrientation': slideStyles.gradientOrientation ?? 'leftRight',
  106. 'color1': slideStyles.color1 ?? '#fff',
  107. 'color1Opacity': slideStyles.color1Opacity ?? 100,
  108. 'color2': slideStyles.color2 ?? '#000',
  109. 'color2Opacity': slideStyles.color2Opacity ?? 100,
  110. 'isCommonCompanySelector': slideEntity.companyId is not empty,
  111. 'CommonCompanySelector': slideEntity.companyId ?? '',
  112. 'companyCustomLogo': slideElements.companyCustomLogo ?? null,
  113. 'isDestinationSelector': false,
  114. 'destinationSelector': '',
  115. 'destinationCustomName': '',
  116. 'contents': slideElements is iterable ? slideElements : [],
  117. 'isNoCustom': false,
  118. 'isCustomDuration': false,
  119. 'customDuration': '',
  120. 'isCustomPrice': false,
  121. 'customPrice': '',
  122. 'advicedDuration': slideEntity.subtitle ?? '',
  123. 'advicedPeriod': '',
  124. 'bonusTexts': []
  125. } %}
  127. <div class="carousel-slide">
  128. {# Media #}
  129. {% if slide.isColorGradient %}
  130. {% set gradientDirections = {
  131. 'leftRight': 'to right',
  132. 'rightLeft': 'to left',
  133. 'topBottom': 'to bottom',
  134. 'bottomTop': 'to top',
  135. 'topLeftBottomRight': 'to bottom right',
  136. 'bottomLeftTopRight': 'to top right',
  137. 'topRightBottomLeft': 'to bottom left',
  138. 'bottomRightTopLeft': 'to top left'
  139. } %}
  140. {% set gradientDirection = gradientDirections[slide.gradientOrientation|default('leftRight')] %}
  141. <div class="carousel-color-gradient carousel-media"
  142. style="background: linear-gradient({{ gradientDirection }}, {{ slide.color1|default('#000') }}, {{ slide.color2|default('#fff') }});">
  143. </div>
  144. {% else %}
  145. {% if isVideo %}
  146. <video class="carousel-media"
  147. autoplay muted loop playsinline
  148. preload="metadata"
  149. poster="{{ mediaPoster }}"
  150. {% if loop.first %}fetchpriority="high"{% endif %}>
  151. <source src="{{ mediaUrl }}" type="video/mp4">
  152. <p>{{ 'carousel.destination.video_not_supported'|trans }}</p>
  153. </video>
  154. {% else %}
  155. {% set isCarouselLcpImage = loop.first and mediaPoster is not empty %}
  156. <img class="carousel-media{{ isCarouselLcpImage ? ' carousel-media--lcp' : '' }}"
  157. src="{{ mediaPoster }}"
  158. {% if mediaThumb800 and mediaThumb1200 and mediaThumb800 != mediaThumb1200 %}
  159. srcset="{{ mediaThumb800 }} 800w{% if mediaThumb1200 %}, {{ mediaThumb1200 }} 1200w{% endif %}{% if mediaThumb1920 %}, {{ mediaThumb1920 }} 1920w{% endif %}"
  160. sizes="100vw"
  161. {% elseif mediaThumb800 %}
  162. srcset="{{ mediaThumb800 }} 800w"
  163. sizes="100vw"
  164. {% endif %}
  165. alt="{{ slide.title|default('')|striptags|e('html_attr') }}"
  166. decoding="async"
  167. {% if isCarouselLcpImage %}
  168. fetchpriority="high"
  169. {% else %}
  170. loading="lazy" fetchpriority="low"
  171. {% endif %}>
  172. {% endif %}
  173. {% endif %}
  175. {% if carousel.filterColor and not slide.isColorGradient %}
  176. <div class="carousel-overlay"
  177. style="background-color: {{ filterColor }};
  178. opacity: {{ filterColorOpacity ?? 0.4 }};">
  179. </div>
  180. {% endif %}
  182. <div class="carousel-content">
  183. <div class="line">
  184. {% if slide.isCommonCompanySelector and slide.CommonCompanySelector is not empty %}
  185. <div class="content-company-logo">
  186. {% if slide.companyCustomLogo is not empty and slide.companyCustomLogo.url is defined %}
  187. <img src="{{ slide.companyCustomLogo.url }}" alt="{{ 'common.company_logo'|trans }}">
  188. {% else %}
  189. {% set companyLogo = get_company_logo_by_id(slide.CommonCompanySelector) %}
  190. {% if companyLogo is not empty %}
  191. <img src="{{ companyLogo }}" alt="{{ 'common.company_logo'|trans }}">
  192. {% endif %}
  193. {% endif %}
  194. </div>
  195. {% endif %}
  197. {% if slide.title is defined and slide.title is not empty %}<div class="carousel-title">{{ slide.title|replace_slide_offer_variables(slideEntity.offerId)|raw }}</div>{% endif %}
  199. {% for element in slide.contents %}
  200. {# Type : text - Afficher un texte simple #}
  201. {% if element.type == 'text' %}
  202. <div class="carousel-text">{{ element.content|replace_slide_offer_variables(slideEntity.offerId)|raw }}</div>
  204. {# Type : button - Afficher un bouton avec style comme classe CSS #}
  205. {% elseif element.type == 'button' %}
  206. {% set buttonText = (element.text ?? '')|replace_slide_offer_variables(slideEntity.offerId) %}
  207. {% set buttonUrl = element.url ?? '#' %}
  208. {% set buttonStyle = element.style ?? 'style1' %}
  209. {% set buttonSize = element.size|default('medium') %}
  210. {% set hasArrow = element.hasArrow|default(false) %}
  211. {% set hasNewTab = element.hasNewTab|default(false) %}
  212. <div class="carousel-button-wrapper">
  213. <a href="{{ buttonUrl }}"
  214. class="btn {{ buttonStyle }} {{ buttonSize }} reverse_color"
  215. {% if hasNewTab %}target="_blank" rel="noopener"{% endif %}>
  216. {{ buttonText }}
  217. {% if hasArrow %}{{ getLucidIcon('arrow-right') }}{% endif %}
  218. </a>
  219. </div>
  221. {# Type : image - Afficher une image #}
  222. {% elseif element.type == 'image' %}
  223. <div class="carousel-image">
  224. <img src="{{ sulu_media_url(element.content, '1200x') }}"
  225. alt="{{ element.alt ?? '' }}"
  226. loading="lazy"
  227. style="{% if element.width is defined %}width: {{ element.width }}px;{% endif %}{% if element.height is defined %} height: {{ element.height }}px;{% endif %}">
  228. </div>
  229. {% endif %}
  230. {% endfor %}
  232. {% if slide.tags is defined and slide.tags is not empty %}
  233. <div class="content-tags">
  234. {% for tag in slide.tags %}
  235. <div class="content-tag">{{ tag.tag }}</div>
  236. {% endfor %}
  237. </div>
  238. {% endif %}
  240. </div>
  241. </div>
  242. </div>
  243. {% endfor %}
  244. </div>
  245. </div>
  247. {# Navigation avec dots (style blog) #}
  248. <div class="carousel-navigation">
  249. <span class="carousel-nav-icon carousel-nav-icon--prev" hidden>{{ getLucidIcon('chevron-left')|raw }}</span>
  250. <span class="carousel-nav-icon carousel-nav-icon--next" hidden>{{ getLucidIcon('chevron-right')|raw }}</span>
  251. </div>
  253. {# Vignettes #}
  254. {% if showThumbnails %}
  255. {% set inactiveFilter = carousel.thumbnailInactiveFilter|default('grayscale') %}
  256. <div class="carousel-thumbnails" data-carousel-id="{{ carouselId }}">
  257. {% for slideEntity in slidesToUse %}
  258. {# Utiliser les données de l'entité Slide #}
  259. {% set slideElements = slideEntity.elements ?? [] %}
  260. {% set media = null %}
  261. {% if slideEntity.mediaUrl is not empty %}
  262. {% set media = {'url': slideEntity.mediaUrl, 'thumbnails': {'200x': slideEntity.mediaUrl, '400x': slideEntity.mediaUrl}, 'isVideo': slideEntity.isVideo} %}
  263. {% elseif slideElements.media is defined and slideElements.media.id is defined %}
  264. {% set media = sulu_resolve_media(slideElements.media.id, app.request.locale) %}
  265. {% endif %}
  267. {% if media is not null %}
  268. {% set mediaUrl = sulu_media_original_url(media) %}
  269. {% set isVideo = media.isVideo is defined ? media.isVideo : (mediaUrl matches '/\.mp4(\\?.*)?$/' or mediaUrl matches '/\.webm(\\?.*)?$/' or mediaUrl matches '/\.ogg(\\?.*)?$/') %}
  270. {% else %}
  271. {% set mediaUrl = '' %}
  272. {% set isVideo = false %}
  273. {% endif %}
  275. {# Définir le nom de la destination pour cette vignette #}
  276. {% set destinationName = '' %}
  278. {% if isVideo %}
  279. {# Pour les vidéos, utiliser un canvas pour capturer le premier frame #}
  280. <div class="thumbnail {% if loop.first %}active{% endif %} filter-{{ inactiveFilter }}"
  281. data-index="{{ loop.index0 }}"
  282. data-carousel-id="{{ carouselId }}"
  283. data-video-url="{{ mediaUrl }}">
  284. <canvas class="video-thumbnail-canvas" width="{{ carousel.thumbnailWidth|default(120) }}" height="{{ carousel.thumbnailHeight|default(80) }}"></canvas>
  285. <div class="video-play-icon">▶</div>
  286. {% else %}
  287. {# Pour les images, utiliser les thumbnails normaux #}
  288. {% set mediaPoster = sulu_media_url(media, '200x') %}
  289. <div class="thumbnail {% if loop.first %}active{% endif %} filter-{{ inactiveFilter }}"
  290. data-index="{{ loop.index0 }}"
  291. data-carousel-id="{{ carouselId }}">
  292. <img src="{{ mediaPoster }}"
  293. alt="{{ media.title|default('Thumbnail ' ~ loop.index) }}"
  294. loading="lazy">
  295. {% endif %}
  296. {# Afficher le nom de la destination #}
  297. {% if destinationName is not empty %}
  298. <div class="thumbnail-label">
  299. <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
  300. <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
  301. </svg>
  302. <span>{{ destinationName }}</span>
  303. </div>
  304. {% endif %}
  305. </div>
  306. {% endfor %}
  307. </div>
  308. {% endif %}
  309. </div>
  310. {% endif %}
  312. {# Le JavaScript du carousel est géré par snippets/hero-section.js (même système que hero_section) #}
  313. {# La navigation avec dots est gérée par snippets/carousel.js #}
  315. <style>
  316. #{{ carouselId }} {
  317. /* Général */
  318. --borders-radius: {{ carousel.bordersRadius|default(0) ~ carousel.bordersRadiusUnit|default('px') }};
  319. --text-width: {{ carousel.textWidth|default(100) ~ carousel.textWidthUnit|default('%') }};
  320. --height: {{ carousel.height|default(400) ~ carousel.heightUnit|default('px') }};
  321. --gap-elements: {{ carousel.gapElements|default(12) ~ carousel.gapElementsUnit|default('px') }};
  322. --carousel-padding: {{ carousel.paddingTopBottom|default(0) ~ carousel.paddingUnit|default('px') ~ ' ' ~ carousel.paddingLeftRight|default(0) ~ carousel.paddingUnit|default('px') }};
  323. --carousel-padding-top: {{ carousel.paddingTopBottom|default(0) ~ carousel.paddingUnit|default('px') }};
  324. --carousel-padding-bottom: {{ carousel.paddingTopBottom|default(0) ~ carousel.paddingUnit|default('px') }};
  325. --carousel-padding-left: {{ carousel.paddingLeftRight|default(0) ~ carousel.paddingUnit|default('px') }};
  326. --carousel-padding-right: {{ carousel.paddingLeftRight|default(0) ~ carousel.paddingUnit|default('px') }};
  328. /* Vignettes */
  329. --thumbnails-gap: {{ carousel.thumbnailGap|default(10) }}px;
  330. --thumbnails-width: {{ carousel.thumbnailWidth|default(120) }}px;
  331. --thumbnails-height: {{ carousel.thumbnailHeight|default(80) }}px;
  332. --thumbnails-border-radius: {{ carousel.thumbnailBorderRadius|default(8) }}px;
  333. --thumbnail-active-border: {{ carousel.thumbnailActiveBorderWidth|default(3) ~ 'px solid ' ~ carousel.thumbnailActiveBorderColor|default('#8B5CF6') }};
  334. --thumbnail-border: {{ carousel.thumbnailActiveBorderWidth|default(3) ~ 'px solid transparent' }};
  336. /* Vignettes responsive */
  337. --responsive-thumbnails-gap: {{ carousel.thumbnailGap|default(10) * 0.8 }}px;
  338. --responsive-thumbnails-width: {{ carousel.thumbnailWidth|default(120) * 0.9 }}px;
  339. --responsive-thumbnails-height: {{ carousel.thumbnailHeight|default(80) * 0.9 }}px;
  341. /* Filtres des vignettes inactives */
  342. --thumbnail-filter-intensity: {{ carousel.thumbnailInactiveFilterIntensity|default(50) }};
  343. --thumbnail-overlay-color: {{ carousel.thumbnailInactiveOverlayColor|default('#000000') }};
  345. /* Elements textuels des vignettes */
  346. --thumbnail-text-color: {{ carousel.thumbnailTextColor|default('#fff') }};
  347. --thumbnail-text-size: {{ carousel.thumbnailTextSize|default(12) ~ carousel.thumbnailTextSizeUnit|default('px') }};
  348. --thumbnail-text-weight: {{ carousel.thumbnailTextWeight|default(600) }};
  349. --thumbnail-text-align: {{ carousel.thumbnailTextAlign|default('left') }};
  350. --thumbnail-text-border-radius: {{ carousel.thumbnailTextBorderRadius|default(8) ~ carousel.thumbnailTextBorderRadiusUnit|default('px') }};
  352. /* Fond des étiquettes via ::after */
  353. --thumbnail-label-background: {{ carousel.thumbnailLabelBackground|default(carousel.thumbnailTextBackground|default('#000000')) }};
  354. --thumbnail-label-background-opacity: {{ carousel.thumbnailLabelBackgroundOpacity|default(carousel.thumbnailTextBackgroundOpacity|default(70)) }};
  355. --thumbnail-label-border-radius: {{ carousel.thumbnailTextBorderRadius|default(20) ~ carousel.thumbnailTextBorderRadiusUnit|default('px') }};
  357. /* Bouton */
  358. --main-color-button: {{ carousel.mainColorButton|default('#004461') }};
  359. --secondary-color-button: {{ carousel.secondaryColorButton|default('#fff') }};
  360. --borders-radius-button: {{ carousel.bordersRadiusButton|default(8) ~ carousel.bordersRadiusButtonUnit|default('px') }};
  361. --padding-button: {{ carousel.paddingSizeTopBottomButton|default(4) ~ carousel.paddingButtonUnit|default('px') ~ ' ' ~ carousel.paddingSizeLeftRightButton|default(4) ~ carousel.paddingButtonUnit|default('px') }};
  363. /* Bouton dynamique */
  364. --dynamic-button-text-color: {{ carousel.dynamicButtonTextColor|default('#fff') }};
  365. --dynamic-button-background: {{ carousel.dynamicButtonBackground|default('#004461') }};
  366. --dynamic-button-price-color: {{ carousel.dynamicButtonPriceColor|default('#000') }};
  367. --dynamic-button-border-radius: {{ carousel.dynamicButtonBorderRadius|default(8) ~ carousel.dynamicButtonBorderRadiusUnit|default('px') }};
  368. --dynamic-button-padding: {{ carousel.dynamicButtonPaddingTopBottom|default(4) ~ carousel.dynamicButtonPaddingTopBottomUnit|default('px') ~ ' ' ~ carousel.dynamicButtonPaddingRightLeft|default(4) ~ carousel.dynamicButtonPaddingRightLeftUnit|default('px') }};
  369. --dynamic-button-border: {{ carousel.dynamicButtonBorderSize|default(1) ~ carousel.dynamicButtonBorderSizeUnit|default('px') ~ ' solid ' ~ carousel.dynamicButtonBorderColor|default('#fff') }};
  371. /* Tags */
  372. --tags-color: {{ carousel.tagsColor|default('#000') }};
  373. --tags-font-weight: {{ carousel.tagsFontWeight|default(600) }};
  374. --tags-padding: {{ carousel.tagsPaddingTopBottom|default(3) ~ carousel.tagsPaddingTopBottomUnit|default('px') }} {{ carousel.tagsPaddingRightLeft|default(6) ~ carousel.tagsPaddingRightLeftUnit|default('px') }};
  375. --tags-border-radius: {{ carousel.tagsBorderRadius|default(12) ~ carousel.tagsBorderRadiusUnit|default('px') }};
  376. --tags-font-size: {{ carousel.tagsFontSize|default(10) ~ carousel.tagsFontSizeUnit|default('px') }};
  377. --tags-background-color: {{ carousel.tagsBackgroundColor|default('rgba(217, 217, 217, 0.20)') }};
  379. /* Dots */
  380. --dot-color-1: {{ carousel.dotColor1|default('#004461') }};
  381. --dot-color-2: {{ carousel.dotColor2|default('#00AAD7') }};
  383. {% set logoWidthUnit = carousel.logoWidth is defined and carousel.logoWidth is not empty or carousel.logoHeight is defined and carousel.logoHeight is not empty ? carousel.logoUnit|default('px') : '' %}
  384. {% set logoHeightUnit = carousel.logoHeight is defined and carousel.logoHeight is not empty ? carousel.logoUnit|default('px') : '' %}
  386. /* Dimensions logo compagnie */
  387. --logo-width: {{ carousel.logoWidth|default('auto') ~ logoWidthUnit }};
  388. --logo-height: {{ carousel.logoHeight|default('auto') ~ logoHeightUnit }};
  389. }
  390. </style>