{"id":5807,"date":"2014-10-07T18:21:35","date_gmt":"2014-10-07T16:21:35","guid":{"rendered":"http:\/\/www.guillemcalatrava.com\/ca\/2014\/10\/07\/plugin-para-comparar-fotografias-en-wordpress\/"},"modified":"2015-10-16T13:42:41","modified_gmt":"2015-10-16T11:42:41","slug":"plugin-para-comparar-fotografias-en-wordpress","status":"publish","type":"post","link":"https:\/\/guillemcalatrava.com\/ca\/2014\/10\/07\/plugin-para-comparar-fotografias-en-wordpress\/","title":{"rendered":"Plugin per comparar fotografies a WordPress"},"content":{"rendered":"

Feia molt temps que estava buscant un plugin per comparar fotografies a WordPress, ja sigui per mostrar l’abans\/despr\u00e9s d’una fotografia, comparar una imatge en blanc i negre Vs una altra en color, o simplement comparar dues fotografies diferents. Per fi l’he trobat! Es diu Smart Before After Viewer<\/strong><\/a>.<\/p>\n

Fins a data d’avui n’havia trobat alguns, per\u00f2 tots ells molt complicats, amb un recambolesc funcionament mitjan\u00e7ant codi i, a m\u00e9s, deixaven de funcionar a la m\u00ednima actualitzaci\u00f3 de WordPress. Per\u00f2 Smart Before After Viewer<\/strong><\/a>, \u00e9s diferent, amb un funcionament f\u00e0cil i amb diverses opcions a ajustar.<\/p>\n

[before-after width=”800px” viewer_position=”center” move_on_hover=”false” label_one=”Blanc i negre” label_two=”Color”]\"\"\"\"[\/before-after]<\/p>\n

Una de les caracter\u00edstiques molt interessant d’aquest plugin per comparar fotografies \u00e9s la seva capacitat responsive<\/em>, podem utilitzar-lo perfectament tant en visualitzar la nostra p\u00e0gina web des d’un ordinador com des d’una tableta o smartphone amb pantalla t\u00e0ctil.<\/p>\n

Com comentava, el seu funcionament \u00e9s molt f\u00e0cil, al instal\u00b7lar-ho ens apareixer\u00e0 una icona al nostre editor d’entrades\/p\u00e0gines que clicant en ell podrem accedir a les opcions:<\/p>\n

\"config-plugin-para-comparar-fotografias\"<\/a><\/p>\n

A continuaci\u00f3 us deixo amb alguns exemples i variacions que podem aplicar al comparador de fotografies:<\/p>\n

\n\t\t\t\t\t[before-after width=”400px” orientation=”vertical” viewer_position=”center” offset=”0.25″ overlay=”false” label_one=”Blanco y negro” label_two=”Color”]\"\"\"\"[\/before-after]\nMostrant 1\/4 part de la imatge superior\n\t\t\t\t<\/div>
\n
\n\t\t\t\t\t[before-after width=”400px” viewer_position=”center” orientation=”vertical” offset=”0.75″ overlay=”false” label_one=”Blanco y negro” label_two=”Color”]\"\"\"\"[\/before-after]\nMostrant 3\/4 parts de la imatge superior\n\t\t\t\t<\/div>
\n
\n\t\t\t\t\t[before-after width=”400px” viewer_position=”center” orientation=”vertical” offset=”0.5″ color=”#ff0000″ overlay=”false” label_one=”Blanco y negro” label_two=”Color”]\"\"\"\"[\/before-after]\nSeparador de color vermell mostrant a parts iguals cada imatge\n\t\t\t\t<\/div>
<\/div><\/p>\n

De la mateixa manera que a la imatge que obre l’article, el plugin per comparar fotografies a WordPress ens permet definir unes etiquetes que seran visibles quan passem el mouse per damunt, podent-les col\u00b7locar en la part inferior o superior, definir el seu color, i fins i tot triar el color de fons i la seva opacitat:<\/p>\n

\n\t\t\t\t\t[before-after width=”400px” viewer_position=”center” orientation=”horizontal” offset=”0.5″ label_one=”1960″ label_two=”2011″]\"St_quirc_Durro_01\"\"St_quirc_Durro_02\"[\/before-after]\n\t\t\t\t<\/div>\n
\n\t\t\t\t\t[before-after width=”400px” viewer_position=”center” overlay_color=”#caf59f” overlay_opacity=”0.25″ label_one=”1961″ label_two=”2011″ label_position=”two” label_color=”#FFFF00″]\"St_Climent_Taull_01\"\"St_Climent_Taull_02\"[\/before-after]\n\t\t\t\t<\/div>
<\/div>\n

I finalment us deixo amb un exemple comparant dues fotografies amb el separador que es despla\u00e7a sense necessitat de fer “clic” en ell, simplement amb el propi moviment del mouse en passar per damunt:<\/p>\n

[before-after width=”1024px” viewer_position=”center” move_on_hover=”true” overlay=”false”]\"NATURPIXEL_Montseny_03_SF\"\"NATURPIXEL_Montseny_03_ND\"[\/before-after]<\/p>\n

Podeu adquirir el plugin Smart Before After Viewer en aquest enlla\u00e7<\/a>, el seu preu \u00e9s de 15$.<\/p>\n

[message type=”custom”]Els enlla\u00e7os a la p\u00e0gina del plugin s\u00f3n enlla\u00e7os referenciats, a tu et costar\u00e0 la mateix i a canvi jo rebr\u00e9 una petita recompensa. Gr\u00e0cies![\/message]<\/p>\n","protected":false},"excerpt":{"rendered":"

Feia molt temps que estava buscant un plugin per comparar fotografies a WordPress, ja sigui per mostrar l’abans\/despr\u00e9s d’una fotografia, comparar una imatge en blanc i negre Vs una altra en color, o simplement comparar dues fotografies diferents. Per fi l’he trobat! Es diu Smart Before After Viewer. Fins a data d’avui n’havia trobat alguns, […]<\/p>\n","protected":false},"author":2,"featured_media":4364,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/posts\/5807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/comments?post=5807"}],"version-history":[{"count":0,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/posts\/5807\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/media\/4364"}],"wp:attachment":[{"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/media?parent=5807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/categories?post=5807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guillemcalatrava.com\/ca\/wp-json\/wp\/v2\/tags?post=5807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}