Masonry è uno stile di layout a griglia in cui i contenuti sono disposti in colonne. Questo lo rende una scelta popolare per le gallerie di immagini, poiché immagini di dimensioni diverse possono essere disposte ordinatamente e senza spazi vuoti.
Questo è un esempio di layout Masonry con il modello Essential Portfolio (a sinistra).
DPG ha già utilizzato i layout Masonry in diversi modelli Series 2. Con Series 3 abbiamo riscritto Masonry utilizzando le più recenti tecnologie web per migliorarne la funzionalità. Per questo motivo, il Masonry di Series 3 funziona in modo leggermente diverso.
Novità
In Series 3, il modello Essential Portfolio offre due diversi layout masonry: Masonry e Horizontal Masonry.
Se sei abituato al funzionamento di masonry nei modelli precedenti, la prima differenza che potresti notare è l'ordine delle immagini sulla pagina con il layout Masonry. Continua a leggere per scoprire la differenza.
Riempimento delle colonne
Con Masonry scegli il numero di colonne e il numero totale di immagini del set viene suddiviso tra queste colonne. Le immagini sono vincolate dalla larghezza della colonna, quindi le immagini verticali vengono mostrate più grandi di quelle orizzontali.
Se le tue immagini non hanno tutte esattamente le stesse dimensioni, la parte inferiore della galleria non risulterà perfettamente uniforme.
Con Horizontal Masonry le immagini verticali occupano 1 colonna, mentre quelle orizzontali ne occupano 2. L'altezza delle righe all'interno delle colonne è costante, quindi le immagini con dimensioni irregolari (verticali molto alte, orizzontali molto larghe) verranno ritagliate leggermente per adattarsi alla griglia.
Se il numero di immagini del set non riempie tutti gli «slot» delle colonne, potrebbero rimanere spazi vuoti nella parte inferiore della galleria.
Ordine dei media
Masonry procede in colonne verso il basso. Come mostra l'esempio a sinistra, le immagini iniziano nella prima colonna impilandosi verticalmente verso il basso fino a raggiungere la fine, poi l'immagine successiva compare in cima alla seconda colonna e così via.
❗️Questa è la principale differenza di comportamento rispetto al masonry di Series 2, dove l'immagine 1 iniziava nella colonna 1 e l'immagine 2 compariva poi nella colonna 2.
❗️Questo significa che l'ordine personalizzato delle immagini per questo layout può essere difficile da controllare nell'Admin, dove la griglia le mostra in righe orizzontali.
Per evitare confusione, è meglio organizzare l'ordine del layout Masonry utilizzando la sezione Design, dove puoi semplicemente fare clic e trascinarle liberamente nell'ordine che preferisci tra le colonne.
Horizontal Masonry, invece, segue un ordine orizzontale. Puoi comunque organizzarlo nella sezione Design, ma l'ordine rimarrà riconoscibilmente lo stesso nella vista dei set.
