Vous souhaitez qu'une capture d'écran s'affiche plus petite sur le côté, ou qu'un diagramme occupe toute la largeur ? Vous pouvez contrôler précisément l'affichage des images dans vos articles : taille, alignement et même finitions visuelles comme les ombres.
Ajoutez une directive à la légende de votre image
Ouvrez l'image dans Notion et saisissez une directive directement dans le champ de légende. Tout texte ajouté avant ou après deviendra la légende visible ; la directive elle-même restera invisible pour vos lecteurs.
L'image s'affiche petite et centrée. La légende visible indique : Une petite capture d'écran centrée .
Définir la largeur
La manière la plus simple de contrôler la largeur est d'utiliser un préréglage : small, medium, large ou full.
<ndx: width="small" align="center" /> A small, centered screenshot
| Valeur | Exemple |
|---|---|
small | <ndx: width=small /> |
medium | <ndx: width=md /> |
large | <ndx: width=lg /> |
full | <ndx: width=full /> |
Définir l'alignement
Une fois la largeur définie, vous voudrez probablement aussi positionner l'image. Utilisez align pour la placer à gauche, au centre ou à droite dans la colonne de l'article.
| Valeur | Exemple |
|---|---|
left | <ndx: align=left /> |
center | <ndx: align=center /> |
right | <ndx: align=right /> |
Apportez la touche finale avec des effets visuels
Deux options permettent d'améliorer légèrement l'aspect de vos images. shadow ajoute une ombre portée discrète autour de l'image, et rounded arrondit les angles. Ces deux options sont subtiles, mais font une réelle différence, notamment pour les captures d'écran.
| Drapeau | Effet |
|---|---|
shadow | Ombre portée légère autour de l'image |
rounded | Coins arrondis |
Il suffit d'écrire le nom de l'option pour l'activer :
Ou indiquez clairement si vous souhaitez en désactiver une :
Voici à quoi ressemblent l'ombre et les coins arrondis ensemble :
Légende dans Notion : <ndx: width=medium align=center shadow rounded />
Regroupez tout dans une seule directive
Vous n'avez pas besoin de directives distinctes pour chaque option ; regroupez-les toutes en une seule. L'ordre n'a pas d'importance.
<ndx: shadow rounded /><ndx: shadow=true rounded=false />
<ndx: width=medium align=center shadow rounded />