Symfony Profiler

{% set parametre = ParametreSite() %}
{% if bloc.model == "2" %}
<div id="modele-galerie-custom-{{bloc.id}}" class="modele-galerie-custom">
<div class="container-fluid content-wrapper">
{% if bloc.title is defined and bloc.title is not empty or bloc.content is defined and bloc.content is not empty %}
<div class="text-center mb-4">
{% if bloc.title is defined and bloc.title is not empty %}
<h2 data-aos="fade-up" data-aos-easing="linear">{{bloc.title}}</h2>
{% endif %}
{% if bloc.content is defined and bloc.content is not empty %}
<div clas s="content">{{bloc.content|raw}}</div>
{% endif %}
</div>
{% endif %}
<div class="list-galerie owl-carousel">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<div class="item-img">
<a class="fancybox" data-fancybox="isotop_zoom" data-caption="{{parametre.titre|default('')}}" href="{{image_item}}">
<span class="img-item lazyload" data-bgset="{{image_item}}">
<img alt="{{item.titre|default('')}}" title="{{item.titre|default('')}}" src="{{image_item}}" />
<span class="badge">
{% if key % 2 == 0 %}
Avant
{% else %}
Après
{% endif %}
</span>
</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{# Default modele gallerie #}
{# <div class="modele-galerie-5 py-5">
<div class="container-fluid content-wrapper">
<div class="list-galerie">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<div class="item-galerie">
<span class="img-item lazyload" data-bgset="{{image_item}}">
<img alt="{{parametre.titre|default('')}}" title="{{parametre.titre|default('')}}" src="{{image_item}}" />
</span>
<a class="fancybox" data-fancybox="isotop_zoom" data-caption="{{parametre.titre|default('')}}" href="{{image_item}}">
<span class="title-galerie">{{parametre.titre|default('')}}</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div> #}
{% endif %}
{# Default modele owl #}
{% if bloc.model == "1" %}
<div id="modele-galerie-owl-{{bloc.id}}" class="modele-galerie-owl">
<div class="container-fluid content-wrapper">
{% if bloc.title is defined and bloc.title is not empty or bloc.content is defined and bloc.content is not empty %}
<div class="text-center mb-4">
{% if bloc.title is defined and bloc.title is not empty %}
<h2 data-aos="fade-up" data-aos-easing="linear">{{bloc.title}}</h2>
{% endif %}
{% if bloc.content is defined and bloc.content is not empty %}
<div class="content">{{bloc.content|raw}}</div>
{% endif %}
</div>
{% endif %}
<div class="list-galerie owl-carousel">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<div class="item-img">
<a class="fancybox" data-fancybox="isotop_zoom" data-caption="{{parametre.titre|default('')}}" href="{{image_item}}">
<span class="img-item lazyload" data-bgset="{{image_item}}">
<img alt="{{item.titre|default('')}}" title="{{item.titre|default('')}}" src="{{image_item}}" />
</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if bloc.model == "3" %}
<div id="modele-galerie-owl-{{bloc.id}}" class="modele-galerie-owl">
<div class="container-fluid content-wrapper">
{% if bloc.title is defined and bloc.title is not empty or bloc.content is defined and bloc.content is not empty %}
<div class="text-center mb-4">
{% if bloc.title is defined and bloc.title is not empty %}
<h2 data-aos="fade-up" data-aos-easing="linear">{{bloc.title}}</h2>
{% endif %}
{% if bloc.content is defined and bloc.content is not empty %}
<div class="content">{{bloc.content|raw}}</div>
{% endif %}
</div>
{% endif %}
<div class="row list-galerie text-center justify-content-center">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<div class="col-lg-3 col-sm-6">
<a class="fancybox pb-4" data-fancybox="isotop_zoom" data-caption="{{parametre.titre|default('')}}" href="{{image_item}}">
<span class="img-item lazyload" data-bgset="{{image_item}}">
<img alt="{{item.titre|default('')}}" title="{{item.titre|default('')}}" src="{{image_item}}" />
</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if bloc.model == "4" %}

<section id="modele-galerie-carousel-{{bloc.id}}" class="modele-galerie-carousel" data-block-id="block1">
<div class="container-fluid content-wrapper">
<div class="row align-items-center">
{% if bloc.title is defined and bloc.title is not empty or bloc.content is defined and bloc.content is not empty %}
<div {% if bloc.galleries is empty %} class="col-12" {% else %} class="col-xl-6" {% endif %}>
<div class="bloc-content">
<div class="mb-4">
{% if parametre.actiftitre %}
<div class="site-title">{{ parametre.titre }}</div>
{% endif %}
{% if bloc.title is defined and bloc.title is not empty %}
<h2 data-aos="fade-up" data-aos-easing="linear">{{bloc.title}}</h2>
{% endif %}
{% if bloc.content is defined and bloc.content is not empty %}
<div class="content">{{bloc.content|raw}}</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
<div {% if bloc.title is empty and bloc.content is empty %} class="col-12" {% else %} class="col-xl-6" {% endif %}>
<div class="carousel-container">
<div id="carousel-{{ bloc.id|default('1') }}" class="carousel slide">
<div class="carousel-inner">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<div class="carousel-item {% if key == 0 %}active{% endif %}" data-index="{{ key }}">
<img class="d-block w-100" alt="{{item.titre|default('')}}" src="{{image_item}}" />
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ bloc.id|default('1') }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Précédent</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ bloc.id|default('1') }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
</div>

<div class="thumbnail-carousel-container">
<button class="thumbnail-nav prev" data-thumbnail-carousel="carousel-{{ bloc.id|default('1') }}">❮</button>
<div class="thumbnail-track" data-thumbnail-track="carousel-{{ bloc.id|default('1') }}">
{% for key,item in bloc.galleries %}
{% set image_item = asset_image('/images'~ item.path,'medium',['800x/uploads','640x/uploads','480x/uploads']) %}
<img class="thumbnail {% if key == 0 %}active{% endif %}"
data-carousel-id="carousel-{{ bloc.id|default('1') }}"
data-slide-to="{{ key }}"
alt="{{item.titre|default('')}}"
title="{{item.titre|default('')}}"
src="{{image_item}}" />
{% endfor %}
</div>
<button class="thumbnail-nav next" data-thumbnail-carousel="carousel-{{ bloc.id|default('1') }}">❯</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Fonction pour initialiser un mini-carrousel de vignettes
function initThumbnailCarousel(carouselId) {
const container = document.querySelector(`[data-thumbnail-carousel="${carouselId}"].prev`)?.closest('.thumbnail-carousel-container');
if (!container) return null;
const track = container.querySelector('.thumbnail-track');
const prevBtn = container.querySelector('.thumbnail-nav.prev');
const nextBtn = container.querySelector('.thumbnail-nav.next');
const thumbnails = track.querySelectorAll('.thumbnail');
if (thumbnails.length === 0) return null;
let currentPosition = 0;
const thumbnailsPerView = 4; // Nombre de vignettes visibles
const containerWidth = container.offsetWidth;
const thumbnailWidth = containerWidth / thumbnailsPerView;
const maxPosition = Math.max(0, (thumbnails.length - thumbnailsPerView) * thumbnailWidth);
// Fonction pour centrer la vignette active
const centerActiveThumbnail = function(activeIndex) {
const thumbPosition = activeIndex * thumbnailWidth;
// Si la vignette n'est pas visible, on centre
if (thumbPosition < currentPosition || thumbPosition > currentPosition + containerWidth - thumbnailWidth) {
currentPosition = Math.max(0, thumbPosition - (containerWidth / 2) + (thumbnailWidth / 2));
currentPosition = Math.min(maxPosition, currentPosition);
moveTrack();
}
};
// Mettre à jour l'état des boutons de navigation
function updateNavButtons() {
if (prevBtn) prevBtn.disabled = currentPosition === 0;
if (nextBtn) nextBtn.disabled = currentPosition >= maxPosition;
}
// Déplacer le track
function moveTrack() {
track.style.transform = `translateX(-${currentPosition}px)`;
updateNavButtons();
}
// Événements pour les boutons de navigation
if (prevBtn) {
prevBtn.addEventListener('click', () => {
currentPosition = Math.max(0, currentPosition - thumbnailWidth);
moveTrack();
});
}
if (nextBtn) {
nextBtn.addEventListener('click', () => {
currentPosition = Math.min(maxPosition, currentPosition + thumbnailWidth);
moveTrack();
});
}
// Initialiser l'état des boutons
updateNavButtons();
// Centrer la première vignette active
const activeThumb = track.querySelector('.thumbnail.active');
if (activeThumb) {
const activeIndex = [...thumbnails].indexOf(activeThumb);
centerActiveThumbnail(activeIndex);
}
// Retourner la fonction pour qu'elle puisse être utilisée ailleurs
return centerActiveThumbnail;
}
// Gestionnaire pour tous les carrousels de la page
document.addEventListener('DOMContentLoaded', function() {
// Vérifier si Bootstrap est disponible
if (typeof bootstrap === 'undefined') {
console.error('Bootstrap non chargé. Vérifiez que le script Bootstrap est inclus avant ce script.');
return;
}
// Initialiser tous les carrousels
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
const carouselId = carousel.id;
const thumbnails = document.querySelectorAll(`[data-carousel-id="${carouselId}"]`);
// Initialiser le mini-carrousel de vignettes et récupérer la fonction de centrage
const centerActiveThumbnail = initThumbnailCarousel(carouselId);
// Événement lorsque le carrousel change de slide
carousel.addEventListener('slid.bs.carousel', function() {
const activeIndex = [...carousel.querySelectorAll('.carousel-item')].findIndex(item => item.classList.contains('active'));
// Mettre à jour les vignettes correspondantes
thumbnails.forEach((thumb, index) => {
if (index === activeIndex) {
thumb.classList.add('active');
} else {
thumb.classList.remove('active');
}
});
// Centrer la vignette active dans le mini-carrousel
if (centerActiveThumbnail) {
centerActiveThumbnail(activeIndex);
}
});
// Ajout d'un événement de clic sur les vignettes pour navigation
thumbnails.forEach(thumb => {
thumb.addEventListener('click', function() {
const index = parseInt(this.getAttribute('data-slide-to'));
try {
const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel);
carouselInstance.to(index);
} catch (error) {
console.error('Erreur lors de la navigation du carrousel:', error);
// Fallback manuel si Bootstrap n'est pas disponible
const items = carousel.querySelectorAll('.carousel-item');
items.forEach(item => item.classList.remove('active'));
if (items[index]) {
items[index].classList.add('active');
}
}
});
});
});
});
</script>
</script>
{% endif %}

templates/theme/default/component-blocks/gallery-block.html.twig line 1