Galeria kolorów — siatka próbek

Po co to jest

Pod slajderem profili na stronie produktu stoi siatka próbek okleiny. Domyślna siatka Divi w kolumnie 1/2 daje dwa kafle w rzędzie z przerwami po 62,7 px — wygląda to jak galeria zdjęć, a nie jak paleta kolorów. Stara strona ma sześć małych kwadratów w rzędzie i tak to odtwarzamy.

Co robi arkusz

• Sześć kolumn w rzędzie zamiast dwóch, na każdej szerokości ekranu — oryginał też nie ma tu żadnego progu.
• Kwadratowe kafle o wielkości liczonej w procentach szerokości kolumny, dokładnie jak w oryginale.
• Odstęp 10 px zamiast procentowych marginesów Divi.

Żywy podgląd

Ten sam układ, co na stronie produktu: kolumna 1/2, dziesięć próbek.

• Sześć kwadratów w rzędzie, ostatni rząd niepełny — tak samo jak w oryginale.
• Rząd nie rozciąga się na całą szerokość kolumny; wolne miejsce z prawej to celowy odpowiednik oryginału.
• Kliknięcie otwiera powiększenie z pełnym plikiem, nie z przyciętą miniaturą.

Nagłówek „Kolory” i kreska pod nim to osobne moduły — Tekst i Separator. Cała ich stylizacja jest do wyklikania, bez CSS.

Co się wyklikuje w module

• Zawartość → Elementy galerii — zdjęcia. Kolejność kafli to kolejność przeciągania w oknie wyboru; nic jej potem nie sortuje.
• Zawartość → Elementy → Układ = Siatka.
• Zawartość → Elementy → Pokaż tytuł i podpis = NIE, Pokaż stronicowanie = NIE.
• Projekt → Nakładka — kolor ikony powiększenia i kolor tła nakładki.
• Zaawansowane → Klasy CSS — g4h-kolory.

Nagłówek sekcji robią dwa osobne moduły, w całości bez CSS-a: Tekst z nagłówkiem H2 i Separator o szerokości 50 px, grubości 2 px, w kolorze #F0C609 — takie wartości ma oryginał.

Czego wyklikać się nie da

• Liczba kolumn. Siatka Divi bierze szerokość kafla z rynny wiersza: .et_pb_gutters3 .et_pb_column_1_2 .et_pb_grid_item { width:44.18%; margin-right:11.64% }. W kolumnie 1/2 daje to zawsze dwa kafle. Rynnę wiersza można przestawić (Wiersz → Projekt → Układ → Szerokość rynny), ale to nadal będą dwa kafle, a przy okazji zmieni się odstęp między kolumnami całego wiersza.
• Wielkość i proporcja kafla.
• Odstępy w pikselach — Divi liczy je w procentach.

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

1. Kontener siatki ma klasę clearfix

Po przełączeniu na display: grid pseudoelement ::after tego kontenera staje się pełnoprawnym kafelkiem siatki — na końcu galerii pojawia się jedenaste, puste pole. Dlatego arkusz go wygasza. Ta sama pułapka czeka przy każdej próbie zamiany floatów Divi na siatkę.

2. Divi podaje pliki już przycięte

W trybie siatki Divi wstawia rozmiar et-pb-portfolio-image, czyli 400 × 284 — twarde przycięcie do poziomu. Pliki próbek są pionowe (595 × 842, format A4), więc do przeglądarki trafia już poziomy wycinek ze środka. Kwadrat wymuszamy potem przez object-fit: cover.

Znaczy to, że CSS nie cofnie przycięcia — przywrócenie pełnych plików wymagałoby filtru w motywie potomnym, a ten dotknąłby wszystkich galerii na stronie. Przy jednolitych teksturach okleiny dociecie jest niewidoczne, więc zostajemy przy CSS.

Jeden wyjątek widać w podglądzie: kolor-10-Metbrush-aluminium ma źródło 350 × 350, czyli za małe na przycięcie do 400 px szerokości. Divi podaje go w całości, a kwadrat i tak wychodzi — dlatego w siatce niczym się nie wyróżnia.

Co można przestawić bez ruszania reguł

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

• --g4h-kolumny — ile kafli w rzędzie (domyślnie 6)
• --g4h-kafel — szerokość kafla w procentach kolumny (domyślnie 15%, tyle ma oryginał)
• --g4h-odstep — odstęp między kaflami (domyślnie 10px)

Kafel liczony w procentach, a nie w pikselach, jest tu celowy: dzięki temu próbki mają tę samą wielkość względną w każdej szerokości kolumny i na telefonie. Zmierzone — oryginał: 60,4 px w kolumnie 470 px na monitorze i 41,8 px w kolumnie 345 px na telefonie; u nas 70,8 px w kolumnie 539 px.

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 — siatka

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

/* ---------- 2. SIATKA PROBEK KOLORU ---------- */

.g4h-kolory{
  --g4h-kolumny: 6;            /* oryginal: 6 w rzedzie na kazdej szerokosci */
  --g4h-kafel: 15%;            /* oryginal: li flex 0 0 15% szerokosci kolumny */
  --g4h-odstep: 10px;          /* oryginal: padding 5px z kazdej strony kafla */
}

/* Kafel liczony w procentach kolumny, tak jak w oryginale - dzieki temu
   probki maja te sama wielkosc wzgledna na kazdej szerokosci ekranu.
   Zmierzone: oryginal 60,4 px w kolumnie 470 px, u nas 70,8 px w 539 px;
   rzad zajmuje 475 z 539 px, oryginal 412 z 470 px. */
.g4h-kolory .et_pb_gallery_items{
  display: grid;
  grid-template-columns: repeat(var(--g4h-kolumny), calc(var(--g4h-kafel) - var(--g4h-odstep)));
  gap: var(--g4h-odstep);
  justify-content: start;
}

/* Kontener ma klase clearfix - w siatce jego ::after zrobilby sie
   dodatkowym, pustym kafelkiem. */
.g4h-kolory .et_pb_gallery_items::before,
.g4h-kolory .et_pb_gallery_items::after{ display: none; }

/* Divi rozstawia kafle floatem, a szerokosc bierze z rynny wiersza:
   .et_pb_gutters3 .et_pb_column_1_2 .et_pb_grid_item
   { width:44.18%; margin-right:11.64% } - swoistosc (0,3,0), stad !important. */
.g4h-kolory .et_pb_gallery_item{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

.g4h-kolory .et_pb_gallery_image,
.g4h-kolory .et_pb_gallery_image > a{ display: block; }

/* Divi podaje pliki juz przyciete do 400x284 (rozmiar et-pb-portfolio-image),
   wiec kwadrat wymuszamy tutaj. Probki to jednolite tekstury, wiec dociecie
   w pionie jest niewidoczne. */
.g4h-kolory .et_pb_gallery_image img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}