Tekstowy post bez obrazów czyta się 2-3 razy gorzej niż artykuł z warstwą wizualną. Obrazy rozbijają ścianę tekstu, utrzymują uwagę i pomagają wyjaśnić to, co trudno przekazać słowami. Ponadto obrazki w tekstach alternatywnych i nazwach plików przynoszą ruch z Grafiki Google, dla bloga technicznego to setki dodatkowych wejść miesięcznie.

Edytor Gutenberga (edytor blokowy WordPress) pracuje z obrazami bez żadnej wtyczki. Pięć wbudowanych bloków pokrywa wszystkie podstawowe scenariusze: od pojedynczego obrazka po galerie i pełnoekranowe okładki z warstwą tekstową. Jednak początkujący wciąż mają pytania: który blok wybrać, jak wyrównać obrazek, żeby tekst się nie rozjechał, jak ustawić dwa zdjęcia obok siebie albo do czego służy filtr duotone.

Poniżej, analiza krok po kroku każdego bloku z ustawieniami, o których milczą krótkie poradniki. Bez wtyczek, wyłącznie wbudowane narzędzia Gutenberga.

💡 Szybki przegląd:

• Proszę dodać pojedynczy obraz blokiem „Obraz" i skonfigurować wyrównanie przez pasek narzędzi, dla jednego zdjęcia to wystarczy
• Proszę umieścić obrazek obok tekstu za pomocą bloku „Media i tekst", sztywno trzyma proporcje, tekst nie nachodzi
• Proszę ustawić dwa lub więcej zdjęć w rzędzie blokiem „Galeria" i wskazać liczbę kolumn, siatka wyrównuje się automatycznie
• Proszę nałożyć tekst na zdjęcie blokiem „Okładka" z filtrami, nakładką i opcjonalnym efektem paralaksy
• Proszę włączyć lightbox w ustawieniach bloku „Obraz", obrazek otwiera się na pełny ekran bez przeładowania strony

Jakie bloki Gutenberga pracują z obrazami

WordPress od razu po instalacji daje pięć bloków związanych z obrazkami. Każdy rozwiązuje swoje zadanie, nie warto ich mylić.

• Obraz (Image), pojedynczy obrazek z ustawieniami wyrównania, podpisu, linku, filtrem duotone i lightboksem. Podstawowa cegiełka dla każdego wpisu. Dokumentacja
• Galeria (Gallery), siatka z kilku obrazów z ustawieniem kolumn. Zastępuje klasyczne galerie starego edytora i shortcode [gallery]. Dokumentacja
• Media i tekst (Media & Text), blok dwukolumnowy: po lewej (lub prawej) obrazek, obok tekst. Sztywne powiązanie bez przekosów przy zmianie rozdzielczości. Dokumentacja
• Okładka (Cover), obraz tła z warstwą tekstową i przyciskami na wierzchu. Konfiguruje się kolorową nakładkę, przezroczystość i stałe tło. Dokumentacja
• Plik (File), link do pobrania pliku z kartą. Do instrukcji PDF i archiwów, nie do pokazywania obrazka na stronie.

Pierwsze cztery to Pana/Pani podstawowy arsenał. Bloku „Plik" nie używa się do ilustrowania treści, dlatego dalej omawiamy tylko bloki wizualne.

Jak dodać pojedynczy obraz i skonfigurować wyrównanie

Najczęstszy scenariusz: wstawić jeden obrazek do tekstu i dopasować jego położenie względem akapitów.

Proszę nacisnąć przycisk „+" (dodaj blok) w interfejsie edytora i wybrać „Obraz". Pojawi się okno przesyłania, można przeciągnąć plik z komputera, wybrać z biblioteki mediów WordPress lub wkleić URL. Po przesłaniu obrazek od razu pojawia się w edytorze, a nad nim wysuwa się pasek narzędzi z przyciskami wyrównania.

Dostępne opcje wyrównania:

• Do lewej, obrazek jest dociśnięty do lewej, tekst opływa go z prawej
• Do środka, obraz na środku, tekst na górze i na dole
• Do prawej, lustrzany wariant wyrównania do lewej
• Szeroka szerokość, obrazek wychodzi poza obszar bloku tekstowego, ale nie na cały ekran
• Pełna szerokość, obraz rozciąga się od krawędzi do krawędzi obszaru treści

Niebieskie punkty na rogach obrazka pozwalają zmienić rozmiar przeciąganiem, nie trzeba wyliczać pikseli w CSS. W panelu bocznym po prawej (zakładka „Blok") konfiguruje się tekst alternatywny dla SEO oraz link, pod który przejdzie użytkownik po kliknięciu obrazu.

Dwie rady, które oszczędzą czas. Pierwsza: proszę włączyć lightbox (opcja „Enlarge on click" w ustawieniach linku bloku), po kliknięciu obrazek otwiera się na pełny ekran, użytkownik nie opuszcza strony. Druga: filtr duotone (ikona koła na pasku narzędzi bloku) zmienia gamę kolorystyczną obrazu bez Photoshopa, przydatne, gdy zrzuty ekranu z różnych źródeł wizualnie się „gryzą". Filtr nie zmienia pliku źródłowego w bibliotece mediów, zawsze można go zresetować.

Jest jednak pewien niuans: wyrównanie „do lewej" i „do prawej" działa dobrze tylko wtedy, gdy tekst jest wystarczająco długi. Jeśli akapit jest krótki, obrazek „wypada" z przepływu i następny nagłówek na niego nachodzi. W takich przypadkach lepiej użyć bloku „Media i tekst".

Blok „Media i tekst": obrazek i akapit w jednym powiązaniu

Blok Media & Text sztywno ustala proporcje: połowa szerokości, obraz, połowa, tekst. Żadnych przekosów przy zmianie rozdzielczości ekranu.

Dodaje się go tak samo: przycisk „+", wyszukanie „Media i tekst". Wybiera Pan/Pani obrazek i pisze tekst w sąsiedniej kolumnie. W panelu bocznym dostępne są przełączniki:

• Zamień miejscami (obrazek po lewej lub po prawej)
• Tryb pełnoekranowy (rozciągnij na całą dostępną szerokość)
• Kolor tła dla połowy tekstowej

Blok jest szczególnie wygodny do instrukcji krok po kroku: po lewej zrzut ekranu ustawienia, po prawej, opis tego, co się na nim dzieje. Czytelnik nie traci związku między tekstem a obrazkiem podczas przewijania.

W praktyce Media & Text ratuje również w bardziej przyziemnych sytuacjach. Na przykład wstawił Pan/Pani zrzut ekranu z wyrównaniem do lewej, a następny H2 „najechał" na obrazek. Na zmianę struktury akapitów jest za późno, zawija Pan/Pani obrazek i tekst w Media & Text i problem znika w 10 sekund.

Jak umieścić dwa i więcej obrazków obok siebie za pomocą bloku galerii

Jeśli trzeba pokazać serię zrzutów ekranu lub zrobić zestaw zdjęć, proszę użyć bloku „Galeria". W przeciwieństwie do starego edytora classic, gdzie galeria żyła jako osobny shortcode [gallery], Gutenberg zarządza nią wizualnie.

Proszę dodać blok „Galeria", przesłać potrzebne obrazy, automatycznie ułożą się w siatkę. W ustawieniach bloku (prawy panel) proszę wybrać liczbę kolumn: 2, 3, 4 lub więcej. Dla dwóch obrazków obok siebie proszę ustawić „2 kolumny", powstanie schludny rząd bez ręcznego dopasowywania rozmiarów.

Dodatkowe możliwości bloku galerii:

• Kadrowanie miniaturek, wszystkie obrazki są sprowadzane do jednego rozmiaru, siatka wygląda równo
• Ustawienie odstępów między obrazami
• Przypisanie linku do każdego obrazka osobno

Jeśli projekt wymaga niestandardowego układu (obrazki różnej wielkości w jednej siatce), możliwości wbudowanej galerii mogą być niewystarczające. Wtedy z pomocą przychodzi blok „Kolumny" (Columns), do jego wnętrza zagnieżdża się osobne bloki „Obraz" z niezależnymi ustawieniami. Jednak do typowych scenariuszy galeria dostępna od razu po instalacji jest wystarczająca.

Proszę zwrócić uwagę: nie należy mylić bloku „Galeria" z kilkoma blokami „Obraz" rozstawionymi w kolumnach. Galeria automatycznie kadruje miniatury, wszystkie obrazki wyglądają jednakowo pod względem wysokości, niezależnie od wyjściowych proporcji. Kolumny takiego dopasowania nie robią: jeden obrazek okazuje się wyższy od drugiego i rząd „płynie". Do szybkiego zestawu zdjęć, galeria, do rozkładu co do piksela, kolumny.

Jak nałożyć tekst na obraz za pomocą bloku „Okładka"

Blok „Okładka" to obraz tła z warstwą tekstową. W istocie, baner wewnątrz wpisu. Używa się go do formatowania sekcji artykułu, cytatów lub kluczowych wniosków.

Proszę wybrać blok „Okładka", przesłać obraz i wpisać tekst bezpośrednio na nim. W panelu bocznym konfiguruje się:

• Kolor nakładki, półprzezroczyste wypełnienie na obrazie, czyni tekst czytelnym na każdym tle
• Przezroczystość, intensywność nakładki od ledwo zauważalnej do prawie jednolitej
• Stałe tło, podczas przewijania strony obrazek pozostaje na miejscu (efekt paralaksy)
• Powtórzenie tła, wypełnienie bloku powtarzalnym wzorem, do tekstur i deseni

Stałe tło to popularny chwyt w landing page’ach i portfolio na WordPressie. Wygląda efektownie, ale na urządzeniach mobilnych często jest wyłączane przez przeglądarkę ze względu na wydajność. Proszę nie liczyć na nie jako na główny chwyt dla telefonów.

Blok „Okładka" zagnieżdża się w innych blokach: wewnątrz kolumn, grupy lub wiersza. A na okładce można umieścić nie tylko tekst, ale i przycisk: proszę dodać blok „Przyciski" do wnętrza okładki i powstanie gotowy baner CTA z tłem. Cały zestaw narzędzi, bez CSS i dodatkowych wtyczek.

Jeśli okładka spowalnia ładowanie na urządzeniach mobilnych, proszę wyłączyć stałe tło i skompresować obrazek do 200-250 KB. WordPress od wersji 5.8 automatycznie konwertuje PNG i JPEG do WebP podczas przesyłania, ale plik źródłowy lepiej przygotować wcześniej przez TinyPNG lub konwersję do AVIF.

⁉️🤔 Częste pytania

Dlaczego po dodaniu obrazka tekst „skacze" i nachodzi na sąsiednie bloki?

Dzieje się tak, gdy obraz jest wyrównany do lewej lub prawej, a otaczającego tekstu jest za mało. Gutenberg nie „podpiera" wysokości bloku pod obrazek automatycznie, orientuje się według objętości otaczającego tekstu. Rozwiązanie: proszę zawinąć obrazek i tekst w blok „Media i tekst", sztywno trzyma proporcje. Albo proszę dodać jeszcze 2-3 linijki tekstu, żeby opływanie zadziałało poprawnie.

Czym blok „Galeria" różni się od kilku bloków „Obraz" ustawionych w kolumnach?

Galeria daje jednolitą siatkę z automatycznym kadrowaniem miniaturek, wszystkie obrazki wyglądają jednakowo pod względem rozmiaru, niezależnie od wyjściowych proporcji. Kolumny z osobnymi obrazami takiego dopasowania nie robią: jeden obrazek może okazać się wyższy od drugiego i rząd „płynie". Do szybkiego zestawu zdjęć proszę brać galerię, do dokładnego rozkładu co do piksela, kolumny.

Czy można dodać tekst alternatywny od razu dla kilku obrazków w galerii?

Nie, blok „Galeria" nie obsługuje masowej edycji tekstów alternatywnych. Każdy obraz w galerii to osobny plik multimedialny i tekst alternatywny ustawia się indywidualnie: proszę kliknąć konkretny obrazek w galerii, przejść do panelu bocznego i wypełnić pole „Tekst alternatywny". Albo proszę wpisać tekst alternatywny zawczasu w bibliotece mediów WordPress, wtedy przy wstawianiu zostanie automatycznie pobrany.

Blok „Okładka" spowalnia ładowanie strony na urządzeniach mobilnych. Jak to naprawić?

Stałe tło (paralaksa) to główny winowajca. Proszę wyłączyć opcję „Stałe tło" w ustawieniach bloku, a przeglądarka przestanie renderować ciężki efekt przy przewijaniu. Krok drugi, proszę kompresować obrazek na okładkę do 200-250 KB: serwisy typu TinyPNG lub konwersja do WebP/AVIF zmniejszają rozmiar bez widocznej utraty jakości. WordPress 5.8+ sam konwertuje PNG i JPEG do WebP przy przesyłaniu, ale plik źródłowy lepiej przygotować wcześniej.

Czy jest sens używać bloku „Plik", jeśli chcę po prostu pokazać obrazek?

Nie. Blok „Plik" wyświetla przycisk pobierania i nazwę pliku, a nie sam obraz. Jest potrzebny do instrukcji PDF, archiwów ZIP, plików CSV i innych dokumentów, które użytkownik musi zapisać na urządzeniu. Do pokazywania obrazka zawsze proszę używać bloku „Obraz".

Czym lightbox w Gutenbergu różni się od wtyczek lightboksa takich jak FooBox lub Meow Lightbox?

Wbudowany lightbox (opcja „Enlarge on click" w ustawieniach linku bloku „Obraz") działa bez dodatkowego kodu i nie koliduje z motywami, pojawił się w WordPress 6.4 pod koniec 2023 roku. Wtyczki dają więcej ustawień: podgląd galerii z przewijaniem, efekty przyciemnienia, licznik obrazów. Jeśli umieszcza Pan/Pani 2-3 obrazki na wpis, wbudowany wystarczy. Do galerii zdjęć i portfolio, proszę instalować wtyczkę.

Który blok wybrać do swojego zadania: krótkie podsumowanie

Gutenberg pokrywa wszystkie podstawowe scenariusze pracy z obrazkami bez żadnej wtyczki. Pojedynczy obraz proszę wstawiać przez blok „Obraz" i nie zapominać o tekście alternatywnym, to Pana/Pani główny zasób SEO dla Grafiki Google. Proszę włączyć lightbox: funkcja jest darmowa, a czytelnicy mobilni będą wdzięczni.

Potrzebne jest sztywne powiązanie „obrazek + tekst", proszę brać „Media i tekst", nie rozpada się na żadnym ekranie. Seria zdjęć, „Galeria" z ustawieniem kolumn, kadrowanie automatycznie wyrówna wszystko w linię. Tekst na zdjęciu, „Okładka" z nakładką i opcjonalną paralaksą, a do środka można dodać przycisk i uzyskać baner CTA.

Opanowanie tych czterech bloków jest realne w 10-15 minut we wpisie testowym. Proszę otworzyć szkic, przeciągać bloki po płótnie, interfejs Gutenberga jest stworzony do pracy wizualnej, a nie do kodu. Jeśli następny wpis wyjdzie z obrazkami, a nie ścianą tekstu, jest Pan/Pani już na plusie.