J'ai créé cette action pour afficher des pavés de taille inégale à l'intérieur d'un article
{up masonry=breakpoint:nbCols*margeX*margeY}
bloc-1 bloc-2 bloc-n {/up masonry}
l'argument principal est la liste du nombre de colonnes et des marges par breakpoint.
Exemple :
{up masonry=960:4,1200:5}
4 colonnes au-dessus de 960px, 5 si 1200px{up masonry=960:4*10, 1200:5*10*20}
idem plus marges XY de 10px pour 960 et marge X de 10px et Y de 20px pour 12000- masonry = 480:2,720:3,960:4,1200:5: colonnes et marges par breakpoint : bp:col*x*y. ex: 960:2*10*10,480:1
- margin: marge en pixels. x*y pour des marges différentes en horizontal et vertical
Options annexes
- preserve-order: 1: l'ordre des blocs est préservé. 0=priorité à l'égalité de la hauteur des colonnes
- wait-images: 1: charge toutes les images avant le calcul. 0: calcul à chaque chargement d'image.
- breakpoints-container: 0: breakpoints définis sur la largeur du navigateur. 1: largeur du bloc parent
mise en forme CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
Un exemple simple
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).
media-video vidéo en HTML5
random choix aléatoire
jcontent-metadata contrôle des metadonnées
snippet
readmore volet déroulant "lire la suite"
popup
date
data2table
data2list
data-info
addfilehead
site-stat
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}
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.
box (1) div (3) upactionslist (1) masonry (3) php (2) jcontent-by_categories
- Détails