Masonry é um estilo de layout em grade em que o conteúdo é organizado em colunas. Isso o torna uma opção popular para galerias de imagens, pois imagens de dimensões diferentes podem ser dispostas de forma organizada e sem espaços vazios.
Este é um exemplo de layout Masonry usando o modelo Essential Portfolio (à esquerda).
O DPG já utilizava layouts Masonry em vários modelos da Series 2. Com a Series 3, reescrevemos o Masonry usando as mais recentes tecnologias web para melhorar sua funcionalidade. Por isso, o Masonry da Series 3 funciona de forma um pouco diferente.
Novidades
Na Series 3, o modelo Essential Portfolio tem dois layouts masonry diferentes: Masonry e Horizontal Masonry.
Se você está acostumado com o funcionamento do masonry em modelos anteriores, a primeira mudança que talvez perceba é a ordem das imagens na página com o layout Masonry. Continue lendo para saber qual é a diferença.
Preenchimento das colunas
No Masonry, você escolhe o número de colunas e o número total de imagens do set é distribuído entre elas. As imagens são limitadas pela largura da coluna, então as imagens na vertical aparecem maiores do que as na horizontal.
Se nem todas as suas imagens tiverem exatamente as mesmas dimensões, a parte inferior da galeria não ficará perfeitamente uniforme.
No Horizontal Masonry, as imagens na vertical ocupam 1 coluna, enquanto as imagens na horizontal ocupam 2 colunas. A altura das linhas dentro das colunas é constante, então imagens com dimensões irregulares (verticais muito altas, horizontais muito largas) serão cortadas levemente para se ajustar à grade.
Se o número de imagens do set não preencher todos os «espaços» das colunas, poderão aparecer lacunas na parte inferior da galeria.
Ordem das mídias
O Masonry segue em colunas no sentido descendente. Como mostra o exemplo à esquerda, as imagens começam na primeira coluna, empilhando-se verticalmente para baixo até chegarem ao fim; em seguida, a próxima imagem aparece no topo da segunda coluna, e assim por diante.
❗️Essa é a principal diferença de comportamento em relação ao masonry da Series 2, em que a imagem 1 começava na coluna 1 e a imagem 2 aparecia na coluna 2.
❗️Isso significa que a ordem personalizada das imagens nesse layout pode ser difícil de controlar no Admin, onde a grade as exibe em linhas horizontais.
Para evitar confusão, o ideal é organizar a ordem do layout Masonry usando a seção Design, onde você pode simplesmente clicar e arrastá-las livremente na ordem que preferir entre as colunas.
O Horizontal Masonry, por outro lado, segue uma ordem horizontal. Você ainda pode organizá-lo na seção Design, mas a ordem permanecerá visivelmente a mesma na visualização de sets.
