Symfony Profiler

{% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
{% set carouselDestinations = effectiveSectionSettings|merge(carouselDestinations) %}
{% set isArrows = carouselDestinations.isArrows == true ? 1 : 0 %}
{% set arrowsColor = carouselDestinations.arrowsColor|default('#fff') %}
{% set filterColor = carouselDestinations.filterColor|default('#000') %}
{% set filterColorOpacity = carouselDestinations.filterColorOpacity|default(0) %}
{% set padding = carouselDestinations.padding|default(25) %}
{% set paddingUnit = carouselDestinations.paddingUnit|default('px') %}
{# Paramètres des vignettes #}
{% set showThumbnails = carouselDestinations.showThumbnails|default(false) %}
{% set height = carouselDestinations.height|default(400) %}
{% set heightUnit = carouselDestinations.heightUnit|default('px') %}
{% set bordersRadius = carouselDestinations.bordersRadius|default(0) ~ carouselDestinations.bordersRadiusUnit|default('px') %}
{% set isSwitchSlideTime = carouselDestinations.isSwitchSlideTime|default(false) %}
{% set switchSlideTime = (isSwitchSlideTime and carouselDestinations.switchSlideTime is not null and carouselDestinations.switchSlideTime != 0 ? carouselDestinations.switchSlideTime * 1000 : 5000) %}
{% set sectionId = 'carousel-destinations-section-' ~ random() %}
{% set carouselId = 'carousel-' ~ random() %}
{% set sectionTitle = attribute(carouselDestinations, 'titleTextSection')|default('') %}
{% set sectionPictogram = attribute(carouselDestinations, 'pictogramTitleSection')|default('') %}
{% set sectionTitleTag = attribute(carouselDestinations, 'typeTitleSection')|default('h2') %}
{% set firstDestBlock = carouselDestinations.blocks|default([])|first %}
{% set destLcpPreloadHref = null %}
{% if firstDestBlock %}
{% set firstDestMedia = firstDestBlock.media|default(null) %}
{% if firstDestMedia and firstDestMedia.id is defined and (firstDestMedia.url is not defined or firstDestMedia.thumbnails is not defined) %}
{% set firstDestMedia = sulu_resolve_media(firstDestMedia.id, app.request.locale) %}
{% endif %}
{% if firstDestMedia and firstDestMedia.url is defined %}
{% set du0 = firstDestMedia.url %}
{% set dv0 = du0 matches '/\.mp4(\\?.*)?$/' %}
{% if not dv0 %}
{% set destLcpPreloadHref = sulu_media_url(firstDestMedia, '1200x') %}
{% else %}
{% set pdest0 = sulu_media_url(firstDestMedia, '1200x') %}
{% if pdest0 and not (pdest0 matches '/\.(mp4|webm|ogg)(\\?.*)?$/i') %}
{% set destLcpPreloadHref = pdest0 %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if true %}
{% include '_snippets/sections/tags_section_settings.html.twig' with {
'content': carouselDestinations,
'id': sectionId,
} %}
<section id="{{ sectionId }}" class="carousel-destinations">
{% if sectionTitle is not empty or sectionPictogram is not empty %}
<div class="carousel-destinations-head">
<{{ sectionTitleTag }}>
{% if sectionPictogram is not empty %}
<div class="icon">{{ getLucidIcon(sectionPictogram) }}</div>
{% endif %}
{{ sectionTitle|raw }}
</{{ sectionTitleTag }}>
</div>
{% endif %}
<div class="carousel-wrapper"
data-type="contentOnMedia"
id="{{ carouselId }}"
data-carousel-id="{{ carouselId }}"
data-carousel-options='{{ {
"showDots": carouselDestinations.showDots|default(false),
"showThumbnails": showThumbnails,
"isAutoSlide": isSwitchSlideTime,
"animation": {
"contentDuration": 0.5,
"contentDelay": 0.2,
"mediaDuration": 0.55,
"mediaDelay": 0
}
}|json_encode|raw }}'
style="--switch-slide-time: {{ switchSlideTime }}ms;">
{% if destLcpPreloadHref %}
<link rel="preload" as="image" href="{{ destLcpPreloadHref }}" fetchpriority="high">
{% endif %}
<div class="carousel-container">
<div class="carousel" data-observed>
{% for slide in carouselDestinations.blocks %}
{% set slideMedia = slide.media|default(null) %}
{% if slideMedia and slideMedia.id is defined and (slideMedia.url is not defined or slideMedia.thumbnails is not defined) %}
{% set slideMedia = sulu_resolve_media(slideMedia.id, app.request.locale) %}
{% endif %}
{# Définir le nom de la destination au début du slide #}
{% if slide.destinationCustomName is not empty %}
{% set destinationName = slide.destinationCustomName %}
{% elseif slide.destinationSelector is not empty %}
{% set destinationData = getDestinationById(slide.destinationSelector) %}
{% set destinationName = destinationData.name|default('') %}
{% else %}
{% set destinationName = '' %}
{% endif %}
{% if slide.isColorGradient or (slideMedia and slideMedia.url is defined) %}
{% if slideMedia and slideMedia.url is defined %}
{% set mediaUrl = sulu_media_original_url(slideMedia) %}
{% set mediaPoster = sulu_media_url(slideMedia, '1200x') %}
{% set mediaThumb800 = sulu_media_url(slideMedia, '800x') %}
{% set mediaThumb1200 = sulu_media_url(slideMedia, '1200x') %}
{% set mediaThumb1600 = sulu_media_url(slideMedia, '1600x') %}
{% set isVideo = slideMedia.isVideo is defined ? slideMedia.isVideo : (mediaUrl matches '/\.mp4(\\?.*)?$/' or mediaUrl matches '/\.webm(\\?.*)?$/' or mediaUrl matches '/\.ogg(\\?.*)?$/') %}
{% else %}
{% set mediaUrl = '' %}
{% set mediaPoster = '' %}
{% set mediaThumb800 = null %}
{% set mediaThumb1200 = null %}
{% set mediaThumb1600 = null %}
{% set isVideo = false %}
{% endif %}
<div class="carousel-slide {% if isArrows == 1 %}has-arrows{% endif %}">
{# Media #}
{% if slide.isColorGradient %}
{% set gradientDirections = {
'leftRight': 'to right',
'rightLeft': 'to left',
'topBottom': 'to bottom',
'bottomTop': 'to top',
'topLeftBottomRight': 'to bottom right',
'bottomLeftTopRight': 'to top right',
'topRightBottomLeft': 'to bottom left',
'bottomRightTopLeft': 'to top left'
} %}
{% set gradientDirection = gradientDirections[slide.gradientOrientation|default('leftRight')] %}
<div class="carousel-color-gradient carousel-media"
style="background: linear-gradient({{ gradientDirection }}, {{ slide.color1|default('#000') }}, {{ slide.color2|default('#fff') }});">
</div>
{% else %}
{% if isVideo %}
<video class="carousel-media"
autoplay muted loop playsinline
preload="metadata"
poster="{{ mediaPoster }}"
{% if loop.first %}fetchpriority="high"{% endif %}>
<source src="{{ mediaUrl }}" type="video/mp4">
<p>{{ 'carousel.destination.video_not_supported'|trans }}</p>
</video>
{% else %}
{% set isDestLcpImage = loop.first and mediaPoster is not empty %}
<img class="carousel-media{{ isDestLcpImage ? ' carousel-media--lcp' : '' }}"
src="{{ mediaPoster }}"
{% if mediaThumb800 and mediaThumb1200 and mediaThumb800 != mediaThumb1200 %}
srcset="{{ mediaThumb800 }} 800w{% if mediaThumb1200 %}, {{ mediaThumb1200 }} 1200w{% endif %}{% if mediaThumb1600 %}, {{ mediaThumb1600 }} 1600w{% endif %}"
sizes="100vw"
{% elseif mediaThumb800 %}
srcset="{{ mediaThumb800 }} 800w"
sizes="100vw"
{% endif %}
alt="{{ destinationName|default('')|e('html_attr') }}"
decoding="async"
{% if isDestLcpImage %}
fetchpriority="high"
{% else %}
loading="lazy" fetchpriority="low"
{% endif %}>
{% endif %}
{% endif %}
{% if carouselDestinations.filterColor and not slide.isColorGradient %}
<div class="carousel-overlay"
style="background-color: {{ filterColor }};
opacity: {{ filterColorOpacity ?? 0.4 }};">
</div>
{% endif %}
<div class="carousel-content">
<div class="line">
{# Affichage du nom de la destination dans le contenu #}
{% if destinationName is not empty %}
<div class="content-destination-label">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<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"/>
</svg>
<span>{{ destinationName }}</span>
</div>
{% endif %}
{% for content in slide.contents %}
{% if content.type == 'text' %}
<div class="carousel-text">{{ content.contentText|raw }}</div>
{% elseif content.type == 'button' %}
<div class="carousel-button-wrapper text-{{ content.alignmentButton }}">
{% if content.isInternalLink %}
<sulu-link href="#"
data-id="{{ content.internalLink.id }}"
data-type="{{ content.internalLink._type }}"
class="carousel-button">
{{ content.textButton }} {{ getLucidIcon('arrow-right') }}
</sulu-link>
{% else %}
<a href="{{ content.externalLink }}"
class="carousel-button"
target="_blank"
rel="noopener">
{{ content.textButton }} {{ getLucidIcon('arrow-right') }}
</a>
{% endif %}
</div>
{% elseif content.type == 'image' %}
<div class="carousel-image">
{% set contentImage = content.contentImage|default(null) %}
{% set imageUrl = sulu_media_url(contentImage, '1200x') %}
<img src="{{ imageUrl }}"
alt="{{ content.altImage|default(contentImage ? contentImage.title|default('') : '') }}"
loading="lazy"
{% if content.widthImage is defined and content.widthImage is not null %}
style="width: {{ content.widthImage ~ (content.widthImageUnit)|default('px') }};"
{% endif %}>
</div>
{% endif %}
{% endfor %}
{% if slide.advicedDuration is defined or slide.advicedPeriod is defined %}
<div class="content-adviced">
{% if slide.advicedDuration is defined and slide.advicedDuration is not empty %}
<div class="content-adviced-duration">
{{ getLucidIcon('clock') }}
{{ 'carousel.destination.recommended_duration'|trans }} : {{ slide.advicedDuration }}
</div>
{% endif %}
{% if slide.advicedPeriod is defined and slide.advicedPeriod is not empty %}
<div class="content-adviced-period">
{{ getLucidIcon('calendar') }}
{{ 'carousel.destination.recommended_period'|trans }} : {{ slide.advicedPeriod }}
</div>
{% endif %}
</div>
{% endif %}
{% if slide.tags is defined and slide.tags is not empty %}
<div class="content-tags">
{% for tag in slide.tags %}
<div class="content-tag">{{ tag.tag }}</div>
{% endfor %}
</div>
{% endif %}
<div class="content-dynamic-button">
<a href="http://cms.croisiland.localhost/fr/nouveau-moteur-de-recherche?destination={{ slide.destinationSelector }}" class="dynamic-button">{{ carouselDestinations.dynamicButtonText|default('carousel.destination.discover'|trans) }}
{% if slide.isCallPriceDisplayed and slide.destinationSelector is not empty %}
{% set destinationData = getDestinationById(slide.destinationSelector) %}
{# {% set destinationPrice = getDestinationCompaniesBestPrice(destinationData) %} #}
{% set destinationPrice = null %}
{% if destinationPrice and destinationPrice.amount is defined %}
<span class="price">{{ 'common.from'|trans|lower }} {{ destinationPrice.amount|number_format(0, ',', ' ') }}€</span>
{% else %}
<span class="price">{{ 'common.from'|trans|lower }} 1 400€</span>
{% endif %}
{% endif %} {{ getLucidIcon('arrow-right') }}</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{# Dots #}
{% if carouselDestinations.showDots|default(false) %}
<div class="carousel-dots">
{% for slide in carouselDestinations.blocks %}
<span class="dot {% if loop.first %}active{% endif %}"
data-index="{{ loop.index0 }}"
data-carousel-id="{{ carouselId }}"></span>
{% endfor %}
</div>
{% endif %}
{# Vignettes #}
{% if showThumbnails %}
{% set inactiveFilter = carouselDestinations.thumbnailInactiveFilter|default('grayscale') %}
<div class="carousel-thumbnails" data-carousel-id="{{ carouselId }}">
{% for slide in carouselDestinations.blocks %}
{% set slideMedia = slide.media|default(null) %}
{% if slideMedia and slideMedia.id is defined and (slideMedia.url is not defined or slideMedia.thumbnails is not defined) %}
{% set slideMedia = sulu_resolve_media(slideMedia.id, app.request.locale) %}
{% endif %}
{% if slideMedia and slideMedia.url is defined %}
{% set mediaUrl = sulu_media_original_url(slideMedia) %}
{% set destinationId = slide.destinationSelector|default(null) %}
{% set destination = getDestinationById(destinationId) %}
{% set isVideo = mediaUrl matches '/\.mp4(\\?.*)?$/' %}
{# Définir le nom de la destination pour cette vignette #}
{% if slide.destinationCustomName is not empty %}
{% set destinationName = slide.destinationCustomName %}
{% elseif slide.destinationSelector is not empty %}
{% set destinationData = getDestinationById(slide.destinationSelector) %}
{% set destinationName = destinationData.name|default('') %}
{% else %}
{% set destinationName = '' %}
{% endif %}
{% if isVideo %}
{# Pour les vidéos, utiliser un canvas pour capturer le premier frame #}
<div class="thumbnail {% if loop.first %}active{% endif %} filter-{{ inactiveFilter }}"
data-index="{{ loop.index0 }}"
data-carousel-id="{{ carouselId }}"
data-video-url="{{ mediaUrl }}">
<canvas class="video-thumbnail-canvas" width="{{ carouselDestinations.thumbnailWidth|default(120) }}" height="{{ carouselDestinations.thumbnailHeight|default(80) }}"></canvas>
<div class="video-play-icon">▶</div>
{% else %}
{# Pour les images, utiliser les thumbnails normaux #}
{% set mediaPoster = sulu_media_url(slideMedia, '200x') %}
<div class="thumbnail {% if loop.first %}active{% endif %} filter-{{ inactiveFilter }}"
data-index="{{ loop.index0 }}"
data-carousel-id="{{ carouselId }}">
<img src="{{ mediaPoster }}"
alt="{{ slideMedia.title|default('Thumbnail ' ~ loop.index) }}"
loading="lazy">
{% endif %}
{# Afficher le nom de la destination #}
{% if destinationName is not empty %}
<div class="thumbnail-label">
{{ getLucidIcon('map-pin', {width: '12', height: '12'}) }}
<span>{{ destinationName }}</span>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{# Flèches #}
{% if isArrows == 1 %}
<div class="carousel-arrows">
<button class="carousel-arrow left" aria-label="Précédent" data-carousel-id="{{ carouselId }}">{{ getLucidIcon('chevron-left') }}</button>
<button class="carousel-arrow right" aria-label="Suivant" data-carousel-id="{{ carouselId }}">{{ getLucidIcon('chevron-right') }}</button>
</div>
{% endif %}
</div>
</section>
{% endif %}
{# Le JavaScript du carousel est géré par snippets/hero-section.js (même système que hero_section) #}
<style>
#{{ carouselId }} {
/* Général */
--borders-radius: {{ carouselDestinations.bordersRadius|default(0) ~ carouselDestinations.bordersRadiusUnit|default('px') }};
--text-width: {{ carouselDestinations.textWidth|default(100) ~ carouselDestinations.textWidthUnit|default('%') }};
--height: {{ carouselDestinations.height|default(400) ~ carouselDestinations.heightUnit|default('px') }};
--gap-elements: {{ carouselDestinations.gapElements|default(12) ~ carouselDestinations.gapElementsUnit|default('px') }};
--carousel-padding: {{ padding ~ paddingUnit }};
/* Flèches */
--arrows-color: {{ arrowsColor }};
--arrow-dimensions: {{ carouselDestinations.arrowDimensions|default(20) ~ carouselDestinations.arrowDimensionsUnit|default('px') }};
/* Vignettes */
--thumbnails-gap: {{ carouselDestinations.thumbnailGap|default(10) }}px;
--thumbnails-width: {{ carouselDestinations.thumbnailWidth|default(120) }}px;
--thumbnails-height: {{ carouselDestinations.thumbnailHeight|default(80) }}px;
--thumbnails-border-radius: {{ carouselDestinations.thumbnailBorderRadius|default(8) }}px;
--thumbnail-active-border: {{ carouselDestinations.thumbnailActiveBorderWidth|default(3) ~ 'px solid ' ~ carouselDestinations.thumbnailActiveBorderColor|default('#8B5CF6') }};
--thumbnail-border: {{ carouselDestinations.thumbnailActiveBorderWidth|default(3) ~ 'px solid transparent' }};
/* Vignettes responsive */
--responsive-thumbnails-gap: {{ carouselDestinations.thumbnailGap|default(10) * 0.8 }}px;
--responsive-thumbnails-width: {{ carouselDestinations.thumbnailWidth|default(120) * 0.9 }}px;
--responsive-thumbnails-height: {{ carouselDestinations.thumbnailHeight|default(80) * 0.9 }}px;
/* Filtres des vignettes inactives */
--thumbnail-filter-intensity: {{ carouselDestinations.thumbnailInactiveFilterIntensity|default(50) }};
--thumbnail-overlay-color: {{ carouselDestinations.thumbnailInactiveOverlayColor|default('#000000') }};
/* Elements textuels des vignettes */
--thumbnail-text-color: {{ carouselDestinations.thumbnailTextColor|default('#fff') }};
--thumbnail-text-size: {{ carouselDestinations.thumbnailTextSize|default(12) ~ carouselDestinations.thumbnailTextSizeUnit|default('px') }};
--thumbnail-text-weight: {{ carouselDestinations.thumbnailTextWeight|default(600) }};
--thumbnail-text-align: {{ carouselDestinations.thumbnailTextAlign|default('left') }};
--thumbnail-text-border-radius: {{ carouselDestinations.thumbnailTextBorderRadius|default(8) ~ carouselDestinations.thumbnailTextBorderRadiusUnit|default('px') }};
/* Fond des étiquettes via ::after */
--thumbnail-label-background: {{ carouselDestinations.thumbnailLabelBackground|default(carouselDestinations.thumbnailTextBackground|default('#000000')) }};
--thumbnail-label-background-opacity: {{ carouselDestinations.thumbnailLabelBackgroundOpacity|default(carouselDestinations.thumbnailTextBackgroundOpacity|default(70)) }};
--thumbnail-label-border-radius: {{ carouselDestinations.thumbnailTextBorderRadius|default(20) ~ carouselDestinations.thumbnailTextBorderRadiusUnit|default('px') }};
/* Dots */
--dots-color-1: {{ carouselDestinations.dotColor1|default('#004461') }};
--dots-color-2: {{ carouselDestinations.dotColor2|default('#00AAD7') }};
/* Bouton */
--main-color-button: {{ carouselDestinations.mainColorButton|default('#004461') }};
--secondary-color-button: {{ carouselDestinations.secondaryColorButton|default('#fff') }};
--borders-radius-button: {{ carouselDestinations.bordersRadiusButton|default(8) ~ carouselDestinations.bordersRadiusButtonUnit|default('px') }};
--padding-button: {{ carouselDestinations.paddingSizeTopBottomButton|default(4) ~ carouselDestinations.paddingButtonUnit|default('px') ~ ' ' ~ carouselDestinations.paddingSizeLeftRightButton|default(4) ~ carouselDestinations.paddingButtonUnit|default('px') }};
/* Bouton dynamique */
--dynamic-button-text-color: {{ carouselDestinations.dynamicButtonTextColor|default('#fff') }};
--dynamic-button-background: {{ carouselDestinations.dynamicButtonBackground|default('#004461') }};
--dynamic-button-price-color: {{ carouselDestinations.dynamicButtonPriceColor|default('#000') }};
--dynamic-button-border-radius: {{ carouselDestinations.dynamicButtonBorderRadius|default(8) ~ carouselDestinations.dynamicButtonBorderRadiusUnit|default('px') }};
--dynamic-button-padding: {{ carouselDestinations.dynamicButtonPaddingTopBottom|default(4) ~ carouselDestinations.dynamicButtonPaddingTopBottomUnit|default('px') ~ ' ' ~ carouselDestinations.dynamicButtonPaddingRightLeft|default(4) ~ carouselDestinations.dynamicButtonPaddingRightLeftUnit|default('px') }};
--dynamic-button-border: {{ carouselDestinations.dynamicButtonBorderSize|default(1) ~ carouselDestinations.dynamicButtonBorderSizeUnit|default('px') ~ ' solid ' ~ carouselDestinations.dynamicButtonBorderColor|default('#fff') }};
/* Tags */
--tags-color: {{ carouselDestinations.tagsColor|default('#000') }};
--tags-font-weight: {{ carouselDestinations.tagsFontWeight|default(600) }};
--tags-text-align: {{ carouselDestinations.tagsTextAlign|default('left') }};
--tags-padding: {{ carouselDestinations.tagsPaddingTopBottom|default(3) ~ carouselDestinations.tagsPaddingTopBottomUnit|default('px') }} {{ carouselDestinations.tagsPaddingRightLeft|default(6) ~ carouselDestinations.tagsPaddingRightLeftUnit|default('px') }};
--tags-border-radius: {{ carouselDestinations.tagsBorderRadius|default(12) ~ carouselDestinations.tagsBorderRadiusUnit|default('px') }};
--tags-font-size: {{ carouselDestinations.tagsFontSize|default(10) ~ carouselDestinations.tagsFontSizeUnit|default('px') }};
--tags-background-color: {{ carouselDestinations.tagsBackgroundColor|default('rgba(217, 217, 217, 0.20)') }};
}
</style>

templates/_snippets/carousel_destinations.html.twig line 1