Galeria produktów — slajder profili

Po co to jest

Na stronie produktu (np. /okna/okna-pvc/trocal-76ad/) obok opisu stoi slajder z rysunkami przekroju profilu. Zdjęcia źródłowe mają skrajnie różne proporcje — przekrój jest pionowy (895 × 1920), zdjęcie profilu poziome (1000 × 800). Bez tego arkusza slajder skacze o kilkaset pikseli przy każdej zmianie slajdu.

Co robi arkusz

• Wyrównuje wysokość slajdów do 380px. Każde zdjęcie wpisuje się w tę wysokość z zachowaniem proporcji i jest wyśrodkowane — nic nie jest przycinane.
• Przenosi kropki nawigacji pod zdjęcie i zmienia je z okrągłych 7 px na skośne kwadraty 20 px, jak na starej stronie.
• Naprawia animację powiększenia w lightboksie Divi (opis niżej).

Żywy podgląd

Ten sam układ, co na stronie produktu: kolumna 1/2, dwa zdjęcia o skrajnie różnych proporcjach.

• Oba slajdy mają tę samą wysokość, mimo że jedno zdjęcie jest pionowe, a drugie poziome.
• Kropki stoją pod zdjęciem, aktywna jest żółta.
• Kliknięcie w zdjęcie otwiera powiększenie, które rozwija się od środka.

Automatyczne przewijanie ustawione na 3500 ms — tyle ma oryginał.

Co się wyklikuje w module

• Zawartość → Elementy galerii — zdjęcia; ich kolejność to kolejność przeciągania w oknie wyboru.
• Zawartość → Elementy → Układ = Slajder (w skrócie fullwidth="on").
• Zawartość → Elementy → Automatyczna animacja i jej prędkość — oryginał ma 3500 ms.
• Projekt → Nakładka — kolor ikony powiększenia i kolor tła nakładki po najechaniu.
• Projekt → Odstęp — margines dolny do następnego modułu.
• Zaawansowane → Klasy CSS — g4h-profile. Bez tego arkusz nie ma się czego złapać.

Czego wyklikać się nie da

• Stała wysokość slajdów. Divi wpisuje każdemu slajdowi styl inline max-height równy wysokości zdjęcia — zmierzone na tej parze zdjęć: 430,9 px i 1155,5 px. Żadne pole modułu tego nie rusza, stąd !important w arkuszu.
• Kropki nawigacji. Moduł Galeria nie wystawia opcji kropek — ma je moduł Slajder, nie Galeria.
• Wyśrodkowanie zdjęcia w slajdzie.

Trzy pułapki, na które warto uważać

1. Nie używać object-fit do wpisania zdjęcia w slajd

Kusi, bo to jedna linijka. Ale wtedy element <img> zostaje rozciągnięty na cały slajd (539 × 380), choć namalowany obrazek ma np. 177 × 380. Powiększenie w lightboksie startuje z prostokąta elementu, więc pionowe zdjęcia rozjeżdżają się wszerz podczas otwierania. Dlatego arkusz robi to jak oryginał: max-height na zdjęciu, szerokość z proporcji, wyśrodkowanie flexem na odnośniku.

2. Swoistość reguł kropek

Divi koloruje kropki selektorem .et_pb_bg_layout_light .et-pb-controllers .et-pb-active-control — swoistość (0,3,0). Reguła o takiej samej swoistości przegrywa kolejnością wczytania, bo globalny CSS ładuje się przed arkuszem Divi. Stąd w arkuszu prefiks .et_pb_gallery.g4h-profile, który daje (0,4,1).

3. Divi ma błąd w regułach lightboksa

Divi próbuje animować pojawienie się zdjęcia, ale zapisał reguły jako .mfp-fade .mfp-wrap.mfp-wrap.mfp-ready .mfp-content — z .mfp-fade jako przodkiem .mfp-wrap. Magnific Popup dokleja tę klasę do samego .mfp-wrap, więc reguły nigdy nie trafiają. Zmierzone na żywej stronie: .mfp-content ma transition-duration: 0s i pełne krycie od razu. Efekt: tło przyciemnia się płynnie przez pół sekundy, a zdjęcie wskakuje skokowo.

Nie da się tego naprawić przejściem — Magnific dokłada klasę mfp-ready w tej samej klatce, w której wstawia treść, gdy zdjęcie jest już w pamięci podręcznej. Nie ma wtedy stanu początkowego, od którego przejście by ruszyło. Stąd animacja klatkowa z wartościami przepisanymi z lightGallery starej strony: skala 0,5 → 1 przez 250 ms, krzywa cubic-bezier(0,0,.25,1).

Sekcja lightboksa działa na całej witrynie, nie tylko na stronach produktów — każdy lightbox Divi dostaje ten sam efekt.

Co można przestawić bez ruszania reguł

Zmienne siedzą na .g4h-profile, na górze sekcji:

• --g4h-slajd — wysokość każdego slajdu (domyślnie 380px, tyle ma oryginał)
• --g4h-kropka — bok kropki nawigacji (domyślnie 20px; po skosie wychodzi 23,5 × 20)
• --g4h-kropka-akt — kolor kropki aktywnej (domyślnie #F0C609)

Zmiana idzie do moduly/galeria-produktu.css, a potem python generatory/build_global_css.py. Edycja 4hand-global.css wprost wyparuje przy następnym przegenerowaniu.

CSS — slajder

Jest już w globalnym Niestandardowym CSS. Tu dla podglądu.

/* ---------- 1. SLAJDER PROFILI ---------- */

.g4h-profile{
  --g4h-slajd: 380px;          /* oryginal: img max-height 380px */
  --g4h-kropka: 20px;          /* oryginal: 20x20, po skosie 23,5x20 */
  --g4h-kropka-akt: #F0C609;
}

/* Divi wpisuje kazdemu slajdowi inline max-height rowny wysokosci
   zdjecia (zmierzone: 430,9 px i 1155,5 px), wiec slajder skacze przy
   zmianie slajdu. Stylu inline nie przebijemy bez !important. */
.g4h-profile .et_pb_gallery_items{ height: var(--g4h-slajd); }
.g4h-profile .et_pb_gallery_item{
  height: var(--g4h-slajd) !important;
  max-height: var(--g4h-slajd) !important;
}

/* Wysrodkowanie idzie na odnosnik, a NIE przez object-fit na zdjeciu.
   Przy object-fit element <img> zostaje rozciagniety na caly slajd
   (539x380), choc namalowany obrazek ma np. 177x380 - i z tego zlego
   prostokata startuje potem powiekszenie w lightboxie, przez co zdjecie
   wyglada na zdeformowane. Tak samo robi oryginal: max-height na zdjeciu,
   szerokosc z proporcji. */
.g4h-profile .et_pb_gallery_image{ height: 100%; }
.g4h-profile .et_pb_gallery_image > a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.g4h-profile .et_pb_gallery_image img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Kropki nawigacji. Divi kladzie je NA zdjeciu (position:absolute;
   bottom:20px) i robi z nich kolka 7 px. Oryginal ma rownolegloboki
   20 px POD zdjeciem.
   Prefiks .et_pb_gallery jest konieczny: reguly Divi maja swoistosc
   (0,3,0) - .et_pb_bg_layout_light .et-pb-controllers .et-pb-active-control
   - wiec przy remisie wygrywaly kolejnoscia wczytania. */
.et_pb_gallery.g4h-profile .et-pb-controllers{
  position: static;
  padding-top: 15px;
  text-align: center;
  line-height: 0;
}
.et_pb_gallery.g4h-profile .et-pb-controllers a{
  width: var(--g4h-kropka);
  height: var(--g4h-kropka);
  border-radius: 0;
  transform: skewX(-10deg);
  margin: 0 5px;
  background-color: #000;
  opacity: .2;
}
.et_pb_gallery.g4h-profile .et-pb-controllers a.et-pb-active-control{
  background-color: var(--g4h-kropka-akt);
  opacity: 1;
}

CSS — powiększenie zdjęcia (cała witryna)

/* ---------- 3. POWIEKSZENIE ZDJECIA (lightbox Divi) ----------

   UWAGA: te reguly dzialaja na CALEJ witrynie, nie tylko na tej stronie.

   Divi ma w tym miejscu blad w selektorze. Wlasne reguly przenikania
   zapisal jako ".mfp-fade .mfp-wrap.mfp-wrap.mfp-ready .mfp-content",
   czyli z .mfp-fade jako PRZODKIEM .mfp-wrap. Magnific Popup dokleja
   klase mfp-fade do samego .mfp-wrap, wiec te reguly nigdy nie trafiaja.
   Zmierzone na zywej stronie: .mfp-content ma transition-duration 0s
   i opacity 1 od razu. Efekt: tlo przyciemnia sie plynnie przez 0,5 s,
   a zdjecie wskakuje skokowo.

   Nie da sie tego naprawic przejsciem (transition): Magnific dokleja
   klase mfp-ready w tej samej klatce, w ktorej wstawia tresc, gdy zdjecie
   jest juz w pamieci podrecznej - nie ma wtedy stanu poczatkowego, od
   ktorego przejscie by ruszylo. Stad animacja klatkowa.

   Wartosci przepisane z lightGallery starej strony (lg-start-zoom):
   skala 0.5 -> 1, 250 ms, cubic-bezier(0,0,.25,1), srodek jako os.

   Bez animation-fill-mode celowo: stan bazowy elementu to opacity 1
   i transform none, wiec gdyby animacja z jakiegokolwiek powodu nie
   ruszyla, zdjecie i tak jest widoczne.
*/
@keyframes g4h-lightbox-in{
  from{ opacity: 0; transform: scale(.5); }
  to{ opacity: 1; transform: scale(1); }
}
.mfp-fade.mfp-wrap .mfp-content{
  opacity: 1;
  transform: none;
  transition: none;
  transform-origin: 50% 50%;
  animation: g4h-lightbox-in 250ms cubic-bezier(0,0,.25,1);
}
@media (prefers-reduced-motion: reduce){
  .mfp-fade.mfp-wrap .mfp-content{ animation: none; }
}