{"id":3945,"date":"2014-12-15T10:01:44","date_gmt":"2014-12-15T12:01:44","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3945"},"modified":"2014-12-15T10:01:44","modified_gmt":"2014-12-15T12:01:44","slug":"como-mostrar-antes-e-depois-de-uma-foto-com-wordpress","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/como-mostrar-antes-e-depois-de-uma-foto-com-wordpress\/","title":{"rendered":"Como mostrar antes e depois de uma foto com WordPress"},"content":{"rendered":"<p>Saiba como fazer uma apresenta\u00e7\u00e3o elegante de uma foto com seu antes e depois de forma profissional. Muitas das vezes, as pessoas colocam duas imagens lado a lado para fazer este comparativo, mas se isto fosse interativo e totalmente auto suficiente, sem a necessidade de fazer montagens em Photoshop ou qualquer outro software? Esta dica vem trazer um plugin do WordPress e sua utiliza\u00e7\u00e3o para aplicar este incr\u00edvel efeito.<\/p>\n<p>Primeiro, precisar instalar o plugin\u00a0<a title=\"TwentyTwenty\" href=\"https:\/\/wordpress.org\/plugins\/twentytwenty\/\" target=\"_blank\" rel=\"nofollow\">TwentyTwenty<\/a>.<\/p>\n<p>Depois, fa\u00e7a upload das imagens para seu site, pode ser por pelo gerenciamento de M\u00eddia ou pela inser\u00e7\u00e3o de imagens nos posts. Com as duas imagens no servidor, \u00e9 necess\u00e1ria pegar o link de cada uma, copie e cole em um arquivo a parte para ficar mais f\u00e1cil.<\/p>\n<p>Agora, basta editar ou inserir um post, no campo de edi\u00e7\u00e3o, vamos utilizar o shortcode\u00a0<code>[TwentyTwenty][\/ TwentyTwenty]<\/code>.<\/p>\n<blockquote><p>Certifique-se que ambas as fotos tenham as mesmas dimens\u00f5es.<\/p><\/blockquote>\n<p>Com tudo pronto, vamos inserir o pequeno c\u00f3digo para gerar o efeito.<\/p>\n<pre class=\"lang:php decode:true\">[twentytwenty]\n&lt;img src=\"\/wp-content\/uploads\/2014\/12\/batons-vermelhos-antes.jpg\" alt=\"Antes\" width=\"100%\" height=\"350\"\/&gt;\n&lt;img src=\"\/wp-content\/uploads\/2014\/12\/batons-vermelhos-depois.jpg\" alt=\"Depois\" width=\"100%\" height=\"350\"\/&gt;\n[\/twentytwenty]<\/pre>\n<p>Explica\u00e7\u00e3o do c\u00f3digo:<\/p>\n<p class=\"lang:php decode:true \">[twentytwenty] e\u00a0[\/twentytwenty] s\u00e3o a abertura e fechamento das tags que formaram os efeitos.<\/p>\n<p class=\"lang:php decode:true \">As imagens s\u00e3o, a 1\u00aa o antes e a 2\u00aa o depois.<\/p>\n<p>1\u00aa &#8211; \/wp-content\/uploads\/2014\/12\/batons-vermelhos-antes.jpg<br \/>\n2\u00aa &#8211; \/wp-content\/uploads\/2014\/12\/batons-vermelhos-depois.jpg<\/p>\n<p>&nbsp;<\/p>\n<p>Agora que j\u00e1 sabe como utilizar, vamos criar o efeito.<\/p>\n<p>[twentytwenty]<br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2014\/12\/batons-vermelhos-antes.jpg\" alt=\"Antes\" width=\"100%\" height=\"350\" \/><br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2014\/12\/batons-vermelhos-depois.jpg\" alt=\"Depois\" width=\"100%\" height=\"350\" \/><br \/>\n[\/twentytwenty]<\/p>\n<p>&nbsp;<\/p>\n<p>Conforme voc\u00ea deslizar o seletor, ver\u00e1 que a imagem \u00e9 sobreposta de acordo com sua necessidade, tornando vis\u00edvel e f\u00e1cil de comparar, o\u00a0&#8220;<strong>Before<\/strong>&#8221; e &#8220;<strong>After<\/strong>&#8221;\u00a0somem de acordo que \u00e9 feito o deslizamento.<\/p>\n<p>Isso \u00e9 tudo. Esperamos que este artigo tenha ajudado a voc\u00ea aprender a mostrar o antes e depois de uma foto em seu site WordPress. \u00a0Se voc\u00ea gostou deste artigo,\u00a0tamb\u00e9m visite no link no <a href=\"https:\/\/www.facebook.com\/Turbosite\">Facebook<\/a> e <a href=\"https:\/\/plus.google.com\/+TurbositeBrasil\">Google+<\/a>, h\u00e1 diversas publica\u00e7\u00f5es interessantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saiba como fazer uma apresenta\u00e7\u00e3o elegante de uma foto com seu antes e depois de forma profissional. Com dois pequenos passos voc\u00ea criar\u00e1 um efeito incr\u00edvel.<\/p>\n","protected":false},"author":1,"featured_media":3955,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,28,30],"tags":[130,180,211,276],"class_list":["post-3945","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-tutoriais","category-wordpress-2","tag-comparar-2-fotos","tag-destaque","tag-efeito-comparativo-de-foto","tag-foto-antes-e-depois"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3945"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3945\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3955"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}