Masonry est un style de mise en page en grille où le contenu est organisé en colonnes. C'est un choix populaire pour les galeries d'images, car des images de différentes dimensions peuvent y être disposées proprement et sans espaces vides.
Voici un exemple de mise en page Masonry utilisant le modèle Essential Portfolio (à gauche).
DPG utilisait déjà des mises en page Masonry dans plusieurs modèles Series 2. Avec Series 3, nous avons réécrit Masonry à l'aide des dernières technologies web afin d'en améliorer le fonctionnement. C'est pourquoi le Masonry de Series 3 fonctionne un peu différemment.
Quoi de neuf ?
Dans Series 3, le modèle Essential Portfolio propose deux mises en page masonry différentes : Masonry et Horizontal Masonry.
Si vous êtes habitué au fonctionnement de masonry dans les modèles précédents, le premier changement que vous remarquerez peut-être est l'ordre des images sur la page avec la mise en page Masonry. Poursuivez votre lecture pour découvrir la différence.
Remplissage des colonnes
Avec Masonry, vous choisissez le nombre de colonnes et le nombre total d'images du set est réparti entre ces colonnes. Les images sont limitées par la largeur de la colonne, de sorte que les images en portrait s'affichent plus grandes que celles en paysage.
Si toutes vos images n'ont pas exactement les mêmes dimensions, le bas de la galerie ne sera pas parfaitement régulier.
Avec Horizontal Masonry, les images en portrait occupent 1 colonne, tandis que les images en paysage occupent 2 colonnes. La hauteur des rangées au sein des colonnes est constante, de sorte que les images aux dimensions irrégulières (portraits très hauts, paysages très larges) seront légèrement recadrées pour s'adapter à la grille.
Si le nombre d'images du set ne remplit pas tous les « emplacements » de colonne, des espaces vides peuvent apparaître en bas de la galerie.
Ordre des médias
Masonry se déroule en colonnes descendantes. Comme le montre l'exemple à gauche, les images commencent dans la première colonne en s'empilant verticalement vers le bas jusqu'à atteindre le bas, puis l'image suivante apparaît en haut de la deuxième colonne, et ainsi de suite.
❗️C'est la principale différence de comportement par rapport au masonry de Series 2, où l'image 1 commençait dans la colonne 1, puis l'image 2 apparaissait dans la colonne 2.
❗️Cela signifie que l'ordre personnalisé des images pour cette mise en page peut être difficile à contrôler dans l'Admin, où la grille les affiche en rangées horizontales.
Pour éviter toute confusion, il est préférable d'organiser l'ordre de la mise en page Masonry à l'aide de la section Design, où il vous suffit de cliquer et de les glisser librement dans l'ordre de votre choix à travers les colonnes.
Horizontal Masonry, en revanche, suit un ordre horizontal. Vous pouvez toujours l'organiser dans la section Design, mais l'ordre restera reconnaissablement le même dans la vue des sets.
