MODUŁ 0 - Przygotowanie do startu! 3... 2... 1...
MODUŁ 1 – Czy WordPress jest w ogóle dla mnie?
MODUŁ 2 - MYŚLENIE, czyli szykujemy się do starcia! ;)
MODUŁ 3 – Ogarniamy DZIAŁKĘ i tabliczkę z adresem
MODUŁ 4 – Działka jest. Czas na DOM, drzewo i…
MODUŁ 5 – Dodajemy TREŚCI, czyli niech wreszcie coś zacznie się dziać
MODUŁ 6 - BACKUPUJEMY, ZANIM ZEZPSUJEMY ;)
MODUŁ 7 - MOTYWY, CZYLI PEŁEN MAKE-UP DLA STRONY
MODUŁ 8 - WTYCZKI, CZYLI CO JESZCZE MOŻEMY ODPICOWAĆ

8.8. Przydatne wtyczki – lightbox, czyli sposób na prostą galerię

Miałam napisać – “lightbox, czyli bida-galeria”, ale tak po prawdzie to mi przez klawiaturę nie przeszło, bo to rozwiązanie na galerię, czyli zwykła Gutenbergowa galeria (blok taki) ożeniona z lightboksem, to jest świetna sprawa 😍

Czasem naprawdę te banalne rozwiązania okazują się najlepsze (i ja bardzo lubię te sytuacje 😊)

Dlatego na początek przygody z tworzeniem galerii właśnie to rozwiązanie Wam polecam.

To rozwiązanie, czyli:

➡️ Krok 1: utworzenie w pożądanym miejscu na stronie czy we wpisie galerii za pomocą odpowiedniego bloku Gutenberga

➡️ Krok 2: instalacja wtyczki WP Featherlight – A Simple jQuery Lightbox (i włączenie jej, jasna sprawa 😃)

➡️ Krok 3: zaznaczenie we właściwościach bloku galeria tego drobnego detalu, który sprawi, że zdjęcia będą się otwierać do podejrzenia na czymś w rodzaju dodatkowej warstwy nałożonej na stronę 🙂

I tyle 😊 Cała robota 😊

To teraz do roboty:

Krok 1: Galeria

Galerię tworzymy korzystając z Gutkowego bloku Galeria. Zero zaskoczeń póki co (spoiler: cała ta lekcja taka będzie – dość przewidywalna 😉)

Tworzymy więc podstronę, na której chcemy umieścić galerię, a potem dodajemy blok Galeria:

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu

Pojawi się pusty blok bez zdjęć, bo zdjęcia będzie trzeba dopiero wybrać korzystając z Biblioteki mediów:

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu - biblioteka mediów

Wskakujemy więc do niej i zwykłymi klikami wybieramy zdjęcia, które chcemy umieścić w galerii. Przy wybranych pokażą się ptaszki, a dodatkowo w dolnej części ekranu zobaczymy podgląd wybranych pozycji.

Po wyklikaniu wszystkich zdjęć do galerii, zatwierdzamy przyciskiem Utwórz galerię:

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu - wybór zdjęć

Ale to jeszcze nie koniec, bo jeeeeszcze zobaczymy ekran edycji galerii. Tu możemy poprzestawiać zdjęcia, gdyby ich kolejność nam nie odpowiadała.

Gdy wszystko jest już git, klikamy finalny przycisk, czyli Wstaw galerię:

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu - układanie zdjęć w galerii

I już galeria ląduje na swoim miejscu.

W podglądzie listy bloków zobaczymy, że tak strukturalnie to po prostu jeden zbiorczy blok Galeria, w którym zagnieżdżone są cztery pojedyncze zdjęcia w blokach Obrazek. Żadne tam wielkie i skomplikowane rzeczy 🙂

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu - lista bloków

I w podglądzie strony galerię też już widać:

Tworzenie galerii zdjęć na WordPressie - tworzenie galerii blokiem Galeria w Gutenbergu - widok gotowej galerii

Te zwykłe Gutenbergowe galerie są naprawdę bardzo spoko, bo generalnie całkiem godnie wyglądają pod kątem wizualnym. Nie trzeba przycinać zdjęć, jakoś ich dopasowywać do siebie wielkością ani w inny sposób się nad tematem modlić. Ot, wrzucamy foty i WordPress robi taką sztuczkę, że wszystko to dobrze się prezentuje.

Jedyny minus jest taki, że galeria zdjęć sobie jest, ale po kliknięciu w pojedynczą fotkę otwiera się ona zamiast strony, którą oglądamy. Więc żeby wrócić, musimy kliknąć Wstecz.

Nie da się też przewijać zdjęć strzałkami, więc i pod względem wygody – tak sobie.

Trza to polepszyć 🙂

Krok 2: Lightbox

Kolejnym krokiem będzie więc wyszukanie w repozytorium i zainstalowanie (oraz włączenie :D) wtyczki WP Featherlite:

Tworzenie galerii zdjęć na WordPressie - prosta galeria w Gutenbergu i Lightbox - wtyczka do wyświetlania zdjęć w lightboksie

Wiem, że może budzić lekki niepokój data jej ostatniej aktualizacji i brak testów z nowym WordPressem, ale wszystko z nią OK. To po prostu bardzo prosta, lekka wtyczka, która nie jest gigakombajnem, więc póki nic kluczowego nie zmienia się w samym WordPressie, ona też nie potrzebuje zmian i uaktualnień, aby ciągle dobrze działać 🙂

Można śmiało instalować 🙂

Krok 3: Ożenienie galerii z lightboksem

No i teraz zasadniczo, już po samym włączeniu wtyczki WP Featherlite, wszystko powinno działać należycie.

Dobrze czytacie – wystarczy włączyć, nie trzeba niczego żmudnie konfigurować.

Po samym włączeniu wtyczki galeria będzie działać tak, że po kliknięciu w zdjęcie na stronę nałoży się ciemna, półprzejrzysta warstwa, a na niej pojawi się powiększona fotka. Do przeglądania kolejnych fotek będzie już teraz można używać strzałek 🙂

Czegóż można chcieć więcej? 😀

Tworzenie galerii zdjęć na WordPressie - prosta galeria w Gutenbergu i Lightbox

Będzie to w 99,9 przypadkach na 100 działać od kopa samo, po prostu po włączeniu wtyczki. Gdyby się jednak okazało, że u Was nie działa – nie lękajcie się, rozwiązanie jest banalne 🙂

Trzeba wrócić do bloku Galeria, kliknąć po kolei fotki i zobaczyć, czy pod ikonką łańcucha mają ustawione linkowanie do pliku multimedialnego (poprawnie), czy strony załącznika (niepoprawnie).

Jeśli do strony załącznika, klikamy w kredeczkę, aby to zmienić:

Tworzenie galerii zdjęć na WordPressie - prosta galeria w Gutenbergu i Lightbox - naprawianie problemów z lightboksem

a następnie wybieramy Plik multimedialny:

Tworzenie galerii zdjęć na WordPressie - prosta galeria w Gutenbergu i Lightbox - naprawianie problemów z lightboxem

I tak po kolei z każdym zdjęciem, a na koniec zapisujemy zmiany 🙂

I już teraz galeria z poglądem z lightboksie (czyli tej półprzejrzystej warstewce) powinna grać i buczeć 🙂

Masz pytanie do tej lekcji? Kliknij tutaj, aby je zadać :)

Napisz pytanie lub komentarz:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Przewiń do góry