Cómo crear un «efecto antes/después» en tus imágenes de WordPress

Publicada en WordPress.

Si alguna vez has querido comparar dos imágenes similares en tus contenidos para que se vean claramente los cambios entre el antes y el después, hoy estás de suerte porque hemos lanzado un nuevo plugin que te lo permite hacer.

Nelio Compare Images es un plugin muy sencillo para WordPress que añade un bloque al editor de bloques que te permite comparar dos imágenes. ¿Lo mejor de todo? Es totalmente gratuito.

La comparación de imágenes es muy útil en multitud de areas diferentes. Ejemplos de esto son clínicas en las que mostrar fotos del antes y el después de los pacientes, restauradores que enseñan lo bien que han quedado obras de arte después de pasar por sus manos, o incluso webs de noticias donde se puedan ver gráficamente cambios a lo largo del tiempo comparando una foto antigua con otra moderna tomada en la misma localización.

Nelio Compare Images para comparar 2 imágenes en Gutenberg

Para poder utilizar el bloque de comparar imágenes en el editor de bloques de WordPress, sólo tienes que instalar Nelio Compare Images. Para instalarlo haces lo mismo que harías con cualquier otro plugin para WordPress. Es decir, vas al menú de Plugins, seleccionas Añadir nuevo y allí buscas «Nelio Compare Images». Lo instalas y activas, y ya lo tienes disponible.

Para comparar dos imágenes en tus contenidos selecciona el bloque de comparar imágenes en el editor de bloques de WordPress. En la siguiente captura puedes ver cómo hacerlo:

Selección del bloque de Nelio para comparar imágenes en WordPress.
Selección del bloque de Nelio para comparar imágenes en WordPress.

Cuando has añadido el bloque de comparar imágenes verás que tienes la opción de incluir las dos imágenes dentro del bloque. Para añadir cada una de estas imágenes, ve al bloque y verás que hay dos apartados, uno para subir la imagen de antes y otro para la imagen del después. Puedes subir la imagen a la biblioteca de medios, ir a la biblioteca de medios y escoger una imagen ya subida previamente, o bien arrastrar la imagen que quieras utilizar.

El bloque de Nelio Compare Images te permite seleccionar dos imágenes para compararlas.
El bloque de Nelio Compare Images te permite seleccionar dos imágenes para compararlas en tus contenidos.

Además, al seleccionar el bloque de comparar imágenes verás que en la barra lateral derecha tienes la opción de indicar el texto alternativo de cada una de las dos imágenes a comparar dentro del bloque.

Este texto alternativo debe incluir una descripción de la imagen y sirve tanto para las personas invidentes como para ayudar a clasificar la imagen en buscadores.

El bloque de Nelio Compare Images te permite indicar el texto alternativo de cada una de las dos imágenes a comparar.
El bloque de Nelio Compare Images te permite indicar el texto alternativo de cada una de las dos imágenes a comparar.

Otra opción que encontrarás en la barra lateral derecha es la posibilidad de modificar la posición inicial de la barra separadora de las imágenes. Por defecto el valor es 50, indicando que la barra está en la mitad, mostrando la mitad izquierda de la imagen del antes y la mitad derecha de la imagen del después.

Si escoges un valor diferente verás cómo cambia la previsualización de la comparación. La posición de la barra divisoria se moverá acorde al valor escogido, así como la parte visible de cada imagen dentro de la comparativa.

El bloque Nelio Compare Images te permite indicar la posición inicial de la línea divisoria entre las dos imágenes a comparar.
El bloque Nelio Compare Images te permite indicar la posición inicial de la línea divisoria entre las dos imágenes a comparar.

Y en el propio bloque, debajo de las imágenes que estás comparando verás que puedes escribir un texto descriptivo de la comparación. Esto es lo mismo que encuentras cuando añades un bloque de imagen común en el editor de bloques de WordPress.

Por último, Nelio Compare Images permite que compares dos imágenes tanto en horizontal como en vertical. En la barra de botones del bloque tienes un botón para pasar de comparación horizontal a comparación vertical.

En la siguiente captura puedes ver cómo cambia la línea divisoria cuando seleccionas la comparación vertical.

El bloque Nelio Compare Images te permite comparar dos imágenes tanto en vertical como en horizontal.
El bloque Nelio Compare Images te permite comparar dos imágenes tanto en vertical como en horizontal.

Para que veas cómo es el resultado final del bloque en tu contenido, aquí te dejo un par de comparativas hechas con el bloque de Nelio Compare Images. En la primera verás como quedó una zona del norte de Japón después del terremoto que tuvieron en 2011.

Vista satelital de Japón antes del terremoto de 2011.
Vista satelital de Japón después del terremoto de 2011.
Imágenes de satélite de Japón antes y después del terremoto de 2011. Fuente: The New York Times

Pero también te puede servir el bloque de comparación de imágenes para comparar dos modelos de automóvil, como es el caso del Ferrari F40 y el Ferrari F50. Es muy interesante deslizar con el ratón la barra divisoria para comparar ambas imágenes:

Ferrari F40.
Ferrari F50.
Comparativa entre el Ferrari F40 y el Ferrari F50.

Como ya has podido comprobar, el editor de bloques de WordPress facilita mucho a los usuarios el poder añadir contenidos mucho más complejos en entradas y páginas sin apenas esfuerzo.

Nelio Compare Images te permite añadir bloques de comparación de imágenes para darle un toque más interesante a tus contenidos, deslizando una barra divisoria entre la imagen del antes y la del después.

Si tuvieras que añadir este tipo de contenido en el editor clásico tendrías que usar un shortcode, algo mucho menos amigable en cuanto a experiencia de usuario. Por tanto, punto a favor de Gutenberg en este caso.

Imagen destacada de Glenn Carstens-Peters en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (3 votos, promedio: 5,00 de 5)
Cargando…

2 comentarios en «Cómo crear un «efecto antes/después» en tus imágenes de WordPress»

  1. Que gran aporte, está genial, ya lo probaré. Muchas gracias 😉

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.