L'action box avec son option multibox se prêterait bien à cet usage avec une réserve importante : l'image de background et les styles sont les mêmes pour toutes les boîtes.
Je vais donc créer 4 box différentes qui seront mises en page par l'action flexbox. Cette dernière, outre sa gestion du responsive, va forcer une hauteur identique pour toutes les boxs.
Le résultat
Les actions par l'usage
Comment choisir celle nous convient
Mémento rédacteur
indispensable pour maitriser l'utilisation de UP
UP en vidéo
au Joomladay 2022 à Bruxelles
{up flexauto=4 | tablet=2 | bloc-tag=0}
{up box=bg-image-only
| image = images/illustrations/etude-cas-{up lang}.jpg
| link=index.php?Itemid=1138
| style=bd-grey
}
{========= 2}
{up box=onimage
| title=Les actions par l'usage
| subtitle=Comment choisir celle nous convient
| image=images/illustrations/choisir-3.jpg
| link=index.php?option=com_content&view=article&id=333&catid=10
| title-class=raz notoc | subtitle-class=notoc
| head-class=bg-30
| title-style=text-shadow:#FC0 1px 0 10px;
| subtitle-class=bg-jauneClair}
{======= 3}
{up box=onimage
| title=Mémento rédacteur
| subtitle=indispensable pour maitriser l'utilisation de UP
| image=images/illustrations/typewriter.jpg
| link=index.php?option=com_content&view=article&id=209&catid=26
| head-class=background:#8B451399
| title-class=raz; notoc; text-outline:1px solid #666
| subtitle-class=notoc t-beige
| css-head=#id .up-box-title a[color:#ddd]
}
{======= 4}
{up box=onimage
| title=UP en vidéo
| subtitle=au Joomladay 2022 à Bruxelles
| image=images/illustrations/joomladay-2022.jpg
| link=index.php?option=com_content&view=article&id=150&catid=10#jd2022
| head-class=border:2px orange solid;border-radius:5px;background:#FA807266
| title-class=raz;notoc;text-shadow:#333 1px 0 10px
| subtitle-class=bg-jauneClair
| css-head=#id .up-box-title a[color:#EEE]
}
{/up flexauto}Les explications
Les trois box : onimage
Je vais juste expliquer le shortcode utilisé pour la première box, les autres suivent le même principe.
Vous trouverez plein d'infos sur la box pour la mise en forme des blocs
J'utilise le modèle onimage qui est le seul à proposer d'utiliser l'image comme background pour la box.
Pour mémoire, son template contient :
- image-css pour utiliser l'image comme image de fond
- un bloc head qui contient le titre avec lien et le sous-titre
- un bloc body inutilisé dans notre cas
- un bouton action pour en savoir plus
##image-css##
##head## ##title-link## ##subtitle## ##/head##
##body## ##content## ##/body##
##action-link##{up box=onimage
| title=Les actions par l'usage
| subtitle=Comment choisir celle nous convient
| image=images/illustrations/choisir-3.jpg
| link=index.php?option=com_content&view=article&id=333&catid=10
| title-class=raz notoc | subtitle-class=notoc
| head-class=bg-30
| title-style=text-shadow:#FC0 1px 0 10px;
| subtitle-class=bg-jauneClair
}- l'argument pour box est le modèle de la box. onimage permet d'utiliser l'image comme background
- Les options title, subtitle et link contiennent les informations spéciifiques à la box
- L'option image est le chemin vers l'image qui sera utilisée comme image de fond.
- Les classes définies par title-class et subtitle-class sont spécifiques à ce site. Elles annulent les marges de la balise h utilisé pour le titre, ainsi que l'ajout au sommaire sur le coté de la page.
- head-class ajoute un fond transparent sur le bloc titre + sous-titre
- title-style ajoute une ombre portée sous le texte du titre pour le mettre en évidence
- subtitle-class met le sous titre en jaune
La box : bg-image-only
Pour la première box, je voulais juste une image avec le texte "Etude de cas" qui ouvre le menu correspondant.
Le nouveau modèle bg-image-only, comme son nom l'indique, est parfait pour cet usage.
Le modèle de mise en page dans le fichier bg-image-only.ini est le suivant :
##image-css## [a href=\"##link##\" ##target # target=\"%%\"##]##body####content####/body##[/a]{up box=bg-image-only
| image = images/illustrations/etude-cas-{up lang}.jpg
| link=index.php?Itemid=1138
| style=bd-grey
}- box est le modèle utilisé
- image contient le chemin vers l'image dans la langue du visiteur. J'utilise une action lang pour adapter son nom
- link est le chemin vers le menu
- style ajoute une bordure grise
Seules ces 4 options sont reconnues par le modèle bg-image-only.
Si vous voulez ajouter du contenu, c'est possible en l'ajoutant entre le shortcode et un shortcode fermant. A vous de créer vos blocs et styles