Jak dodać galerię do WordPressa

Dodanie i konfiguracja galerii w edytorze blokowym WordPressa jest dużo wygodniejsza niż zarządzenie galerią kiedyś, w tak zwanym edytorze klasycznym.

W tym wpisie podsumowuję najważniejsze rzeczy, które musisz wiedzieć, żeby sprawnie tworzyć galerie zdjęć w WordPressie.

Co to jest galeria zdjęć i czym różni się od grupy zdjęć dodanych osobno?

Co to jest galeria?

Galeria zdjęć w WordPressie to grupa zdjęć, które są połączone razem, w jeden blok. Dzięki temu łatwo takimi zdjęciami zarządzać, na przykład poukładać je w odpowiedniej kolejności czy zaplikować jakieś ustawienie lub efekt specjalny do wszystkich zdjęć na raz.

Takim efektem specjalnym może być przykładowo zaciemnienie zdjęcia (ang. fade) podczas najazdu myszą czy powiększenie obrazka w płynnie otwierającym się okienku (ang. lightbox).

Przykład galerii

Poniżej widzimy prostą galerię z kwadratowymi miniaturami, która jest dodana bezpośrednio do tego wpisu:

1. 
   

Lew

1. 
   

Jeż

1. 
   

Konie

1. 
   

Żyrafa

1. 
   

Lis

1. 
   

Orzeł

1. 
   

Tygrysy

1. 
   

Kotek

Galeria dodana do wpisu na WordPressie – wykorzystano blok Galeria

Przykład 4 zdjęć dodanych osobno

To co widzisz poniżej, to nie jest galeria w rozumieniu WordPressa, lecz 4 osobne bloki Obrazek wewnątrz bloku Kolumny.

Lis

Orzeł

Tygrysy

Kotek

Mimo, że wersja z osobnymi obrazkami z pozoru niewiele się różni od obrazków zgrupowanych w galerię, ciężko będzie nam takimi obrazkami zarządzać hurtowo. Dla przykładu spróbuj zmniejszyć liczbę kolumn do trzech i zobacz co się stanie.

Jak galeria wygląda w edycji strony

A zatem, jeśli chcesz wygodnie zarządzać grupą obrazków jako całością, zgrupuj je w blok galeria. Tak wygląda blok galeria wewnątrz wpisu:

Widok galerii WordPressowej w edycji wpisu

Jak dodać galerię do WordPressa

Dodanie galerii do strony lub wpisu w WordPressie jest bardzo proste:

1. Otwórz stronę lub wpis do edycji.

2. Zaznacz grupę zdjęć na swoim dysku i przeciągnij je do strony lub wpisu. Gdy zobaczysz niebieski pasek, upuść zdjęcia. WordPress automatycznie utworzy blok Galeria.

3. W bloku Galeria ustaw liczbę kolumn.

4. Zostaw włączoną opcję „Przytnij obrazki”, jeśli chcesz, żeby obrazki miały tę samą wysokość.

5. W sekcji Odnośnik wybierz Plik multimedialny.

6. W sekcji Rozmiar obrazka wybierz Miniaturka.

Utworzenie galerii w WordPressie

Uwaga! Wybranie opcji Miniaturka jest bardzo ważne, żeby niepotrzebnie nie obciążyć strony zbyt dużymi obrazkami. Jeśli nie pasuje Ci kształt i rozmiar mianiaturek, przejdź do punktu Jak zmienić rozmiar i proporcje miniaturek w galerii i sprawdź jak odpowiednio je dostosować.

Jak dodać teksty alternatywne do zdjęć w galerii

Do każdego obrazka w galerii możesz dodać tzw. tekst alternatywny (atrybut alt), który w formie tekstowej informuje, co przedstawia obrazek.

Teksty alternatywny są wykorzystywane przez czytniki ekranów i dobrze wpłyną na SEO Twojej strony.

1. Kliknij na blok Galeria.

2. Kliknij na Biblioteka mediów na dole bloku Galeria.

3. Przyjdź do zakładki Edytuj galerię.

4. Kliknij na obrazek w galerii.

5. W polu Alternatywny tekst prowadź opis obrazka.

6. Powtórz kroki 4-5 dla pozostałych zdjęć w galerii.

7. Kliknij Aktualizuje galerię.

Dodawanie tekstów alternatywnych do galerii w WordPressie

Uwaga! Po zakończeniu edycji galerii, upewnij się, że Rozmiar obrazka w ustawianiach bloku Galeria wciąż jest ustawiony na Miniatura (kiedy piszę ten wpis, jest błąd w WordPressie 5.6, który gubi poprzednie ustawienia rozmiaru obrazka po edycji galerii).

Jak dodać podpisy do zdjęć

Dodanie podpisów do zdjęć w galerii w blokowym edytorze WordPressa jest bardzo proste:

1. Kliknij na zdjęcie w bloku Galeria.

2. Na dole zdjęcia zobaczysz tekst “Wprowadź podpis”. Kliknij na ten obszar i podaj krótki opis zdjęcia np. Bitwa na śnieżki lub Stare miasto.

Dodawanie podpisów zdjęć w galerii w WordPressie

W ten sposób dodajemy podpisy do miniaturek zdjęć. To czy podpisy pojawią się również na zdjęciach po powiększeniu, zależy od wtyczki jakiej użyjemy do otwierania zdjęć z efektem lightbox. Więcej na ten temat w punkcie Otwieranie zdjęć w pop-upie (lightbox).

Jak dodać kolejne zdjęcia do istniejącej galerii

Jeśli chcesz do bloku galeria dołożyć kolejne zdjęcia z dysku, wystarczy że przeciągniesz je myszą na obszar galerii.

Poniżej opisuję, jak dodać zdjęcia, które wcześniej umieściłeś w Bibliotece Mediów swojego WordPressa:

1. Wybierz blok galeria.

2. Kliknij przycisk Biblioteka mediów na dole bloku Galeria.

3. Upewnij się, że jesteś w zakładce Dodaj do galerii.

4. Kliknij na zdjęcia, które chcesz dodać. Jeśli chcesz dodać więcej zdjęć na raz, przytrzymaj klawisz Crtl (Cmd na Macu) na klawiaturze.

5. Kliknij „Dodaj do galerii”.

6. Kliknij „Aktualizuj galerię”.

Jak zmienić rozmiar i proporcje miniaturek w galerii

Domyślnie rozmiary miniaturek zdjęć w WordPressie mają wymiary 150×150 pikseli i zdjęcia miniaturek są automatycznie przycinane do tych rozmiarów podczas ładowania ich do WordPressa.

Rozmiar miniatur w WordPressie kontrolowany jest w Ustawianiach mediów (Ustawienia > Media)

Jeśli Twoje oryginalne zdjęcie nie było kwadratowe, to przycięcie nastąpi ze stratą (miniaturka pokaże środkową część zdjęcia).

Oryginalne rozmiary obrazków

Wszystkie te ustawienia możesz zmienić, ale uwaga! Należy to zrobić przed wrzuceniem zdjęć do WordPressa.

W celu zmiany rozmiarów miniaturek zdjęć wykonaj następujące kroki:

1. W panelu WordPress przejdź do Ustawienia -> Media.

2. W sekcji Rozmiar miniatury wprowadź nowe wartości w polach Szerokość i Wysokość. Są to wymiary w pikselach.

3. Zaznacz “Przytnij miniaturę do podanych wymiarów”, jeśli chcesz, aby podczas ładowania zdjęć do WordPressa, WordPress przyciął obrazki miniatur do podanych rozmiarów zarówno w pionie jak i w poziomie.

Przytnij miniaturę – zaznaczać czy nie?

Jeśli nie zaznaczysz opcji przycinania, WordPress również pomniejszy obrazki miniatur podczas ładowania zdjęć, ale wybierze sobie tylko jeden z tych wymiarów, to znaczy albo Szerokość, albo Wysokość, w zależności od orientacji zdjęcia (czy pionowa, czy pozioma).

Zdjęcia o orientacji poziomej, zostaną przycięte do rozmiaru podanego w parametrze Szerokość, a zdjęcia o orientacji pionowej zostaną przycięte na wysokość podaną w polu Wysokość. Drugi wymiar będzie proporcjonalny, tak aby zachować oryginalne proporcje obrazka.

Najlepiej zrozumieć to na przykładach.

Poniżej pokazuję, jakie miniatury utworzy WordPress przy różnych wariantach ustawień rozmiarów miniatur w Ustawiania -> Media i włączonej lub wyłączonej opcji przycinania.

Oryginalne rozmiary obrazków

Jakie miniatury zostaną utworzone przy ustawieniach szerokość 400, wysokość 400 i włączonej opcji przycinania miniatur

Jakie miniatury zostaną utworzone przy ustawieniach szerokość 400, wysokość 400 i wyłączonej opcji przycinania miniatur

Jakie miniatury zostaną utworzone przy ustawieniach szerokość 400, wysokość 225 i włączonej opcji przycinania miniatur

Jakie miniatury zostaną utworzone przy ustawieniach szerokość 400, wysokość 225 i wyłączonej opcji przycinania miniatur

Otwieranie zdjęć w pop-upie (lightbox)

Żeby zdjęcie się powiększało po kliknięciu na miniaturkę, należy w bloku galeria ustawić opcję Obrazek na Plik multimedialny.

Wówczas WordPress wyświetli zdjęcie w oryginalnym rozmiarze po kliknięciu na zdjęcie.

Pewnie szybko zauważysz, że w tym przypadku będzie utrudniona nawigacja między kolejnymi zdjęciami. Trzeba będzie klikać klawisz wstecz w przeglądarce, żeby wrócić do galerii.

Żeby zdjęcie otwierało się w pop-upie (tzw. lightbox), musimy, posłużyć się wtyczką.

Otwieranie zdjęcie po kliknięciu – tzw. lighbox

Oto kilka przykładowych wtyczek, które oferują otwieranie zdjęć z efektem lightbox:

1. Simple Lightbox

2. Responsive Lightbox & Gallery

3. Easy FancyBox

Ja na tym blogu używam wtyczki Easy FancyBox.

Wtyczkę wystarczy włączyć i bez modyfikacji ustawień domyślnych od razu zobaczymy efekt.

Czasami motyw (np. popularny darmowy motyw OceanWP) oferuje taką możliwość i wtyczka typu lighbox jest niepotrzebna.

Jak zmieniać kolejność zdjęć w galerii WordPressa

Aby poukładać zdjęcia w odpowiedniej kolejności, można posłużyć się strzałkami widocznymi na każdym ze zdjęć w bloku galeria.

Zmiana kolejności zdjęć w galerii za pomocą strzałek

Ta…

Ten sposób nie jest najwygodniejszy, zwłaszcza jeśli mamy dużo zdjęć.

Jeśli lubisz sortowanie metodą drag-and-drop, to łatwiej będzie Ci poukładać zdjęcia po otwarciu galerii do edycji:

Jak szybko posortować zdjęcia w galerii

1. Kliknij w przycisk Biblioteka mediów na dole galerii.

2. Przejdź do zakładka Edytuj galerię.

3. Przestawiaj obrazki za pomocą przeciągnięć myszy.

4. Kliknij Aktualizuj galerię.

Sortowanie zdjęć w galerii WordPressa za pomocą drag-and-drop

Porada: Podczas edycji galerii możesz zwęzić okno przeglądarki, tak, aby liczba obrazków w wierszu odpowiadała liczbie kolumn w Twojej galerii (pokazuję tę sztuczkę w filmiku wspomnianym niżej).

Jak zarządzać galerią – filmik

1. YouTube

Wszystkie przedstawione tu metody pokazuję na przykładach krok po kroku w filmiku na moim kanale YouTube.

Dodatkowo z filmiku dowiesz się m.in:

1. Jak sprawdzić rozmiary i wymiary obrazków w przeglądarce.

2. Jak sprawdzić, w jaki sposób obrazki wpływają na szybkość ładowania Twojej strony.

WordPress galeria – filmik

Pytania?

Temat galeria w WordPress jest obszernym tematem, więc na pewno masz jakieś pytania. Śmiało zostaw je w komentarzu.

#Gutenberg