Modèles pour l’affichage des images

mercredi 4 septembre 2024

Voici un petit guide pour comprendre comment contrôler la position et la taille des images insérées dans un article, à la fois dans l’article en ligne et sa "version imprimable".

Affichage par défaut

<docXX> (pleine largeur sur la version imprimable)

Exemple 1 (Le titre de l’image)
exemple 1 (le descriptif de l’image)
Crédits

Petite image à gauche du texte

<docXXX|left>

exemple 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Petite image à droite du texte

<docXXX|right>

exemple 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image réduite à 50% de la largeur

<docXXX|half>

exemple 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud etc. (le texte est renvoyé sous l’image.)

Image réduite à 50% de la largeur mais...

exemple 5

alignée à droite du texte <docXXX|right|half>

exemple 6

alignée à gauche du texte <docXXX|left|half>

Pour ne pas afficher la légende, le titre, descriptif ou crédit

Il suffit de rajouter |masquer=... par exemple :
 <docXXX|masquer=legende> pour masquer la légende ;
 <docXXX|masquer=titre> pour masquer le titre ;
 <docXXX|masquer=descriptif> pour masquer le descriptif ;
 <docXXX|masquer=credits> pour masquer les crédits ;

Dans tous les exemples suivants, c’est un paramètre qu’on peut ajouter. Par contre on ne peut pas différencier entre la version online et la version imprimable.

Pour un affichage différent entre la version online et la version imprimable

On rajoute ce paramètre : |class=print-right (ou print-left ou print-center).

Exemple :
<docXXX|left|class=print-right> affichera l’image à gauche du texte sur la version online de l’article , et à droite du texte sur la version imprimable

<docXXX|class=print-left> affichera l’image au centre sur la version online de l’article , et à gauche du texte sur la version imprimable

Pour manipuler les images réduites à leur moitié, le paramètre "half" doit être donné avec le paramètre "print-center" :

<docXXX|right|class=half print-center> affichera l’image réduite à la moitié de sa longueur, à droite du texte sur la version online de l’article, mais en pleine largeur sur la version imprimable.

<docXXX|center|class=half print-right> affichera l’image réduite à la moitié de sa longueur, au centre sur la version online de l’article, et également réduite à sa moitié, mais à droite sur la version imprimable.

Pour n’afficher l’image réduite à sa moitié QUE sur la version imprimable

On donne le paramètre print-half-center (ou print-half-left ou print-half-right)
Exemple :
<docXXX|center|class=print-half-right> affichera l’image centrée sur la version online de l’article, mais réduite à sa moitié, et à droite du texte sur la version imprimable.

exemple 12 fgh rhyqehyqtyht
exemple 12 fgh rhyqehyqtyht
exemple 12 fgh rhyqehyqtyht

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.