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 Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
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:
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.
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.
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.
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.
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.
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:
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.
Deja una respuesta