BLOG

Porównywanie zdjęć czyli efekt “przed i po” na blogu WordPress

Share on facebook
Share on twitter
Share on linkedin

Podczas przygotowania ostatniego artykułu na bloga wynikła potrzeba wstawienia 2 zdjęć w postaci „przed i po”. Na początku dodałem zdjęcia obok siebie i napisałem odpowiednie nagłówki. Ale potem zastanowiłem się czy nie ma już gotowej wtyczki, która porówna zdjęć przed i po?. Chodzi mi o takie coś, gdy jeden obraz nakłada się na drugi i można za pomocą suwaka pokazać efekt jaki wyglądało zdjęcie „przed” czyli np. przed edycją a następnie „po” czyli po edycji. Często taki efekt pokazywany jest w programach gdzie dokonuje się np. metamorfozy wnętrza pokoju. W ciekawy sposób można przedstawić jak coś zostało zmienione. Takie rozwiązanie popularne jest również na stronach internetowych oraz w sklepach internetowych. Po szybkim wyszukiwaniu w Google znalazłem kilka rozwiązań, które następnie przetestowałem. Spodobało mi się jedno rozwiązanie, które opiszę poniżej.
W repozytorium WordPress dostępne są wtyczki rozwiązania dodające funkcję „przed i po” do popularnych edytorów, w tym do Elementora. Niestety Gutenberga nie ma na tej liście. Więc, gdy prowadzicie bloga w oparciu o WordPress 5.x i korzystacie z niego, musicie przywrócić klasyczny edytor. Zrobić to można za pomocą wtyczki Klasyczny edytor, która jest dostępna na repozytorium WordPress. Warto zaznaczyć, że została ona stworzona przez deweloperów samego systemu, więc jest bezpieczna.

W przypadku, gdy korzystacie z Elementora lub też korzystanie w dalszym ciągu z klasycznego edytora WordPress, możecie zainstalować interesującą nas wtyczkę Twenty20 Image Before-After. Ona także jest dostępna na stronie wordpress.org i może być dodana na stronę bezpośrednio z panelu administracyjnego WordPress.
Po instalacji i aktywacji powyższej wtyczki można przejść do tworzenia nowego wpisu. Pokażę jak wygląda dodanie zdjęć w klasycznym edytorze i Elementorze.

Klasyczny edytor – wstawienie efektu “przed i po”

Podczas tworzenia nowego wpisu (sekcja Wpisy – Dodaj nowy) domyślnie otwiera się Gutenberg (rys. 1).

Dodanie nowego wpisu w Gutenbergu

Aby przełączyć się w klasyczny edytor warto otworzyć menu ukryte w 3 kropkach i kliknąć w przycisk Switch to Classic Editor (rys. 2).

Przełączenie edytora gutenberg
W oknie klasycznego edytora pojawi się dodatkowy przycisk Add Twenty20 (rys. 3), który pomoże porównać wybrane zdjęcia.

Przycisk dla porównywania zdjęcia w edytorze
Klikając w ten przycisk wybieramy 2 zdjęcia z galerii (rys. 4):

Wybór zdjęć do porównania
Dalej pojawi się okno z ustawieniami dla porównywania (rys. 5). Możemy tutaj zostawić wszystko bez zmian.

Ustawienie porównywania
Po dodaniu shortcode z porównaniem zdjęć (rys. 6), możemy wstawić potrzebne zawartości do wpisu.

Shortcodes porównywania zdjęć we wpisie
Po opublikowaniu wpisu strona będzie wygładzać następująco (rys. 7):

Porównywanie zdjęć na stronie
Jak widać z powyższego rysunku, porównywanie zdjęć działa właśnie tak jak zaplanowaliśmy.

Elementor – wstawienie efektu “przed i po”

Przede wszystkim przechodzimy do sekcji Wpisy – Dodaj nowy. W nowym oknie (rys. 1) klikamy w przycisk Edytuj w Elementorze (rys. 8).

Przełączenie w Elementor
Dalej pojawi się nowy blok, który informuje, że edytować zawartość strony można w edytorze. Po kliknięciu w ten blok otworzy się sam Elementor (rys. 9).

Edycja wpisu w Elementorze
Na panelu z widgetami dostępny jest element Twenty20 image Before-After (rys. 10). Przeciągamy go na stronę.

Widget Twenty20 image Before-After
W panelu bocznym otworzy się menu, które pozwała ustawić pierwsze i drugie zdjęcie. Natomiast do zawartości strony będzie dodany odpowiedni shortcode (rys. 11).

Ustawienie zdjęć przed po
Po dodaniu zdjęć, tekstu i publikacji wpisu, strona wygląda następująco (rys. 12):

Porównywanie zdjęć na stronie
Jak widać z rysunku 12, wszystko także działa poprawnie.

Podsumowanie

Jeśli poszukujecie proste i wygodne rozwiązanie do porównania zdjęć przed i po, możecie skorzystać z dostępnych wtyczek dla WordPress. W tym wpisie opisaliśmy jedne z gotowych rozwiązań, które działa również w edytorze klasycznym, jak i Elementorze. Wtyczka jest prosta w obsłudze i kompatybilna z nowymi wersjami WordPress. Jedynie, na co warto skupić uwagę, to datę ostatniej aktualizacji: 6 miesiące temu. Spodziewam się, że twórcy nie przestaną rozwijać wtyczki i będę dalej ją wspierać.

P.S. Korzystacie z innego rozwiązania? Proszę podzielić się własnym doświadczeniem.


DZIEWCZYNA ZA BLOGIEM

Jestem Kamila Nitschka

Jestem tutaj, aby szybko i łatwo stworzyć stronę internetową Twoich marzeń lub nauczyć Cię jak możesz to zrobić sama w prosty sposób i bez stresu oczywiście wykorzystując w tym celu WordPressa.

Kategorie

Share on facebook
Share on google
Share on twitter
Autor artykułu

2 thoughts on “Porównywanie zdjęć czyli efekt “przed i po” na blogu WordPress”

  1. Ciekawie rozwiązanie.Można to zastosować w wielu sytuacjach na blogu.
    Np.
    jak ktoś robi remonty, porównanie jakiś sytuacji, krajobrazów itp. Muszę to przetestować u siebie. Dzięki za sugestię.

Komentowanie jest zablokowane.