box ~ mise en forme de blocs

Pour créer rapidement des pavés, cartes (cards), messages, pricelist, ...

Cette action doit être vue comme une facilité pour le rédacteur, mais aussi (et surtout) comme un outil permettant au webmaster de créer des box à l'image de son site.

Voir tous les modèles disponibles

Pour commencer

Le premier exemple montre plusieurs box intégrées dans un ensemble multibox.

Si l'habitude est de commencer par un exemple simple, il m'a semblé utile de vous montrer en premier une possibilité plus élaborée.
Cela permet de comprendre les choix qui ont guidé la conception de cette action. J'ai plusieurs fois repris cette action qui fait partie de UP depuis sa première version de l'été 2017.

Formule ARGENT

100€/an

Les fonctions essentielles pour les passionnés

• Option 1
• Option 2
• Option 3
• Option 4

En savoir +

Formule OR

150€/an

Pour les professionnels exigeants, toutes les options pour une performance accrue.

• Option 1
• Option 2
• Option 3
• Option 4
• Option 5
• Option 6

En savoir +

Formule BRONZE

60€/an

Pour découvrir ce fabuleux produit

• Option 1
• Option 2
• Option 3

En savoir +

{up box=pricelist | action=En savoir +}
{title=Formule ARGENT}
{subtitle=100€/an}
{image=/images/actions-demo/box/engrenage.jpg}
{link=#}
<p>Les fonctions essentielles pour les passionnés</p>
<ul class="ml3">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
{====== 2 }
{title=Formule OR | class=+t-jaune}
{subtitle=150€/an}
{image=/images/actions-demo/box/engrenage-or.jpg}
{link=#}
<p>Pour les professionnels exigeants, toutes les options pour une performance accrue.</p>
<ul class="ml3">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
{======= 3 }
{title=Formule BRONZE}
{subtitle=60€/an}
{image=/images/actions-demo/box/engrenage-bronze.jpg}
{link=#}
<p>Pour découvrir ce fabuleux produit</p>
{up csv2list | class=ml3}
[ico-oui] Option 1
[ico-oui] Option 2
[ico-non] Option 3
{/up csv2list}
{/up box}

Sauf cas particulier, vous utiliserez des box plus simples. L'objectif étant de créer ces petits pavés pour mettre en évidence un contenu.

info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Prioris

Lomart

note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Quaesita enim virtus

trombi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo modo? Quid enim me prohiberet Epicureum esse, si probarem, quae ille

crazy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summae mihi videtur inscitiae. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta

voir la suite

Comme vous pouvez le constater ci-dessous, les shortcodes pour réaliser ces exemples sont identiques à l'exception du lien pour certains.

{up box=info   | title=info   | image=images/up-lego.png} {up lorem | max-word=20} {/up box}
{up box=chip   | title=Lomart | link=//lomart.fr | image=images/lomart.jpg | class=mt2}{/up box}
{up box=note   | title=note   | image=images/up-lego.png} {up lorem | max-word=20} {/up box}
{up box=trombi | title=trombi | image=images/up-lego.png} {up lorem | max-word=20} {/up box}
{up box=crazy  | title=crazy  | image=images/up-lego.png | action=voir la suite | link=#} {up lorem | max-word=20} {/up box}

Le rédacteur doit uniquement se souvenir du modèle, le reste des données est toujours à fournir sous la même forme.

Tout le travail de mise en forme est réalisé en amont par les modèles fournis par UP ou ceux conçus par le webmaster du site.
Avec un peu d'HTML et de CSS, il est très facile de créer un nouveau modèle.

La saisie par le rédacteur

Pour faciliter le travail du rédacteur et permettre le multibox, 3 formes de shortcodes sont reconnues.

Même si les 3 box ci-dessous semblent identiques, les shortcodes à l'origine sont totalement différents.

❶ Comme options du shortcode

Informations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Nos commodius agimus. Non

{up box=info | class=tj
 | title=Informations
 | title-class=t-jaune
 | image=images/up-lego.png }
{up lorem | max-word=24}
{/up box} 

Cette méthode est le mode habituel de UP. On passe les différents composants comme options du shortcode.

Le contenu texte de la box est indiqué entre le shortcode ouvrant et fermant. Pour l'exemple, j'utilise l'action lorem.

❷ Comme shortcodes secondaires

Informations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. De malis autem et bonis

{up box=info | class=tj}
{title=Informations | class=t-jaune}
{image=images/up-lego.png }
{up lorem | max-word=16}
{/up box} 

Pour une multibox, cette méthode permet de saisir les informations pour chacun des pavés en les séparant par des {======}.

Un shortcode secondaire est composé du nom de l'option (title, subtitle, image, link, action), du signe égal et de son argument. Les options class et style permettent de styler individuellement un élément. Pour compléter une classe ou un style, il suffit de mettre un signe + au début.

Ce mode a le plus haut niveau de priorité.

❸ Par analyse du contenu

Informations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Si autem id non concedatur, non continuo

{up box=info | class=tj }
<h3 class="t-jaune">Informations</h3>
<p><img src="/images/up-lego.png"></p>
<p>{up lorem | max-word=24}</p>
{/up box}

Utilisables en multibox, les éléments titre, image et lien sont recherchés dans le contenu.

Cette méthode "visuelle" est utilisée uniquement si le modèle de box exige un élément qui n'est pas défini autrement.

Le niveau de priorité le plus élevé est le shortcode secondaire (2). Le 3e moyen est utilisé en dernier ressort si le modèle de box l'exige.

Les composantes d'une box

Les informations à fournir par le rédacteur sont à choisir parmi les suivantes. :

• titre (title, title-tag, title-class, title-style, title-link-class, title-link-style) : le titre principal de la boîte.
• sous-titre (subtitle, subtitle-tag, subtitle-class, subtitle-style, subtitle-link-class, subtitle-link-style)
• image (image, image-alt, image-class, image-style, image-link-class, image-link-style) : une image qui sera prise en charge le template du modèle et son CSS.
• action (action, action-tag, action-class, action-style, action-link-class, action-link-style) : un élément, en général en bas de la boîte pour inciter à l'achat
• lien (link, link-target) : une URL et son mode d'ouverture
• contenu le texte de la box est entre le shortcode ouvrant et fermant.
  Dans le cas d'une multibox, on sépare chaque box par {=====}

Toutes les options disponibles pour un type d'informations sont notées entre parenthèses. Plus d'infos ci-dessous.

Les options

box

Détermine la présentation de la box. Ce peut-être un modèle CSS ou un jeu d'option

multibox

Pour proposer plusieurs alternatives, il est possible de regrouper plusieurs box qui auront la même hauteur.
L'argument de multibox est le nombre de box par ligne sur grand écran, tablette et mobile. Par défaut : 3-2-1

Le mode multibox est automatiquement détecté par la présence de séparateurs {====} dans le contenu.

Dans ce mode, Les options title, subtitle, image, contact et link n'ont de sens que pour fournir une valeur par défaut. Il faut utiliser des shortcodes secondaires pour définir chaque box.

L'option align-vertical permet d'indiquer une classe à utiliser pour la justification verticale.
Voir : CSS - Flexbox, mais il n'y a actuellement pas d'autre choix que fg-vspace-between-1 qui place le bloc titre en haut, le bouton action en bas et répartit le contenu dans l'espace restant.

Les options multibox-class et multibox-style permettent de modifier l'aspect visuel de l'ensemble.

class

style

Pour modifier les règles CSS appliquées à l'extérieur de la box

title, subtitle, image, action, link

Ces 5 options permettent de saisir le contenu des différentes parties de la box. Leur nom se veut représentatif du contenu recu.

• title : l'élément titre de la box
• subtitle : le sous-titre ou un élément important
• image : une image dont l'affichage est géré par le CSS de l'action
• action : il s'agit de l'indispensable "Call to action" (CTA) des experts SEO
• link : l'URL cible de la box
• le contenu n'est pas une option, mais le texte (code HTML) saisi entre les shortcodes.

Les options title, subtitle et action peuvent contenir du BBCode.

Des versions suffixés de ces options existent pour préciser leurs attributs

• xxx-tag : la balise HTML pour le bloc de l'élément. (sauf pour image et link). 0 pour aucune balise.
• xxx-class : la ou les classes à attribuer à l'élément
• xxx-style : les styles pour l'élément
• xxx-link-class : la ou les classes à attribuer à la partie lien l'élément
• xxx-link-style : les styles pour la partie lien de l'élément

Note : il existe également

• image-alt : le texte alternatif à l'image. Si non spécifié, UP utilise une forme humanisé du nom du fichier.
• link-target : par défaut le lien s'ouvre dans la même fenêtre. Mentionner cette option, correspond à _blank

head, body

Comme nous le verrons avec template, il s'agit de 2 blocs permettant de styler l'entête et le corps de la box à l'aide des options :

• head-class & head-style
  
• body-class & body-style

template

Ce concept utilisé par plusieurs actions de UP permet de définir les informations retournées ainsi que la mise en forme.

Un template est composé de mots-clés.

• ##title## : le titre.
  exemple : <h4 class="up-box-title">Le titre</h4>
• ##title-link## : le titre avec un lien.
  exemple : <h4 class="up-box-title"><a href="#" class="up-box-title-link">Le titre</a></h4>
• ##subtitle## : le sous-titre.
  exemple : <h5 class="up-box-subtitle">Le sous-titre</h4>
• ##subtitle-link## : le titre.
  exemple : <h5 class="up-box-subtitle"><a href="#" class="up-box-subtitle-link">Le sous-titre</a></h5>
• ##title-subtitle## : le titre et le sous-titre dans un bloc <small>.
  exemple : <h4 class="up-box-title">Le titre<small class="up-box-subtitle">et le sous-titre</small></h4>
• ##title-subtitle-link## : le titre et le sous-titre dans un bloc <small> avec un lien.
  exemple : <h4 class="up-box-title"><a href="#" class="up-box-title-link">Le titre<small class="up-box-subtitle">et le sous-titre</small></a></h4>
  Si un des 2 éléments n'est pas argumenté, le résultat est équivalent à ##title## ou ##subtitle##
• ##link## : la valeur saisie dans l'option link. Attention : le mot-clé doit être entre guillemets doubles
  ##target## : la valeur saisie dans l'option link-target
  utilisation : [a href=\"##link##\" target='##target##']##action-text##[/a]
  
• ##image## : le contenu de l'élément dans un bloc img.
  exemple : <img class="up-box-image" src="/images/img.png">
• ##image-link## : le bloc image + le lien.
  exemple : <a href="#" class="up-box-image-link"><img class="up-box-image" src="/images/img.png"></a>
• ##image-css## : l'image est utilisée pour créer une règle CSS background en mode cover pour la box.
  ##image-css-xxx## : le background sera sur le bloc indiqué. exemple : ##image-css-head##
  
• ##action-link## : le bouton "Call to action" (CTA)
  exemple : <div class="up-box-action"><a href="#" class="up-box-action-link">Action</a></div>
  ##action-text## : le texte saisi dans l'option action
• ##content## : le contenu brut. aucun ajout

Pour la mise en forme, on dispose de :

• ##head## & ##/head## : une balise DIV avec les attributs définis par head-class & head-style
• ##body## & ##/body## : une balise DIV avec les attributs définis par body-class & body-style

Exemple d'utilisation, ce shortcode :

{up box=crazy
| title=crazy | subtitle=un modèle fou | image=images/up-lego.png | action=voir la suite | link=#
| template=##head## ##image## ##title-subtitle## ##/head## ##body## ##content## ##action-link## ##/body##} 
Lorem ipsum ... 
{/up box}

va générer le code HTML suivant :

<div id="up-00-00" class="up-box up-box-crazy">
  <img src="/images/up-lego.png" class="up-box-image"> 
  <h4 class="up-box-title">crazy<small class="up-box-subtitle">un modèle fou</small></h4>
  <div class="up-box-body">
      Lorem ipsum ...
    <div class="up-box-action"><a href="#" class="up-box-action-link">voir la suite</a></div>
  </div>  
</div>

Il est possible d'utiliser du bbcode dans le template. Toutefois cela est déconseillé.

Il faut s'assurer que cela n'aura pas d'impact si un élément est absent. Exemple: un saut de ligne([br]) avant un subtitle. Pour éviter cela, utilisez subtitle-tag et une règle CSS pour forcer le saut de ligne (display:block). Dans l'exemple ci-dessus, le contenu existera toujours et au pire une div n'a pas d'impact visuel.

css-head

Comme à son habitude, cette option permet de définir des règles CSS qui seront ajoutées dans le head de la page.

Concevoir un modèle

La conception peut se faire par expérimentation pour être ensuite convertie en un jeu d'options et/ou des règles CSS.

Créer un jeu d'options

Nous allons voir étape par étape, la création d'une box "ERROR".

Pour plus de clarté, j'utilise le mode avec les options dans le shortcode, mais une saisie en mode wysiwyg est possible.

J'utilise les classes proposées par UP qui ont l'avantage d'être très concises.

Le résultat

ERREUR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Le shortcode

{up box
 | title=ERREUR
 | class=bd-rouge}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{/up box}

Les explications

Pour débuter, on fournit un titre par défaut et un filet rouge (bd-rouge) autour de la box.

Il va falloir améliorer le rendu, mais le principe est là

ERREUR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{up box | title=ERREUR
 | image=images/actions-demo/box/error.png
 | class=bd2 bd-arrondi bd-rouge bg-jauneClair
 | title-class=bg-rouge t-jaune b}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{/up box}

On améliore le style de la box en ajoutant un arrondi à une bordure plus épaisse (bd2 bd-arrondi). Le fond devient jaune clair (bg-jauneClair)

On ajoute une petite image à l'aide de l'option image.

Le titre est mis en gras (b) et jaune (t-jaune) sur fond rouge (bg-rouge).

ERREUR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{up box
 | title=ERREUR
 | image=images/actions-demo/box/error.png
 | class=bd2 bd-arrondi bd-rouge bg-jauneClair
 | title-class=bg-rouge t-jaune b
 | title-style=padding: 0 10px 5px
 | image-class=left 
 | body-style=padding: 0 10px
 | template=##image## ##title## ##body## ##content## ##/body##}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{/up box}

L'image serait plus à sa place devant le titre. L'ajout d'une option image-class=left permet de faire flotter l'image à gauche.

J'ajoute une option template qui spécifie l'ordre d'apparition des éléments. ##body## va permettre d'utiliser l'option body-style pour mettre un padding au contenu.

J'ajoute également un pading au titre.

Attention

Un joli message d'erreur, mais surtout très rapide à saisir

{up box=error | title=Attention}
Un joli message d'erreur, mais surtout très rapide à saisir
{/up box}

Il est possible de modifier le titre ou l'image par défaut.

Pour simplifier la saisie, on va créer une section "error" ou "tartempion" dans le fichier prefs.ini de l'action.

[error]
title="ERREUR"
image="images/actions-demo/box/error.png"
image-class="left"
class="bd2 bd-arrondi bd-rouge bg-jauneClair"
title-class="bg-rouge t-jaune b"
title-style="padding: 0 10px 5px"
body-style="padding: 0 10px"
template="##image## ##title## ##body## ##content## ##/body##"

La feuille de style

Dans certains cas, l'utilisation de classes existantes et du template ne suffit pas ou manque de souplesse. L'utilisation d'un fichier CSS serait bienvenue !

Reprenons l'exemple précédent pour créer un modèle "error-css".

Pour éviter que vos créations soient écrasées lors d'une mise à jour de UP, il est impératif de les mettre dans le dossier plugins/content/up/actions/box/custom/model

Un modèle se compose de 3 fichiers :

• nom_model.css : la feuille de style
• nom_model.scss : le fichier SCSS pour créer la feuille de style. Optionnel, vous pouvez créer le fichier CSS directement
• nom_model.ini : les options par défaut pour l'action (template, title-tag, class, etc). Ce fichier est optionnel si les valeurs par défaut conviennent.

Aucune inscription n'est nécessaire. la présence de ces fichiers suffit.

Le fichier .ini

Son rôle est de passer les options à UP.

Pour notre exemple, le fichier error-css.ini contient le template, le titre et image par défaut.

title="ERREUR"
image="images/actions-demo/box/error.png"
template="##image## ##title## ##body## ##content## ##/body##"

Ce fichier est nécessaire uniquement si vous avez des options à définir.

Le fichier .scss

Je pense que la modification d'un fichier SCSS ne vous pose pas de souci. En cas de besoin, reportez-vous à cet article : https://lomart.fr/extensions/20-scss-compiler/31-comparaison-scss-less

Pour compiler le fichier CSS, il suffit d'appeler l'action upscsscompiler. Vous pouvez aussi utiliser le plugin SCSS Compiler ou en local l'application Windows Koala

Pour notre exemple, je vais créer mon fichier error-css.scss à partir de zéro

.up-box-error-css {
    border : 2px solid red;
    border-radius : 4px;
    background : lightYellow;
    .up-box-image {
        float:left;
        margin-right:10px;
    }
    .up-box-title{
        background : red;
        color : yellow;
        font-weight : bold;
        padding : 0 10px 5px; 
    }
    .up-box-body {
        padding : 0 10px;
    }
}

Important

• Par sécurité, toutes les classes sont préfixées par up-box-
• up-box-nom_model : la classe principale appliquée au bloc externe de la box
  
• up-box-element : les règles pour chacun des éléments : image, title, subtitle, action, link, head, body

Le shortcode :

{up box=error-css | title=Attention}
Un joli message d'erreur, mais surtout très rapide à saisir
{/up box}

Le résultat :

Attention

Un joli message d'erreur, mais surtout très rapide à saisir

Structure CSS d'une box

Il est indispensable de connaitre les classes attribuées à chaque élément constituant une box. Pour cela, je vais partir d'un template contenant la totalité des possibilités.

---
---
  ##head##
    ##image##
    ##title##
    ##subtitle##
  ##/head##
  ##body##
    ##content##
    ##action-link##
  ##/body##
---
---

<div id="up-00-0" class="up-multibox-model fg-row fg-gap fg-auto-3 fg-auto-m2 fg-auto-s1 fg-vspace-between-1">
  <div class="up-box up-box-model"> 
    <div class="up-box-head">
      <img src="/IMAGES/IMAGE.JPG" class="up-box-image">
      <h4 class="up-box-title">LE TITRE</h4>
      <div class="up-box-subtitle">SOUS-TITRE</div> 
    </div>
    <div class="up-box-body">
      LE CONTENU 
      <div class="up-box-action"><a href="#" class="up-box-action-link">ACTION</a></div> 
    </div>
  </div> <!-- box -->
</div> <!-- multibox -->

Dans la version HTML, j'ai surligné les classes affectées aux différentes composantes d'une box. Vous ne pouvez pas modifier leur nom.

1. Cette ligne uniquement présente pour les multibox :
   - up-multibox-nom_modele est utile pour définir des règles spécifiques à ce mode et au modèle.
   - fg-row fg-gap fg-auto-3 fg-auto-m2 fg-auto-s1 fixe les règles pour le responsive selon les critères passés par l'option multibox.
   - fg-vspace-between-1 est le mode de justification verticale défini par l'option align-vertical
2. il s'agit du bloc principal de la box. La classe up-box fixe les règles communes et up-box-nom_modele celles du modèle passé comme argument principal à l'action. Il est préfixé, comme toutes les classes par up-box-
   C'est ce bloc qui va recevoir les options class & style
3. Ce bloc permet de regrouper les éléments d'entête pour la justification verticale. Il reçoit comme attribut head-class & head-style
4. le bloc image a la classe up-box-image. Il reçoit comme attribut image-alt, image-class & image-style
5. le titre. Le tag est celui défini par title-tag. Il reçoit title-class & title-style
6. le sous-titre. Le tag est celui défini par subtitle-tag. Il reçoit subtitle-class & subtitle-style
7. fin du bloc up-box-head
8. Ce bloc permet de regrouper les éléments de contenu.
   Il est déconseillé de l'utiliser pour les modèles utilisés en multibox car il bloque la justification verticale.
   Il reçoit comme attribut body-class & body-style
9. le contenu tel que saisi entre les shortcodes
10. Le bloc action est inclus dans un bloc défini par action-tag qui reçoit les attributs action-class & action-style
    La balise ouvrante pour le lien reçoit les attributs définis par action-link-class & action-link-style
    
11. fin du bloc up-box-body
12. fin du bloc up-box
13. fin du bloc up-multibox

La répartition verticale du contenu

Pour équilibrer le contenu en multibox, l'action utilise le concept flexbox. Par défaut tous les blocs de premiers niveaux sont répartis sur la hauteur.

Ce principe explique pourquoi le bloc encadrant le contenu est optionnel. Les blocs répartis verticalement sont le bloc entête (##head##), tous les blocs de premier niveau du contenu entre shortcodes et le bloc action (##action##)

Dériver un modèle

Un modèle vous convient à 2 ou 3 détails près ... il suffit de créer un jeu d'options !

Un exemple pour comprendre le principe et vous donner quelques astuces : le modèle info serait parfait en vert et une autre icône.

Nous allons procéder par étape en ajoutant des options au shortcode

l'original

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

En savoir +

Le shortcode

{up box=info | title=Le titre | subtitle=Le sous titre | image=images/up-lego.png | action=En savoir + | link=#
| style=border:#006400 2px solid; border-left-width:8px;
| title-style=background:#006400
| action-link-style=background:#006400
| image-style=float:left;margin:0 10px 0 0
| css-head=#id .up-box-title:before[content:"\27A7"]
}
Lorem ipsum ...
{/up box}

Le résultat

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

En savoir +

Il nous reste à mettre cela dans notre fichier prefs.ini

[info-vert]
box=info
style="border:#006400 2px solid;border-left-width:8px;"
title-style="background:#006400"
action-link-style="background:#006400"
image-style="float:left;margin:0 10px 0 0"
css-head="#id .up-box-title:before[content:'\27A7']"