WordPress návody

Jak ve WordPress udělat porovnání fotografie před a po úpravě

Autor příspěvku Tomáš Cirkl

Upravujete fotografie a chcete ukázat porovnání, jak obrázek vypadal před a po úpravě? Dělali jste redesign stránek a chcete ukázat starý vzhled v porovnání s novým? V tomto článku si ukážeme, jak ve WordPress udělat posuvník, který porovnává dva obrázky.

Budeme k tomu používat plugin Twenty20 Image Before-After, který se nachází v oficiálním katalogu pluginů a můžete jej nainstalovat přímo z WordPress administrace.

Plugin Twenty20 Image Before-After

Twenty20 je WordPress plugin, který přidá funkci zobrazení obrázku před a po za pomocí posuvníku a překrytí dvou obrázků přes sebe. Plugin je responzivní a pro vložení porovnání využívá shortcody, které fungují i ve widgetech.

Plugin Twenty20

Plugin Twenty20

Po instalaci a aktivaci můžete rovnou přistoupit k tvorbě porovnání obrázků. Twenty20 nemá žádné nastavení a ihned funguje.

Nejprve si do WordPress Média nahrajte připravené fotografie. Obrázky by měli mít stejné rozlišení.

Nahrané fotografie

Nahrané fotografie

Nyní si najděte ID obrázků. To nejjednodušeji uděláte tak, že kliknete na zobrazení obrázků v Média na seznam.

Výpis-obrázků - seznam

Výpis-obrázků – seznam

A poté kliknete na náhledový obrázek. V jeho URL najdete ID obrázku, je u parametru post.

Příklad URL: http://vasedomena.cz/wp-admin/post.php?post=50672&action=edit
ID obrázku je 50672.

Až budete mít obě ID obrázků, můžete jít do stránky, kde chcete porovnání obrázků vložit.

Shortcode pro vložení do obsahu

Pro vložení se používá shortcode ve formátu

Parametry shortcodu:

  • img1 – ID obrázku #1
  • img1 – ID obrázku #2
  • offset – 0.1 až 1.0 (výchozí pozice posuvníku)
  • direction – horizontal|vertical (orientace posuvníku)
  • align – none|right|left (zarovnání)
  • width – šířka, podporuje jak % tak px

Zde jsou 2 ukázky, jak může shortcode vypadat.

Náhled #1

Náhled #1



Náhled #2

Náhled #2

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

1 komentář

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.