--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@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í] --- ![porovnani obrazku pred a po 1024x673](https://www.wplama.cz/wp-content/uploads/2018/02/porovnani-obrazku-pred-a-po-1024x673.png "porovnani obrazku pred a po 1024x673") # Jak ve WordPress udělat porovnání fotografie před a po úpravě 19.2.2018 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 ### Správa WordPress webu Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními. [Více informací](https://www.wplama.cz/sprava-wordpress-webu/) ### O autorovi ![579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892](https://secure.gravatar.com/avatar/579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892?s=100&d=monsterid&r=g "579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892") [#### Tomáš Cirkl](https://www.wplama.cz/author/tomas/) Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. ## Mohlo by vás také zajímat [![Výběr doménového jména](https://www.wplama.cz/wp-content/uploads/2014/05/Chossing-a-Domain-Name-1024x632.jpg "Výběr doménového jména")](https://www.wplama.cz/tipy-a-nastroje-pomoci-kterych-vyberete-tu-nejlepsi-domenu-pro-vas-blog/) ### [Tipy a nástroje pro výběr vhodné domény webu/blogu](https://www.wplama.cz/tipy-a-nastroje-pomoci-kterych-vyberete-tu-nejlepsi-domenu-pro-vas-blog/) [WordPress návody](https://www.wplama.cz/wordpress/navody/)[![Hosting](https://www.wplama.cz/wp-content/uploads/2014/05/Hosting-1024x768.jpg "Hosting")](https://www.wplama.cz/jak-vybrat-spravny-hosting-pro-wordpress/) ### [Jak vybrat správný hosting pro WordPress](https://www.wplama.cz/jak-vybrat-spravny-hosting-pro-wordpress/) [WordPress návody](https://www.wplama.cz/wordpress/navody/)[![Tipy kde vybrat kvalitní WordPress šablonu](https://www.wplama.cz/wp-content/uploads/2014/05/WordPress-Premium-Themes-Themes4all.com_-1024x506.png "Tipy kde vybrat kvalitní WordPress šablonu")](https://www.wplama.cz/tipy-kde-vybrat-kvalitni-wordpress-sablonu/) ### [Tipy kde vybrat kvalitní WordPress šablonu](https://www.wplama.cz/tipy-kde-vybrat-kvalitni-wordpress-sablonu/) [WordPress návody](https://www.wplama.cz/wordpress/navody/) ### 1 názor na “Jak ve WordPress udělat porovnání fotografie před a po úpravě” ![fe8dcd3797f0b7f66451af2b63698709fbc5aade53137c7ffebbee63947b4474](https://secure.gravatar.com/avatar/fe8dcd3797f0b7f66451af2b63698709fbc5aade53137c7ffebbee63947b4474?s=50&d=monsterid&r=g "fe8dcd3797f0b7f66451af2b63698709fbc5aade53137c7ffebbee63947b4474") **stano** [19.2.2018 v 20:27](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/#comment-64452) dobré info 🙂 [Odepsat](https://www.wplama.cz/#comment-64452) --- ### Diskuze [Zruš odpověď](https://www.wplama.cz/wordpress-porovnani-fotografie-pred-a-po/?_tmcb=1772962991#respond)