Generando una galería accesible de imágenes dinámica con Angular

Mientras estábamos creando nuestra web personal, se me ocurrió la idea de crear una galería dinámica de fotos. Pero además necesitaba que esa galería pudiese contener multitud de imágenes, siendo accesible.

A priori puede parecer sencillo, ya que para tener una imagen accesible sólo se necesita añadir el atributo alt a la etiqueta img. Aquí un ejemplo:

Sin embargo, esto que parece trivial me planteó una duda: ¿cómo se añadirían las descripciones a cientos de imágenes que no son estáticas? Porque tampoco quería recurrir a una descripción poco explicativa que fuese un mensaje genérico concatenado con el nombre de la imagen.

Así que, dándole vueltas, me di cuenta que podía utilizar los metadatos de las imágenes, que me proporcionarían mucha información, como el título, autor y descripción.

Decidí buscar si existía algún paquete que me pudiese facilitar la información. Npm nunca defrauda y encontré dos. El primero que probé fue la librería exif-js, pero me resultaba bastante problemática a la hora de combinarla con mi funcionalidad de Azure (que explicaré en otro post), así que me decanté por piexifjs. A partir de aquí ya comencé con mi desarrollo.

PASOS A SEGUIR

Antes de nada, comentar que he usado Angular porque es el framework con el que trabajo habitualmente, no por ninguna otra razón en particular. Así que los pasos serían los siguientes:

1. Crear un proyecto en Angular y añadirle la funcionalidad que queráis.

2. Crear un servicio vacío, en mi caso lo he llamado ReadImagesService, donde se agrupará la funcionalidad para leer la descripción de cada imagen.

3. Crear un componente vacío Gallery, que será la vista de la galería.

4. Instalar el paquete piexifjs, para ello como es un paquete basado en Javascript y estamos trabajando con Typescript es necesario instalarse el paquete @types/node y después ya el piexifjs:

npm i @types/node

npm i piexifjs

5. Si abrimos el archivo packages.json en devDependencies podemos ver las siguiente líneas:

“@types/node”: “^12.12.53”

“piexifjs”: “^1.0.6”

Con esto tenemos lo necesario para seguir construyendo nuestra galería accesible. Antes de continuar, me gustaría destacar que la galería es una lista simple sin estilos, ni efectos, que la podéis personalizar a vuestro gusto. Además para facilitar el tratamiento de las imágenes, las renombre para que se llamasen Image_(Num), teniéndolas así numeradas.

6. Ahora vamos a codificar el componente Gallery, en su html escribimos lo siguiente:

7. A continuación, en su archivo css añadimos los estilos oportunos, en mi caso quise algo muy simple, puedes echarle un ojo.

8. En el archivo ts, añadiremos el siguiente código, que básicamente llama al servicio ReadImagesService

9. El siguiente paso es crear el objeto GalleryImage que se referencia:

10. Ahora toca codificar el servicio ReadImages.

Voy a explicarlo por partes, lo primero es importar la librería piexif y también el modelo GaleryImage. Después crearemos el método getImageInformation, en él se crean las imágenes dentro de un bucle for, tantas como indiquemos en la variable imagesNumber. Generamos el nombre de la imagen, su url, su pre-descripción, y le ponemos el nombre de la aplicación como autor.

A continuación, antes de añadirla a la lista, llamamos al método getBase64Image, que mediante un objeto XMLHttpRequest carga la imagen y la transforma a formato base64. Este formato es el que se necesita para que la librería piexif pueda acceder a los metadatos.

Una vez que el objeto XMLHttpRequest terminó de cargar la imagen, se llama a la función loadedImageDescription pasándole la imagen actual. Esta función, carga la imagen a la librería piexif , para obtener luego un array con todas las propiedades de un objeto 0th, entre las que se encuentra la descripción, en la posición 270.

Con todo esto, en nuestro archivo html la lista de imágenes ya es una lista dinámica que incluye descripciones. Y cómo se puede comprobar en la imagen, ahora ya nuestras imágenes tienen una descripción adecuada.

No obstante, si tenemos cientos de imágenes esto nos implica ir creando manualmente la descripción de las fotos. Una tarea larga y que requiere tiempo, así que pensé ¿por qué no automatizarla? En los próximos días publicaré otro post en el que explicaré como usar Azure Cognitive Services para realizar estas tareas, tanto desde Angular, como desde una app de escritorio que he creado para que sea más efectivo.