Masonry es un estilo de diseño en cuadrícula en el que el contenido se organiza en columnas. Esto lo convierte en una opción popular para las galerías de imágenes, ya que las imágenes de distintas dimensiones se pueden organizar de forma ordenada y sin huecos.
Este es un ejemplo de un diseño Masonry con la plantilla Essential Portfolio (a la izquierda).
DPG ya había utilizado diseños Masonry en varias plantillas de Series 2. Con Series 3, hemos reescrito Masonry utilizando las últimas tecnologías web para mejorar su funcionalidad. Por este motivo, el Masonry de Series 3 funciona de forma ligeramente diferente.
Novedades
En Series 3, la plantilla Essential Portfolio tiene dos diseños masonry diferentes: Masonry y Horizontal Masonry.
Si estás acostumbrado al funcionamiento de masonry en plantillas anteriores, el primer cambio que quizá notes es el orden de las imágenes en la página con el diseño Masonry. Sigue leyendo para conocer la diferencia.
Relleno de columnas
Con Masonry eliges el número de columnas y el número total de imágenes del set se reparte entre ellas. Las imágenes están limitadas por el ancho de la columna, por lo que las imágenes verticales se muestran más grandes que las horizontales.
Si tus imágenes no comparten exactamente las mismas dimensiones, la parte inferior de la galería no quedará perfectamente uniforme.
Con Horizontal Masonry, las imágenes verticales ocupan 1 columna, mientras que las horizontales ocupan 2 columnas. La altura de las filas dentro de las columnas es uniforme, por lo que las imágenes con dimensiones irregulares (verticales muy altas, horizontales muy anchas) se recortarán ligeramente para ajustarse a la cuadrícula.
Si el número de imágenes del set no llena todas las «ranuras» de columna, es posible que queden huecos en la parte inferior de la galería.
Orden de los medios
Masonry se organiza en columnas descendentes. Como muestra el ejemplo de la izquierda, las imágenes empiezan en la primera columna, apilándose verticalmente hacia abajo hasta llegar al final; luego, la siguiente imagen aparece en la parte superior de la segunda columna, y así sucesivamente.
❗️Esta es la principal diferencia de comportamiento con respecto al masonry de Series 2, donde la imagen 1 empezaba en la columna 1 y la imagen 2 aparecía en la columna 2.
❗️Esto significa que el orden personalizado de las imágenes en este diseño puede ser difícil de controlar en el Admin, donde la cuadrícula las muestra en filas horizontales.
Para evitar confusiones, lo mejor es organizar el orden del diseño Masonry desde la sección Design, donde puedes simplemente hacer clic y arrastrarlas libremente para ordenarlas a tu gusto entre las columnas.
Horizontal Masonry, en cambio, sigue un orden horizontal. Aún puedes organizarlo en la sección Design, pero el orden será reconociblemente el mismo en la vista de sets.
