Estaba convirtiendo un sitio web de WordPress a Hugo y necesitaba un equivalente a la galería de imágenes en mosaico de WordPress. Buscaba el estilo Tiled Mosaic pero resultaba demasiado complejo por los colspan, así que desarrollé una alternativa más sencilla y práctica.
Ejemplo público disponible en https://codepen.io/joosts/pen/LEpgLwN
La implementación usa principalmente JavaScript, apenas necesita CSS y se basa en una estructura HTML muy simple consistente en un contenedor tiled-gallery con enlaces a la imagen completa y etiquetas img con un atributo ratio para indicar la proporción de cada miniatura. Conocer la proporción de la imagen antes de renderizar evita cambios de diseño inesperados y asegura una carga suave. Esta proporción puede generarse desde el servidor con cualquier lenguaje como PHP o directamente con Hugo.
El script ocupa solo unos pocos kilobytes, es totalmente responsive y emplea una función debounce que limita los redibujados a 50ms para que no consuma demasiada CPU. Estéticamente busca aproximadamente una imagen cada 700px de ancho, las imágenes rellenan el contenedor sin problemas y el código evita problemas de subpíxel. Hay un tamaño mínimo para las imágenes que convierte la galería en una lista en móviles y el margen entre imágenes es de 4px. El proyecto está publicado bajo licencia WTFPL y es muy fácil de adaptar.
Si necesitas implementar una galería similar en Hugo, en un proyecto estático o dentro de una aplicación a medida, en Q2BSTUDIO podemos ayudarte. Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones modernas: software a medida, aplicaciones a medida, inteligencia artificial para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio como Power BI.
Ofrecemos integración de galerías optimizadas para rendimiento, generación de metadatos y ratios desde servidor para evitar layout shift, además de implementar pipelines de despliegue en servicios cloud aws y azure, y soluciones de análisis con power bi para visualizar métricas de uso y rendimiento. Nuestro equipo de especialistas en inteligencia artificial puede añadir capacidades de búsqueda por imagen, etiquetado automático y recomendación inteligente para mejorar la experiencia de usuario.
En resumen, la galería tiled mosaic propuesta es una opción ligera y responsiva para reemplazar plugins pesados de WordPress en sitios Hugo o en cualquier proyecto web. Para proyectos a medida, soluciones de software a medida, inteligencia artificial aplicada, ciberseguridad, agentes IA, servicios inteligencia de negocio o despliegue en servicios cloud aws y azure, contacta con Q2BSTUDIO y te ayudamos a diseñar e implementar la solución adecuada.
Palabras clave relevantes para SEO: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.