El mosaico de imágenes de la página de inicio se modifica con la publicación de cada nuevo trabajo. El sistema “lee” los contenidos de la base de datos y arma la grilla del mosaico, ya sea la página de inicio completa (con todos los trabajos) o la página de una categoría (por ejemplo /web o /foto).

Una sencilla aplicación Javascript selecciona las imágenes a cargar para cada tesela del mosaico, de acuerdo a la clase CSS que tenga asignada la celda contenedora. Las imágenes de cada tamaño han sido generadas previamente (al momento de publicar el trabajo) desde el backend.

A su vez, el tamaño de las teselas se adapta a los distintos tamaños de pantalla, usando breakpoints en el CSS para determinar cuando pasar de un tamaño al siguente. En este caso, usamos los breakpoints standard de Twitter Bootstrap, agregando uno para las pantallas de escritorio “intermedias”: @media (min-width: 1300px).

Usando (y abusando) del CSS logramos que el mosaico se genere rápidamente, sin afectar mas de lo necesario la velocidad de carga del sitio. Las imágenes de las teselas se van cargando por bloque, presentando al usuario los contenidos de la parte superior, mientras se siguen cargando los inferiores.