masonry

Une action très pratique pour organiser des blocs de contenu de taille différente dans une grille fluide et responsive.

J'ai créé cette action pour afficher des pavés de taille inégale à l'intérieur d'un article

Un exemple simple

Modifier la largeur de votre navigateur pour voir l'effet

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5

Titre 6

Titre 7

Titre 8

Titre 9

Titre 10

Voici les shortcodes utilisés pour obtenir l'affichage ci-dessus. J'ai surligné en jaune le code utile.
Le reste permet uniquement de générer et de styler du contenu. La ligne "css-head" permet d'ajouter une bordure et un padding aux blocs de contenu qui sont générés à l'aide d'une boucle php.

Je vous laisse analyser ces shortcodes en vous aidant des démos pour ces actions.

{up masonry
 | css-head=#id>div[border:1px solid green;padding:10px] #id h3[text-align:center;margin-top:0]
}
  {up div=b tc bg-jauneClair t-rougeFonce}Modifier la largeur de votre navigateur pour voir l'effet{/up div}
  {up php=for($i=1;$i<=10;$i++): 
    echo '<div><h3>Titre ' . $i . '</h3><img src="//loremflickr.com/400/' . mt_rand(100,400) . '/joomla"></div>'; 
  endfor;}
{/up masonry} 

L'action masonry permet d'organiser tous les blocs de premier niveau du contenu entre les shortcodes comme des briques.

Comme il est d'usage avec UP, il est possible de séparer les blocs par des shortcodes séparateurs.

{up masonry}
  bloc 1
  {====}
  bloc 2
  {====}
  bloc 3
  {====}
{/up masonry} 

Il est également possible d'utiliser le résultat d'une autre action.

{up masonry | margin=10
| css-head=#id small[font-weight:normal; font-size:60%; display:block]}
{up jcontent-by_categories
| template=<h4 class="bg-bleu t-blanc p1 m0">##title##<small>##subtitle##</small></h4><div class="ph1 bd-bleu"><p class="tc">##image##</p>##intro-text##<p class="fs80 tr"><a class="badge-bleu" href="##link##">Lire la suite</a></div>
| main-tag=0
| maxi=12}
{/up masonry}

L'action jcontent-by_categories retourne 12 blocs avec les dernières actions de UP. L'action masonry ayant besoin d'avoir des blocs séparés, j'utilise l'option main-tag=0 pour supprimer le bloc parent. La mise en forme est définie avec l'option template. Par commodité, je définis des règles CSS pour le sous-titre dans l'option css-head du bloc parent (masonry). 

Nombre de colonnes

En fonction de la largeur du navigateur, l'argument principal permet de spécifier le nombre de colonnes ainsi que les marges entre les blocs.

Par défaut, il est égal à : masonry=480:2,720:3,960:4,1200:5 soit une colonne au-dessous de 480px, puis 2 au-dessus de 480px, 3 pour 720px, 4 pour 960px et 5 au-delà de 1200px.

Comme vous l'aurez compris, il suffit de mettre le point de rupture (breakpoint), un signe deux-points, puis le nombre de colonnes. Plusieurs consignes sont possibles en les séparant par des virgules.

Marge entre les blocs

Pour ajouter une marge entre les blocs, il existe 2 possibilités :

❶ utiliser l'option margin avec la taille de la marge horizontale et verticale. Si une seule valeur est fournie, elle sera utilisée pour X et Y.
Exemple pour une marge horizontale de 20px et verticale de 10px : margin=20*10

❷ définir les marges pour les breakpoints en ajoutant à la suite du nombre de colonnes.
Exemple pour une marge de 10px pour un breakpoint de 960px : 960:4*10

Il est possible d'avoir un recouvrement des blocs en indiquant une valeur négative.

{up masonry=480:2, 740:3*10, 960:4*20*40, 1200:5*-1
| preserve-order
| css-head=#id>div[border:1px solid green;padding:10px] #id h3[text-align:center;margin-top:0]}
{up div=b tc bg-jauneClair t-rougeFonce}Modifier la largeur de votre navigateur pour voir l'effet{/up div}
{up php=for($i=1;$i<=10;$i++): echo '<div><h3>Titre ' . $i . '</h3><img src="//loremflickr.com/400/' . mt_rand(100,400) . '/joomla"></div>'; endfor;}
{/up masonry} 

Modifier la largeur de votre navigateur pour voir l'effet

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5

Titre 6

Titre 7

Titre 8

Titre 9

Titre 10

Autres options

preserve-order

0, la valeur par défaut, favorise la hauteur de chaque colonne au détriment de l'ordre d'apparition des blocs. Cette option est activée dans l'exemple précédent.

wait-images

0, la valeur par défaut,  n'attends pas que toutes les images soient chargées en mémoire pour commencer les calculs de positionnement des blocs.

breakpoints-container

0, la valeur par défaut, utilise la largeur du navigateur comme valeur des breakpoints. 1 utilise la largeur du bloc contenant toutes les tuiles. Cela peut être utile si l'action masonry se trouve dans une grille responsive.

Détails

Création : 21 mars 2023

Mis à jour : 9 septembre 2023

• HTML