/*********************************************
Slider bloc Galerie Front End
1) Base commune — bloc Galerie (Slider ET Slideshow)
2) Style "Slideshow" — défilement automatique (5s)
3) Régles CSS complémentaires au script JS
4) Régles Style Slider & Diaporama sur mobile
5) bloc Galerie Style Carrousel
6) Régles Style Carrousel sur mobile
7) Bloc Galerie — Grid "justifié"
8) Bloc Galerie — Grid "carré"
9) Bloc Galerie — Style Masonry
10)Bloc Galerie — Style Album
11)Bloc Galerie — Comparaison Avant/Aprés
*****************************************/
/**
Fonctionne sur navigateur chrome & edge & opera
Source:
principe: https://developer.chrome.com/blog/carousels-with-css
configurateur carrousel: https://chrome.dev/carousel-configurator/
Démo: https://chrome.dev/carousel/horizontal/gallery/
positionnement des boutons: https://frontendmasters.com/blog/quantity-query-slider/
On utilise les fonctionnalités de la spécification CSS Overflow 5
qui ont été conçues pour créer des expériences de défilement et de carrousel.
Les boutons & marqueurs de défilement sont fournis par le navigateur,
et sont accessible par les pseudos classes:
::scroll-button(right) & ::scroll-button(left) & ::scroll-marker
La navigation est possible au clic d'un bouton de navigation ou avec
la touche TAB du clavier, mais pas avec les flêches <- -> du clavier.
Un script JS ajoute la navigation clavier (touches ← et →) et gère
la navigation tactile ainsi que le style "Slideshow" & "Carousel"
pour le défilement automatique (5s)..
*/
/*
Trois styles(Slider,Diaporama,Carrousel) sont proposés
au Panneau Styles du bloc Galerie avec respectivement les classes:
• is-style-sgnr-gallery-slider → navigation manuelle (boutons,
marqueurs, clavier, tactile
toujours visibles)
• is-style-sgnr-gallery-slideshow → défilement automatique (5s),
boutons & marqueurs visibles
uniquement au survol/focus
(CSS + JS)
• is-style-sgnr-gallery-carousel → défilement automatique (5s),
boutons & marqueurs visibles
uniquement au survol/focus
(CSS + JS)
Les styles slider & Diaporama partagent le même mécanisme d'ancrage CSS
(--anchor-name) et --first-img-width, donc la même injection PHP.
Le style carrousel a en commun seulement l'ancrage CSS.
*/
/**
Définition d'un nom d'ancre différent pour chaque conteneur de slider ou carrousel
en PHP via le hook render-block.
• On injecte dans le style en ligne du bloc galerie une variable CSS
--anchor-name = --gallery-slider-1 selon l'ID du bloc galerie
récupéré dans la classe wp-block-gallery-1,wp-block-gallery-2 etc...
cela va permettre de définir une ancre pour le conteneur du slider
qu'est le bloc galerie afin de positionner les boutons et marqueur de défilement.
l'ancre est définit par la régle CSS: anchor-name: var(--anchor-name)
• On injecte aussi la variable CSS: --first-img-width dont la valeur est
la taille medium_large de la 1ère image du bloc Galerie.
Cela va nous permettre de régler la largeur du Slider.
• Définition du nombre de colonnes pour chaque conteneur de Carrousel
en PHP via le hook render-block:
On injecte dans le style en ligne du bloc galerie une variable CSS
--items = 3 ou --items = 4 etc.. selon le nbr de colonnes
récupéré dans la classe columns-3,columns-4 etc...
*/
/* Animations fondu entrant */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Animations fondu sortant */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* =========================================================
Base commune — bloc Galerie (Slider ET Slideshow)
========================================================= */
/* conteneur du slider */
.wp-block-gallery.is-style-sgnr-gallery-slider,
.wp-block-gallery.is-style-sgnr-gallery-slideshow {
--gap:1rem;
--scroll-marker: #000;
--scroll-marker-current: #FFFFFF;
--scroll-button-color:#FFFFFF;
display: grid!important;
grid-auto-columns: 100%;
grid-auto-flow: column;
place-items: center;
gap:var(--gap);
/* important masque lors de la transition
entre deux images une barre verticale qui
à la couleur d'arrière plan du site */
background:#AB9F98;
/* Largeur du slider a la taille medium_large
ou 100% si la résolution écran < taille medium_large */
/*width:var(--first-img-width)*/
width: min(var(--first-img-width), 100%);
/* permet d'avoir une scroll bar horizontale
donc active le défilement horizontal*/
overflow-X: auto;
/*définit le comportement du navigateur lorsque la limite horizontale
d'une zone de défilement est atteinte; ici on désactive le balayage horizontal*/
overscroll-behavior-x: contain;
/*on définit un défilement fluide */
scroll-behavior: smooth;
/* on masque la scroll bar */
scrollbar-width: none;
/* Zone d'accrochage au défilement:
la zone d'accrochage est par défaut le conteneur du slider,
On définit une limite pour l'arrêt du défilement:
mandatory ou proximity
*/
scroll-snap-type: x mandatory;
/* définition d'une ancre pour le conteneur afin de positionner
les boutons et marqueur de défilement */
anchor-name: var(--anchor-name);
> .wp-block-image{
width:100%!important;
/* l'accrochage au défilement se fait au centre
valeurs possibles: start ou center ou end */
scroll-snap-align: center;
/* Animation fondu entrant & sortant
lorsque le images entrent ou sortent du conteneur de défilement
Les images clés fade-in seront appliquées à la plage entry
et les images clés fade-out à la plage exit*/
animation: linear fade-in, linear fade-out;
/* faire que la timeline pilote l'animation*/
animation-duration: auto;
animation-timeline: view(inline);
animation-range: entry 10%, exit 90%;
}
/*---- Boutons de défilement ---*/
&::scroll-button(*) {
position: fixed;
position-anchor: var(--anchor-name);
background: none;
border: 0;
padding: 0;
font-size: 30px;
cursor: pointer;
color:var(--scroll-button-color);
opacity: 0.7;
z-index: 1
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
}
&::scroll-button(*):disabled {
opacity:0.2;
cursor: not-allowed;
}
&::scroll-button(right) {
position-area: inline-end center;
translate: -3rem -0.5rem;
content: "►" / attr(data-caption);
}
&::scroll-button(left) {
position-area: inline-start center;
translate: 3rem -0.5rem;
content: "◄" / attr(data-caption);
}
/*---- Marqueurs de défilement ----*/
/*marqueur de défilement aprés le slider */
scroll-marker-group: after;
/* conteneur marqueur de défilement */
&::scroll-marker-group {
position: fixed;
position-anchor: var(--anchor-name);
position-area: block-end;
/* on remonte le conteneur des marqueurs
au bas des images de la galerie*/
margin: -18px;
display: grid;
grid-auto-columns: 20px;
grid-auto-flow: column;
gap: 20px;
}
> .wp-block-image {
/* style marqueur de défilement */
&::scroll-marker {
content: "";
width: 10px;
height: 10px;
background:var(--scroll-marker);
opacity:0.2;
border-radius: 50%;
}
/* style marqueur de défilement actif */
&::scroll-marker:target-current {
background:var(--scroll-marker-current);
opacity:1;
}
}
}
/* image pleine largeur dans la vue active
on double le selecteur: .is-style-sngr-gallery-slider
pour augmenter la spécificité du selecteur et eviter !important*/
.wp-block-gallery.has-nested-images.columns-default.is-style-sgnr-gallery-slider.is-style-sgnr-gallery-slider figure.wp-block-image:not(#individual-image) {
width: 100%;
}
/* =========================================================
Style "Slideshow" — défilement automatique (5s)
=========================================================
le CSS ne fait ici que gérer la visibilité des boutons & marqueurs
de défilement.
• les boutons ET les marqueurs de défilement ne sont visibles
qu'au survol (ou au focus clavier) du conteneur, alors qu'ils
restent visibles en permanence pour le style "Slider" (opacité 0.7) ;
• le défilement automatique toutes les 5s est géré en JS
(voir js/slider-native-cover-block.js), qui se met
également en pause tant que la souris survole le diaporama.
*/
.wp-block-gallery.is-style-sgnr-gallery-slideshow {
> .wp-block-image:hover {
cursor:pointer;
}
/*---- Boutons de défilement (masqués, visibles au survol/focus) ---*/
&::scroll-button(*) {
opacity: 0;
}
&:hover::scroll-button(*),
&:focus-within::scroll-button(*) {
opacity: 0.7;
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
}
&::scroll-button(*):disabled {
opacity: 0;
}
/*---- Marqueurs de défilement (masqués, visibles au survol/focus) ----*/
&::scroll-marker-group {
opacity: 0;
}
&:hover::scroll-marker-group,
&:focus-within::scroll-marker-group {
opacity: 1;
}
}
.wp-block-gallery.is-style-sgnr-gallery-slideshow:hover {
&::scroll-button(*):disabled {
opacity: 0.2;
}
}
/* image pleine largeur dans la vue active (style Slideshow) */
.wp-block-gallery.has-nested-images.columns-default.is-style-sgnr-gallery-slideshow.is-style-sgnr-gallery-slideshow figure.wp-block-image:not(#individual-image) {
width: 100%;
}
/* =========================================================
Régles CSS complémentaires au script JS
=========================================================
/* Régles lorsque le slider passe de la fin au début ou vice versa */
.sgnr-slider-fade-out {
opacity: 0;
transition: opacity 0.9s ease;
}
/* pour le style diaporama avec un effet de fondu entre chaque slide*/
.sgnr-slideshow-fade{
opacity: 0;
transition: opacity 0.9s ease;
}
/* =========================================================
Régles Style Slider & Diaporama sur mobile
========================================================= */
@media (max-width:480px){
/* marqueurs de défilement (Slider) */
.wp-block-gallery.is-style-sgnr-gallery-slider{
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
}
/* marqueurs de défilement (Slideshow) */
.wp-block-gallery.is-style-sgnr-gallery-slideshow{
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
}
}
/* =========================================================
bloc Galerie Style Carrousel
========================================================= */
.is-style-sgnr-gallery-carousel{
--gap:1rem;
--scroll-marker: #000;
--scroll-marker-current: #000;
--scroll-button-background:#000;
/* On force une disposition en grille */
display:grid!important;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
gap: var(--gap);
/* permet d'avoir une scroll bar horizontale*/
/* donc active le défilement horizontal */
overflow-X: auto;
/* définit le comportement du navigateur lorsque la limite horizontale */
/* d'une zone de défilement est atteinte; ici on désactive le balayage horizontal */
overscroll-behavior-x: contain;
/* on définit un défilement fluide */
scroll-behavior: smooth;
/*on masque la scroll bar sur PC*/
scrollbar-width: none;
/* Zone d'accrochage au défilement:
la zone d'accrochage est par défaut le conteneur du carrousel,
mais on peut la préciser avec scroll-padding & scroll-margin.
On définit une limite pour l'arrêt du défilement:
mandatory ou proximity
*/
scroll-snap-type: x mandatory;
/* définition d'une ancre pour le conteneur afin de positionner
les boutons et marqueur de défilement */
anchor-name: var(--anchor-name);
> .wp-block-image {
width:100%!important;
/* on désactive l’accroche au défilement sur chaque item */
scroll-snap-stop: unset;
/* suppression des marges pour les items */
}
/* permettre un défilement par pagination (1 image par page)*/
/* 👉 seulement la première image de chaque page accrochent */
> .wp-block-image:nth-child(1n+1) {
/* scroll-snap-align: start ou center
l'acrochage au défilement c'est a dire l'arrêt
se fait a l'élément 1n+1.
Du coup, le scroll va se faire image par image
dans un sens de défilement comme dans l'autre.*/
scroll-snap-align: start;
/*garantit que le défilement s’arrêtent a chaque image
et ne sautent pas au-delà.*/
scroll-snap-stop: always;
}
/*---- Boutons de défilement ---*/
&::scroll-button(*) {
position: fixed;
position-anchor: var(--anchor-name);
border: 0;
cursor: pointer;
opacity: 0.65;
background: var(--scroll-button-background);
padding:0px;
border-radius:50%;
/* Dimensions fixes du bouton */
width: 25px;
height: 25px;
/* Suppression de l'alignement sur la ligne de texte */
display: block;
/* Configuration de l'icône SVG en arrière-plan centré */
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px; /* Taille de l'icône dans le bouton */
/* On vide le content pour utiliser le background */
content: "";
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
background-color: var(--scroll-button-background);
}
&::scroll-button(*):active {
}
&::scroll-button(*):disabled {
cursor: unset;
opacity:0.2;
}
&::scroll-button(right) {
position-area: inline-end center;
translate: -4rem;
/* Flèche droite SVG */
background-image: url('data:image/svg+xml;utf8,');
}
&::scroll-button(left) {
position-area: inline-start center;
translate: 4rem;
/* Flèche gauche SVG */
background-image: url('data:image/svg+xml;utf8,');
}
/*---- Marqueurs de défilement ----*/
/* marqueurs de défilement aprés le carrousel */
scroll-marker-group: after;
/* conteneur des marqueurs de défilement */
&::scroll-marker-group {
position: fixed;
position-anchor: var(--anchor-name);
position-area: block-end;
margin: 10px;
display: grid;
grid-auto-columns: 20px;
grid-auto-flow: column;
gap: 20px;
}
> .wp-block-image {
/* style marqueur de défilement */
&::scroll-marker {
content: "";
width: 10px;
height: 10px;
background:var(--scroll-marker);
opacity:0.3;
border-radius: 50%;
}
/* style marqueur de défilement actif */
&::scroll-marker:target-current {
background:var(--scroll-marker-current);
opacity:1;
}
}
/* cas particulier ou l'utilisateur a définit une galerie
a une seule colonne, mais ce n'est alors plus un carrousel
mais un slider.( problème dans ce cas avec marqueurs de
défilement en mode auto et navigation clavier)
Largeur du carrousel a la taille medium_large
ou 100% si la résolution écran < taille medium_large
width:var(--first-img-width)
*/
&.columns-1{
width: min(var(--first-img-width), 100%);
/* important masque lors de la transition
entre deux images une barre verticale qui
à la couleur d'arrière plan du site */
background:#AB9F98;
}
}
/* ============================================================
* Carrousel circulaire( élimination des clônes des marqueurs)
* Les clones servent uniquement au défilement circulaire.
* Ils ne doivent jamais créer de ::scroll-marker.
*
* sans le code css ci-dessous
* Par exemple pour une galerie de 7 photos sur 4 colonnes
* donc trois nouvelles photos sur la 2ème page, a cause des clones
* des images crées pour le bouclage circulaire on a trois marqueurs
* dupliqués à gauche & 3 à droite.
* [5][6][7] [1][2][3][4][5][6][7] [1][2][3]
* clones originales clones
* ============================================================ */
.is-style-sgnr-gallery-carousel > .sgnr-carousel-clone::scroll-marker {
content: none;
}
.is-style-sgnr-gallery-carousel > .sgnr-carousel-clone::scroll-marker:target-current {
content: none;
}
/* =========================================================
Régles Style Carrousel sur mobile
========================================================= */
@media (max-width:767px){
/* on double le selecteur: .is-style-sgnr-gallery-carousel
pour augmenter la spécificité du selecteur et eviter !important*/
.is-style-sgnr-gallery-carousel.is-style-sgnr-gallery-carousel{
/* publication pleine largeur */
grid-auto-columns: 100%;
/* on rétabli la scroll bar*/
scrollbar-width: auto;
/* conteneur des marqueurs de défilement */
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
> .wp-block-image {
/* sur mobile on réactive l'accrochage au défilement
pour chaque item, alignement centrée */
scroll-snap-align: center;
}
}
}
/* ==========================================================
Bloc Galerie — Grid "justifié" avec colonnes égales
et hauteur de ligne dérivée du ratio natif des images
========================================================== */
@media (min-width: 922px) {
.wp-block-gallery.is-style-sgnr-justified-gallery {
display: grid !important;
/* Gap natif WordPress : priorité à l'espacement des blocs si défini,
sinon la valeur native, sinon fallback.
Ne prend pas en compte que l'espacement de blocs horizontal
définit par la variable CSS: --wp--style--unstable-gallery-gap
*/
row-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
column-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
}
/* --- Nombre de colonnes selon la classe posée par WordPress --- */
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-default,
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.wp-block-gallery.is-style-sgnr-justified-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }
/* --- Cellule de la grille : chaque figure occupe sa case --- */
.wp-block-gallery.is-style-sgnr-justified-gallery .wp-block-image {
margin:0 !important;
width: 100%!important;
}
/* --- Image : on laisse le ratio natif s'exprimer via width/height HTML --- */
.wp-block-gallery.is-style-sgnr-justified-gallery .wp-block-image img {
display: block;
width: 100%!important;
height: auto!important; /* pas de aspect-ratio forcé, pas de height:100% */
}
}
/* ==========================================================
Bloc Galerie — Grid "carré" façon Instagram
Toutes les cellules sont des carrés (1:1),
recadrage via object-fit
========================================================== */
.wp-block-gallery.is-style-sgnr-square-gallery {
display: grid !important;
/* Gap natif WordPress : priorité à l'espacement des blocs si défini,
sinon la valeur native, sinon fallback.
Ne prend pas en compte que l'espacement de blocs horizontal
définit par la variable CSS: --wp--style--unstable-gallery-gap
*/
row-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
column-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
}
/* --- Nombre de colonnes selon la classe posée par WordPress --- */
.wp-block-gallery.is-style-sgnr-square-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-default,
.wp-block-gallery.is-style-sgnr-square-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.wp-block-gallery.is-style-sgnr-square-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }
/* --- Cellule de la grille : figure carrée, on masque tout débordement --- */
.wp-block-gallery.is-style-sgnr-square-gallery .wp-block-image {
margin: 0 !important;
width: 100% !important;
/* c'est ce qui force chaque cellule à être un carré*/
aspect-ratio: 1 / 1 !important;
overflow: hidden;
}
/* --- Image : recadrage en carré, centré, sans déformation --- */
.wp-block-gallery.is-style-sgnr-square-gallery .wp-block-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* point de recadrage par défaut au centre de l'image*/
object-position: center;
}
/* Régles responsive */
@media(max-width: 480px){
.wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
grid-template-columns: 1fr 1fr;
}
}
@media(min-width: 481px) and (max-width: 767px) {
.wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media(min-width: 768px) and (max-width: 921px) {
.wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* ==========================================================
Bloc Galerie — Style Masonry
========================================================== */
/*
Source:
https://www.wppagebuilders.com/create-masonry-image-gallery-in-gutenberg-without-plugin/
*/
/*
Pour avoir une grille masonry,
si la nouvelle régle display:grid-lanes n'est pas supporté
on utilise la disposition multicolonnes
*/
@supports not (display: grid-lanes) {
@media(min-width:768px){
/*
Par défaut lorsqu'on insère un bloc galerie il a la classe columns-default
qui définit l'élément (bloc Galerie) pour qu'il ait trois colonnes par défaut.
On définit la mise en page avec la propriété de colonnes standard:columns et
les préfixes pour les différents navigateurs
*/
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-default {
-webkit-columns: 3; /* Chrome, Safari, Opera */
-moz-columns: 3; /* Firefox */
columns: 3; /* Standard syntax */
}
/*
Garantit que le bloc Galerie s'affiche en tant qu'élément de bloc,
remplaçant tous les styles en ligne.
excepté pour les mobiles ou on garde une disposition en colonne
*/
.wp-block-gallery.is-style-sgnr-masonry-gallery{
display:block !important;
}
/*
Définit les images dans la largeur de la galerie à 100 % de leur conteneur,
remplissant ainsi la colonne.
Définit la marge inférieure à l'aide d'une variable personnalisée native a WordPress
qui permet d'avoir le même ecartement vertical entre images que celui horizontal:
--wp--style--unstable-gallery-gap
*/
.wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
width:100% !important;
margin-bottom:var(--wp--style--unstable-gallery-gap,16px)!important;
}
/*
suppression des marges du block image
de manière a avoir un style justifié
c'est a dire un même espacement horizontal & vertical entre les images
*/
.wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
margin-top:0!important;
}
/*
Lorsqu'on définit manuellement le nbr de colonne a un bloc galerie
WordPress ajoute la classe column-1 si on a sélectionné une colonne
et ainsi de suite.
.eccp-masonry-image.columns-1 à .eccp-masonry-image.columns-8:
Chaque classe définit le nombre de colonnes pour différentes
mises en page à l'aide de la propriété de colonnes standard
et des préfixes pour les différents navigateurs
*/
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-1 {
-webkit-columns: 1; /* Chrome, Safari, Opera */
-moz-columns: 1; /* Firefox */
columns: 1; /* Standard syntax */
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-2 {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-3 {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-4 {
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-5 {
-webkit-columns: 5;
-moz-columns: 5;
columns: 5;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-6 {
-webkit-columns: 6;
-moz-columns: 6;
columns: 6;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-7 {
-webkit-columns: 7;
-moz-columns: 7;
columns: 7;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery.columns-8 {
-webkit-columns: 8;
-moz-columns: 8;
columns: 8;
}
}
}
/*
Pour avoir une grille masonry
Grid Lanes pour les navigateurs compatibles
On définit des colonnes rigides via grid-template-columns,
et les éléments s'empilent librement du haut vers le bas dans l'axe vertical
L'algorithme de Grid Lanes cherche en permanence à combler le vide le plus
haut possible. Cependant, une différence infime d'un seul pixel entre deux
colonnes peut contraindre l'algorithme à propulser un élément dans une
colonne inattendue.
C'est là qu'intervient la propriété flow-tolerance.
Elle permet d'indiquer au navigateur un seuil de tolérance
(une marge d'erreur admissible). Si deux colonnes ont des hauteurs proches
comprises dans cette fourchette, le navigateur considère qu'il y a "égalité"
et choisit de respecter l'ordre naturel d'écriture du document plutôt
que d'optimiser l'espace au pixel près.
auto-fit evite d'avoir des colonnes vide.
Si on a trois images de 300px et une résolution de 1200px:
- avec auto-fill on va avoir trois colonnes de 300px remplies et une colonne vide.
- avec auto-fit on va avoir trois colonnes de 400px remplies.
*/
@supports (display: grid-lanes) {
/*
Pour les mobiles on garde une disposition
en colonne par la régle css native du bloc galerie:
display:flex
*/
@media(min-width:768px){
/* disposition Masonry */
.wp-block-gallery.is-style-sgnr-masonry-gallery {
display: grid-lanes!important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
flow-tolerance: 20px;
/* Aligne l'ordre de navigation clavier et des revues d'écran
sur la disposition visuelle générée par la grille */
reading-flow: grid-rows;
}
.wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
width:100% !important;
}
}
}
/* ==========================================================
Bloc Galerie — Style Album
========================================================== */
/* On définit pour l'élément parent container une règle de
positionnement relative pour garantir que tous les éléments
enfants qu'il contient sont correctement contenus,
en particulier notre balise qui affiche
le titre de l'album.
*/
.wp-block-gallery.is-style-sgnr-gallery-album {
position: relative;
}
/* si le thème actif n'est pas un thème de bloc */
/* lorsqu'on a groupé le block galerie pour réduire la taille
de l'image de couverture */
.wp-block-group:has(.wp-block-gallery.is-style-sgnr-gallery-album) {
padding: 0!important;
}
/* • On masque toutes les images du bloc galerie exceptée la 1ère
qui sera la couverture de l'album.
• On n'utilise pas la règle display: none car incompatible
avec la visionneuse native de WordPress.
• On masque visuellement les images suivantes sans les retirer
du rendu, afin que WordPress puisse toujours mesurer leur
boîte d'origine (Width/Height) lors de la navigation
suivant/précédent dans la visionneuse native.
position:absolute les sort du flux normal tout en
conservant leur taille intrinsèque propre.
• Limitation: fonctionne a condition que toutes les images de
la galerie aient le même ratio.
*/
.wp-block-gallery.is-style-sgnr-gallery-album .wp-block-image:not(:first-child) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: -1;
}
/*
On a définit le nom de l'album avec la légende de la galerie
que l'on positionne au centre du bloc galerie.
La balise occupe toute la hauteur de la galerie
et sert d'overlay pour le titre de l'album.
La couleur du nom de l'album est définit avec le menu format
de la barre d'outils:"Mettre en évidence".
*/
.wp-block-gallery.is-style-sgnr-gallery-album figcaption.blocks-gallery-caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Overlay semi-transparent sur toute la couverture */
background-color: rgba(0, 0, 0, 0.1);
/* Centrage du texte (horizontal + vertical) via flexbox */
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
font-size: 24px;
z-index: 1;
color: #FFFFFF;
/* Laisse les clics traverser l'overlay jusqu'à
l'image / bouton lightbox en dessous */
pointer-events: none;
/* effet texte shadow pour le nom de l'album */
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
/* Assurer que chaque image dans le bloc galerie prend
toute la largeur du conteneur */
.wp-block-gallery.is-style-sgnr-gallery-album figure.wp-block-image {
width: 100% !important;
height: 100% !important;
/* Permet de s'assurer que l'image couvre bien l'espace du conteneur
sans déformation */
object-fit: cover;
}
/* Régles pour les mobiles
*/
@media(max-width:480px) {
.wp-block-gallery.is-style-sgnr-gallery-album figcaption.blocks-gallery-caption {
font-size: 20px;
}
}
/* ==========================================================
Bloc Galerie — Comparaison Avant/Aprés
========================================================== */
/*
Articles ayant servi de support:
l'animation clip-path:
https://css-tricks.com/css-grid-and-custom-shapes-part-3/
pour tout le reste:
https://orangeable.com/css/before-and-after-image-slider
Le concept de ce « slider d’image » est très simple:
• On n'a besoin que de deux composants, le conteneur d'images
et un curseur d'images constitué par un bouton.
• Un script sgnr-comparison-before-after.js
Le conteneur d'images est un block galerie de deux images
auquel on attribue la classe is-style-sgnr-before-after
via les paramètres du bloc
On modifie dynamiquement via le script le balisage du bloc galerie pour
ajouter le curseur d'images:
l'aspect du curseur d'image est établi par régles CSS
avec des triangles noir ◄ ► avec un fond de couleur
comportant une bordure.
Les containers d'images sont les balises du bloc galerie
on attribue dynamiquement avec le script:
• la classe sgnr_before_image pour la balise qui contient
l'image "AVANT"
• la classe sgnr_after_image pour la balise qui contient
l'image "APRÉS"
Le balisage du bloc galerie simplifié est donc:
AVANTAPRÉS
Les deux images de même taille se chevauchent grace aux régles CSS.
On applique la régle: display: grid; au container principal
du bloc galerie ainsi qu'aux balises qui contiennent les images.
Deux images de même taille sont empilées l'une sur l'autre grâce
à la régle CSS grid-area: 1/1.
.wp-block-gallery.is-style-sgnr-before-after {
position: relative;
display: grid!important;
}
.wp-block-gallery.is-style-sgnr-before-after figure {
display: grid!important;
grid-area: 1/1;
}
L'effet AVANT/APRÉS repose sur l'animation CSS clip-path,nous avons
deux états différents :
1) l'état initial,la moitié de chaque image est révélée et
le curseur est positionné au centre.
2) Lorsque l'on survole le block galerie on récupère la position
de la souris pour modifier l'animation clip-path et révéler
l'image AVANT ou APRÉS
*/
/* On définit pour l'élément parent container une règle
de positionnement relative pour garantir que tous les
éléments enfants qu'il contient sont correctement contenus*/
.wp-block-gallery.is-style-sgnr-before-after {
position: relative;
display: grid!important;
}
.wp-block-gallery.is-style-sgnr-before-after figure {
display: grid!important;
grid-area: 1/1;
}
/* Assurer que chaque image dans le bloc galerie prend
toute la largeur du conteneur */
.wp-block-gallery.is-style-sgnr-before-after figure.wp-block-image img {
width: 100% !important;
height: 100% !important;
/* Permet de s'assurer que l'image couvre bien l'espace du conteneur
sans déformation */
object-fit: cover;
}
/* Légende des images pour afficher AVANT ou APRÉS */
.wp-block-gallery.is-style-sgnr-before-after figure.sgnr_before_image figcaption{
text-align:left!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.wp-block-gallery.is-style-sgnr-before-after figure.sgnr_after_image figcaption{
text-align:right!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
/* important! pour que les blocs images qui sont superposés
par la régle CSS: grid-area: 1/1
occupe toute la largeur du bloc Galerie */
.wp-block-gallery.is-style-sgnr-before-after .wp-block-image{
width:100%!important;
}
/*---- Le CSS du bouton curseur ----------*/
/*
On crée le bouton de curseur rond qui apparaît au centre
du bloc galerie.
La majeure partie du CSS ici concerne le dimensionnement
et le positionnement du bouton lui-même,
puis on a les pseudo-classes :before et :after
où on crée et positionne nos triangles ◄ ►.
Des variables CSS permettront à l'utilisateur, en surchargeant
le style de l'extension, de modifier les couleurs du curseur.
*/
div.sgnr-slider-button {
--sgnr-sliderImagesBorderColor:#54595F;
--sgnr-sliderImagesBackgroundColor: #E7BE49;
--sgnr-sliderImagesSymbolColor: #333333;
width: 38px;
height: 38px;
border: 3px solid var(--sgnr-sliderImagesBorderColor,#54595F);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: var(--sgnr-sliderImagesBackgroundColor,#E7BE49);
position: absolute;
top: calc(50% - 19px);
left: calc(50% - 19px);
cursor: pointer;
z-index: 3;
}
div.sgnr-slider-button:before {
/* Curseur triangle plein ◄ */
content:"";
position: absolute;
top: calc(50% - 6px);
left: -1px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid var(--sgnr-sliderImagesSymbolColor,#333333);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
div.sgnr-slider-button:after {
/* Curseur triangle plein ► */
content:"";
position: absolute;
top: calc(50% - 6px);
right: -1px;
width: 0;
height: 0;
border-left: 6px solid var(--sgnr-sliderImagesSymbolColor,#333333);
border-right: 6px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
