--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak ve WordPress udělat porovnání fotografie před a po úpravě url: https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/ date: 2018-02-19 modified: 2018-02-18 author: Tomáš Cirkl type: post categories: [WordPress návody] tags: [fotografie, plugin, porovnání] --- WordPress návody # Jak ve WordPress udělat porovnání fotografie před a po úpravě [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 19. 2. 2018 2 min čtení Pozor: Článek je z roku 2018. Některé postupy se mohly změnit. ![porovnani obrazku pred a po](https://www.wplama.cz/wp-content/uploads/2018/02/porovnani-obrazku-pred-a-po.png "porovnani obrazku pred a po") 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](https://cs.wordpress.org/plugins/twenty20/), který se nachází v oficiálním katalogu pluginů a můžete jej [nainstalovat přímo z WordPress administrace](https://www.wplama.cz/3-zpusoby-jak-nainstalovat-wordpress-plugin/). ## 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](https://www.wplama.cz/wp-content/uploads/2018/02/plugin-twenty20-1024x323.png "Plugin Twenty20")](https://www.wplama.cz/wp-content/uploads/2018/02 / plugin-twenty20.png) 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](https://www.wplama.cz/wp-content/uploads/2018/02/nahrane-fotografie.png "Nahrané fotografie")](https://www.wplama.cz/wp-content/uploads/2018/02 / nahrane-fotografie.png) 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](https://www.wplama.cz/wp-content/uploads/2018/02/vypis-obrazku-seznam-1024x531.png "Výpis-obrázků - seznam")](https://www.wplama.cz/wp-content/uploads/2018/02 / vypis-obrazku-seznam.png) 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 ``` [twenty20 img1="" img2="" direction="" offset="" align="" width=""] ``` 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. ``` [twenty20 img1="50673" img2="50672" direction="horizontal" offset="0.5" align="none" width="100%"] ``` [![Náhled #1](https://www.wplama.cz/wp-content/uploads/2018/02/nahled-1-1024x911.png "Náhled #1")](https://www.wplama.cz/wp-content/uploads/2018/02 / nahled-1.png) Náhled #1 ``` [twenty20 img1="50673" img2="50672" direction="vertical" offset="0.5" align="left" width="600px"] ``` [![Náhled #2](https://www.wplama.cz/wp-content/uploads/2018/02/nahled-2-1024x453.png "Náhled #2")](https://www.wplama.cz/wp-content/uploads/2018/02 / nahled-2.png) Náhled #2 - [#fotografie](https://www.wplama.cz/stitek/fotografie/) - [#plugin](https://www.wplama.cz/stitek/plugin/) - [#porovnání](https://www.wplama.cz/stitek/porovnani/) Sdílet - - [](mailto:?subject=Jak ve WordPress udělat porovnání fotografie před a po úpravě&body=Jak ve WordPress udělat porovnání fotografie před a po úpravě https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fwordpress-porovnani-fotografie-pred-a-po%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fwordpress-porovnani-fotografie-pred-a-po%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (1) [Přidat komentář →](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/#respond) S stano [19. 2. 2018](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/#comment-64452) dobré info 🙂 [Odpovědět](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/#comment-64452) --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/#respond) [← Předchozí článek WordPress, WooCommerce a GDPR (Praha 13.3.2018)](https://www.wplama.cz/wordpress-woocommerce-a-gdpr-praha-13-3-2018/) [Další článek → WordCamp Praha 2018 už tuto sobotu](https://www.wplama.cz/wordcamp-praha-2018-uz-tuto-sobotu/) Související ## Mohlo by vás zajímat [Všechny články z rubriky WordPress návody →](https://www.wplama.cz/wordpress/navody/) ![llms txt scaled](https://www.wplama.cz/wp-content/uploads/2026/03/llms-txt-scaled.png "llms txt scaled") WordPress návody ### [Konec tradičního SEO? Jak a proč začít optimalizovat WordPress web pro AI vyhledávače](https://www.wplama.cz/optimalizace-pro-ai-vyhledavace/) 3. 3. 2026 9 min čtení --- ![cloudflare turnstile scaled](https://www.wplama.cz/wp-content/uploads/2025/12/cloudflare-turnstile-scaled.png "cloudflare turnstile scaled") WordPress návody ### [Cloudflare Turnstile – Jeden antispam, který ochrání celý váš WordPress](https://www.wplama.cz/cloudflare-turnstile-antispam/) 17. 12. 2025 4 min čtení --- ![image scaled](https://www.wplama.cz/wp-content/uploads/2025/09/image-scaled.png "image scaled") WordPress návody ### [Jak přidat měřicí kód Sklik do WordPress pomocí Complianz](https://www.wplama.cz/jak-pridat-merici-kod-sklik-do-wordpress-pomoci-complianz/) 16. 9. 2025 3 min čtení ---