W sobotę pojawił się pierwszy wpis z cyklu “Obsługa Gutenberga”, w którym pokazałem krok po kroku jak dodać wpis za pomocą nowego edytora treści w WordPressie.
Dzisiaj kontynuując sobotni wątek publikuję instrukcję jak dodać wpis z galerią zdjęć, jak ją skonfigurować oraz w jaki sposób dodać efekt LightBox. Zaczynajmy!
Wpis z galerią w Gutenbergu
Utwórz nowy wpis za pomocą Kokpit > Wpisy > Dodaj nowy, a następnie zacznij pisać (podstawowa konfiguracja wpisu oraz bloku tekstowego – została opisana w części pierwszej – tutaj).
Powiedzmy, że po pierwszym akapicie chcemy umieścić galerię zdjęć, dodajemy nowy blok za pomocą “+”, który znajduje się na początku paska edytorskiego, następnie wybieramy zakładkę “Podstawowe bloki” i wybieramy “Galeria”.
W treści pojawił się nowy blok, który należy skonfigurować. Mamy do wybory wysłanie zdjęć na serwer (z dysku) lub wybranie zdjęć z biblioteki mediów (jeśli zdjęcia już są na serwerze).
Po dodaniu zdjęć (wgraniu na serwer) lub przejściu do biblioteki mediów zaznacz zdjęcia z których Gutenberg ma stworzyć galerię zdjęć.
Następnie wybierz po prawej stronie na dole “Stwórz nową galerię”.
Galeria została stworzona, kliknij ponownie po prawej stronie na dole “Wstaw galerię”.
Gutenberg umieścił nowy blok w treści. Dodaj, zmodyfikuj lub usuń podpisy na zdjęciach (po kliknięciu w zdjęcie).
Gdy w treści wpisu aktywnym, zaznaczonym blokiem jest galeria, to po prawej stronie w zakładce “Blok” mamy dostęp do konfiguracji.
- Wybieramy ilość kolumn – pamiętaj jeśli dodajesz bardzo dużo zdjęć to lepiej zwiększyć ilość kolumn, nikt chyba nie będzie chciał “godzinę” przewijać zdjęcia
- Wyłącz / Włącz przycinanie obrazków
- Odnośnik do… i tutaj jeśli dodajemy kilka zdjęć, które są na tyle duże, będą wyświetlane np. w 2 kolumnach i nie potrzebują efektu “LightBox” to Odnośnik do pozostaje “Brak”, jeśli chcemy dodać galerię z efektem “LightBox” to bezwzględnie wybieramy “Plik multimedialny”
- W ustawieniach zaawansowanych mamy możliwość nadania dodatkowej klasy css, którą później można w dostylować w swoim motywie potomnym
Po skonfigurowaniu i zakończeniu prac nad wpisem, opublikuj go.
Jak dodać efekt LightBox do galerii zdjęć?
Galeria została utworzona i poprawnie skonfigurowana, ale jak dodać efekt “LightBox” czyli wyskakujące okienko ze zdjęciem, z możliwością przeglądania całego albumu? Będziemy potrzebować wtyczkę “Simple Lightbox”, którą znajdziesz w Kokpit > Wtyczki > Dodaj nową.
Wpisz słowo kluczowe “lightbox”, zainstaluj oraz włącz wtyczkę “Simple Lightbox”, tak jak na zrzucie ekranu poniżej.
Następnie na liście wtyczek wybierz “Settings” i przejdź do konfiguracji.
Teoretycznie domyślna konfiguracja “Simple Lightbox” powinna wystarczyć i w zasadzie nie ma potrzeby, żeby tutaj cokolwiek majstrować, chyba, że interesują Cię jakieś zaawansowane funkcje, wyłączenie/włączenie lightboxa na stronie głównej, wyłączenie/włączenie grupowania zdjęć itd. to poniżej masz pełną listę dostępnych funkcji, które możesz wyłączyć/włączyć w wtyczce.
Mamy to – galeria z efektem LightBox w Gutenbergu
Po publikacji wpisu i aktywowaniu wtyczki “Simple Lightbox” otwórz wpis na nowej karcie w przeglądarce i sprawdź czy działa, czy galeria posiada efekt lightbox, czy po kliknięciu w miniaturę pojawia się okienko ze zdjęciem.
Jeśli tak, to znaczy, że wszystko wykonałeś poprawnie!
Jeśli masz problem w którymś punkcie, galeria nie działa, nie ma lightboxa itd. to pisz śmiało w komentarzu lub bezpośrednio na hello@wp-lab.pl postaram się pomóc.
