Picture (Image)
Les images peuvent être intégrées à différents endroits du site et répondre à différents besoins. Mais ce composant correspond aux images informatives accompagnant un contenu, celles qui permettent d’informer ou d’illustrer un sujet. Il s’agit donc des images dans un article et de l’image principale d’un article (en tête d’article ou dans une liste d’articles). Il peut s’agir de photos, d’illustrations ou de graphiques.
Usage
- L’image est un moyen de communication majeur. Dans un article, elle transmet un message complémentaire aux informations déjà présentes comme le titre.
- Sauf incapacité technique, un article devrait toujours contenir au moins une image.
- Parmi les images d’un article, une lui servira de visuel.
- L’objectif de l’image principale est d’attirer l’œil et de donner envie aux utilisateurs de lire l’article.
- Les images, de par leurs diversités, peuvent avoir plusieurs formats. Toutefois, pour les images principales (qui servent en focus ou en teaser), 4 formats peuvent être utilisés :
- 16/9e Ce format est celui de base, celui de la majorité des photos actuelles.
- 16/7e Ce format étroitisé est est plus « artistique » et permet, en paysage, d’avoir une photo qui laisse un peu plus de place au reste du contenu.
- 4/3 Ce format correspond au standard des anciennes photos ou vidéos. Il est aussi un format « artistique » plus adapté aux portraits et aux gros plans.
- 1/1 Ce format carré permet d’afficher une petite image sans qu’elle occupe une surface trop importante sur un écran. Il est à privilégier dans des espaces denses ou étroits. Attention, une image 1/1 affichée en grand peut être, à l’inverse, très imposante.
- Afin d’obtenir ces formats finaux, certaines parties de l’image initiale peuvent ne pas être visibles par l’utilisateur final étant données que celle-ci est recadrée dans l’espace défini par le format.
Bonnes pratiques
- Image source :
- Sa qualité doit être suffisante.
- Le cadrage de la photo initiale doit être adapté aux différents formats visibles pour l’utilisateur final.
- Un point focal doit être défini pour le cas ou une image serait tronquée.
- Éviter d’importer une image d’une orientation (portrait / paysage) dans l’autre orientation. Par exemple : lorsqu’une image source 4/3 en portrait est importée dans un format 16/9e, seul 40 % de sa surface sera visible.
- Afin de préserver la lisibilité de l’image, un des côtés ne peut pas être inférieur à 70px.
Style & code
Dépendances :
- Classe
sipauisur un parent (par exemple le<body>), - composant Caption (légende).
En HTML, il existe 2 attributs pour passer une source à la balise <img> : src et srcset. Dans un souci de simplicité nous utiliserons la version (src) dans les exemples ci-dessous, excepté celui du ratio fixe qui permet d’illustrer l’usage de srcset.
Image de base
Bien que ce ne soit pas une obligation en HTML, dans SipaUI une image de contenu doit toujours être intégrée dans une balise <figure>. Cela permet à la fois de lui donner un conteneur sémantique et de lui rajouter une légende si nécessaire.
N. B. – Cette balise dans SipaUI possède nativement une position: relative, ce qui peut être pratique dans certains cas…
L’image est bien sûr composée d’une balise <img> avec ses 2 attributs obligatoires : src et alt ; src contenant la source de cette image et alt un descriptif. Ce descriptif est utile à la fois pour les moteurs de recherche et pour l’accessibilité. Toutefois, quand c’est possible, préférez une légende au descriptif dans la balise alt, cela permet de passer des informations complémentaires pour tout le monde.
N. B. – Pour des raisons de validité HTML, s’il n’y a pas de descriptif possible, ou si vous ajoutez une légende, le alt doit quand même être présent, mais il sera alors vide (alt="").
Enfin, dans SipaUI, les images sont responsives par défaut : elles s’adaptent à la taille de leur conteneur si celui-ci rétrécit. Par contre, afin de préserver la qualité d’affichage, elles ne s’agrandissent pas si le conteneur est plus grand.
<figure>
<img alt="« Coup de tête », Adel Abdessemed, 2012, 5 m de haut." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4ZDFmNjQ2NTQxNGJkYjkxNDQ2YjQ0NDc1NTlhOTBhZjQ?width=940&height=528&focuspoint=55%2C35&cropresize=1&client_id=bpeditorial&sign=361966cbac8e00a595e83d08fa60bb65dde946fec88fe8be5ed54cc3290ff77c">
</figure>
Image dans un article
Le code pour insérer des images dans un article est identique au code de l’image de base. La différence vient du fait que ce code est enfant de la classe su.-article, ce qui modifie les styles :
- ils viennent ajouter une marge au-dessus et au-dessous pour permettre une aération du contenu,
- ils font en sorte que l’image soit toujours en pleine largeur du conteneur, ce qui peut donc agrandir l’image si celle-ci est trop petite,
- ils apportent éventuellement une déco particulière en fonction du thème (p. ex., des coins arrondis…),
- la classe optionnelle
su-edge-mobileposée sur la balise<figure>permet de faire en sorte que sur mobile, l’image touche les bords de l’écran et perde les coins arrondis si elle en avait.
<div class="su-container" style="border: 1px dotted grey">
<div class="su-row">
<div class="su-col-lg-12 su-article">
<h2>H2 article</h2>
<p>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<figure class="su-edge-mobile">
<img alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMTA5OTVkYzcxNmNjNzFiN2JlYzgzYzUxNzFiZmI4NjVmYmY?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7f30ddff72d1bf1788475b7a57e859b6900a034358999c646bc713bf5630db6b">
<figcaption>Océan noir, par Martin Quenehen et Bastien Vivès. Casterman, 168 p., 22 €.</figcaption>
</figure>
<p>Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
Image principale
L’image principale d’un article est l’image mise en avant. C’est celle affichée en tête d’article, mais aussi celle qui peut être visible dans certaines listes d’articles. Sur cette image, il peut être utile d’ajouter du style spécifique (coins arrondis, bordure, ombre), ou de positionner des éléments au-dessus. Pour ce faire, utiliser la classe su-main-picture ; cette classe peut être posée sur l’<img> elle-même ou sur son parent, mais doit rester enfant de <figure>.
<div class="su-row">
<div class="su-col-md-4">
<figure>
<img class="su-main-picture" alt="Océan noir, par Martin Quenehen et Bastien Vivès. Casterman, 168 p., 22 €." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA5OTVkYzcxNmNjNzFiN2JlYzgzYzUxNzFiZmI4NjVmYmY?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7f30ddff72d1bf1788475b7a57e859b6900a034358999c646bc713bf5630db6b">
<figcaption>Cas tandard</figcaption>
</figure>
<figure>
<div class="su-main-picture">
<img alt="Océan noir, par Martin Quenehen et Bastien Vivès. Casterman, 168 p., 22 €." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA5OTVkYzcxNmNjNzFiN2JlYzgzYzUxNzFiZmI4NjVmYmY?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7f30ddff72d1bf1788475b7a57e859b6900a034358999c646bc713bf5630db6b">
</div>
<figcaption>Cas dans un < div></figcaption>
</figure>
</div>
</div>
Image dans un conteneur
Il peut être utile d’englober une image dans un conteneur afin de pourvoir la grouper avec du contenu qui ne fait pas partie directement des informations de l’image mais qui lui est lié. Par exemple, des composants qui doivent s’afficher directement au-dessus de celle-ci (badge, bouton plein-écran…). Pour cela, on utilisera un <div> avec la classe su-media-container.
<div class="su-row">
<div class="su-col-md-8">
<div class="su-media-container">
<figure>
<img class="su-main-picture" alt="Océan noir, par Martin Quenehen et Bastien Vivès. Casterman, 168 p., 22 €." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA5OTVkYzcxNmNjNzFiN2JlYzgzYzUxNzFiZmI4NjVmYmY?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7f30ddff72d1bf1788475b7a57e859b6900a034358999c646bc713bf5630db6b">
<figcaption>Océan noir, par Martin Quenehen et Bastien Vivès. Casterman, 168 p., 22 €.</figcaption>
</figure>
</div>
</div>
</div>
Image à ratio fixe
Attribut srcset
Les images peuvent s’afficher dans différentes tailles : petites dans les listes d’articles sur mobile, à très grandes en tête d’article sur desktop. Il faut donc qu’elle soit de bonne qualité (résolution) pour les ordinateurs, tout en restant assez légère pour les mobiles. Pour répondre à ces besoins contradictoires, il faut utiliser l’attribut HTML srcset pour la source de l’image. Cet attribut permet de passer plusieurs liens de ressources pour une image avec des paramètres de tailles et de résolutions d’écran ; c’est alors le navigateur qui choisit l’image à charger et afficher en fonction du contexte.
Les images de l’exemple ci-dessous illustre l’usage de srcset. Pour en savoir plus sur cet attribut, vous pouvez consulter l’article sur MDN.
Ratios d’images
Comme vu plus haut, les images principales s’affichent dans des formats prédéfinis : 16/9e, 16/7e, 4/3, ou 1/1. Pour cela, il faut ajouter la classe su-media à l’image et l’encapsuler dans une div avec la classe su-ratio-16-9, su-ratio-16-7 , su-ratio-4-3 ou su-ratio-1-1.
Attention : le changement de ratio se fait par le changement de taille du conteneur qui tronque l’image, certaines images peuvent ne pas être adaptées à des changement de ratio (images en mode portrait, mauvais point de focus).
N. B. – Si vous avez besoin de la classe su-main-picture, posez-la sur l'élément qui porte le ratio et non sur l’image.
<div class="su-container">
<div class="su-row">
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 16/7<sup>e</sup></p>
<figure>
<div class="su-ratio-16-7 su-main-picture">
<img class="su-media" alt="La Femme sera en concert dans la cour du château samedi soir, à 21 h 15."
srcset="https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=320&height=180&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4e984210b08fd3d7375279e2667cb61368e11a3822c0cf19ca0bb746411d5482 320w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=684fc61ade77eabcda05f39c916b53415b73e858683cde1066fae3e82db9b2c9 360w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=480&height=270&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a79295fe74eab588b936d81dbba58392c4756116431a9e91b7f0c912befbeb29 480w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=828ba051e1859db2ff2b2c839209c0380540f3222d707f286cde532f3d16f339 630w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=940&height=528&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7925cc38e945275a2bbf7313a1771beb33bdfd5b2ef8a0894e73cd191abcf627 940w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=bbebf5df3a471ad701785f13f38b3bae14bd8f1ddf124ecdc2f38ac3e73691cb 1260w"
sizes="(max-width: 767px) and (min-resolution: 2dppx) and (max-resolution: 2.9dppx) 50vw,
(max-width: 767px) and (min-resolution: 3dppx) and (max-resolution: 3.9dppx) 33.3vw,
(max-width: 767px) and (min-resolution: 4dppx) 25vw,
(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 979px) 630px,
(min-width: 980px) and (max-width: 1279px) 940px,
1260px">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 16/9<sup>e</sup></p>
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" alt="La Femme sera en concert dans la cour du château samedi soir, à 21 h 15."
srcset="https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=320&height=180&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4e984210b08fd3d7375279e2667cb61368e11a3822c0cf19ca0bb746411d5482 320w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=684fc61ade77eabcda05f39c916b53415b73e858683cde1066fae3e82db9b2c9 360w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=480&height=270&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a79295fe74eab588b936d81dbba58392c4756116431a9e91b7f0c912befbeb29 480w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=828ba051e1859db2ff2b2c839209c0380540f3222d707f286cde532f3d16f339 630w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=940&height=528&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7925cc38e945275a2bbf7313a1771beb33bdfd5b2ef8a0894e73cd191abcf627 940w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=bbebf5df3a471ad701785f13f38b3bae14bd8f1ddf124ecdc2f38ac3e73691cb 1260w"
sizes="(max-width: 767px) and (min-resolution: 2dppx) and (max-resolution: 2.9dppx) 50vw,
(max-width: 767px) and (min-resolution: 3dppx) and (max-resolution: 3.9dppx) 33.3vw,
(max-width: 767px) and (min-resolution: 4dppx) 25vw,
(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 979px) 630px,
(min-width: 980px) and (max-width: 1279px) 940px,
1260px">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 4/3</p>
<figure>
<div class="su-ratio-4-3 su-main-picture">
<img class="su-media" alt="La Femme sera en concert dans la cour du château samedi soir, à 21 h 15."
srcset="https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=320&height=180&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4e984210b08fd3d7375279e2667cb61368e11a3822c0cf19ca0bb746411d5482 320w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=684fc61ade77eabcda05f39c916b53415b73e858683cde1066fae3e82db9b2c9 360w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=480&height=270&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a79295fe74eab588b936d81dbba58392c4756116431a9e91b7f0c912befbeb29 480w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=828ba051e1859db2ff2b2c839209c0380540f3222d707f286cde532f3d16f339 630w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=940&height=528&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7925cc38e945275a2bbf7313a1771beb33bdfd5b2ef8a0894e73cd191abcf627 940w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=bbebf5df3a471ad701785f13f38b3bae14bd8f1ddf124ecdc2f38ac3e73691cb 1260w"
sizes="(max-width: 767px) and (min-resolution: 2dppx) and (max-resolution: 2.9dppx) 50vw,
(max-width: 767px) and (min-resolution: 3dppx) and (max-resolution: 3.9dppx) 33.3vw,
(max-width: 767px) and (min-resolution: 4dppx) 25vw,
(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 979px) 630px,
(min-width: 980px) and (max-width: 1279px) 940px,
1260px">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 1/1</p>
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" alt="La Femme sera en concert dans la cour du château samedi soir, à 21 h 15."
srcset="https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=320&height=180&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4e984210b08fd3d7375279e2667cb61368e11a3822c0cf19ca0bb746411d5482 320w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=684fc61ade77eabcda05f39c916b53415b73e858683cde1066fae3e82db9b2c9 360w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=480&height=270&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a79295fe74eab588b936d81dbba58392c4756116431a9e91b7f0c912befbeb29 480w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=828ba051e1859db2ff2b2c839209c0380540f3222d707f286cde532f3d16f339 630w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=940&height=528&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=7925cc38e945275a2bbf7313a1771beb33bdfd5b2ef8a0894e73cd191abcf627 940w,
https://media.ouest-france.fr/v1/pictures/MjAyMTA4MmIwNTYyYTJlMmJiOThjNTUzZTJlNDlkYTBkZDc2YmI?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=bbebf5df3a471ad701785f13f38b3bae14bd8f1ddf124ecdc2f38ac3e73691cb 1260w"
sizes="(max-width: 767px) and (min-resolution: 2dppx) and (max-resolution: 2.9dppx) 50vw,
(max-width: 767px) and (min-resolution: 3dppx) and (max-resolution: 3.9dppx) 33.3vw,
(max-width: 767px) and (min-resolution: 4dppx) 25vw,
(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 979px) 630px,
(min-width: 980px) and (max-width: 1279px) 940px,
1260px">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
Image à ratio variable
Afin de gérer au mieux la largeur limitée des écrans de smartphones, il peut arriver qu’on ait besoin d’afficher une image en carré en mobile et plus large sur des écrans plus grands. Pour mettre en place ce fonctionnement, il faut définir le format carré comme format standard avec la classe su-ratio-1-1, puis lui ajouter le format souhaité sur écran plus grand avec une classe su-ratio-16-7-md, où 16-7 est le ratio souhaité et md la taille d’écran concerné. On peut donc choisir 16-7, 16-9, 4-3 ou 1-1, et md ou lg.
<div class="su-container">
<div class="su-row">
<div class="su-col-md-12 su-article">
<p class="su-h2">Image carrée en mobile et en 16/7<sup>e</sup> en écran moyen</p>
<figure>
<div class="su-ratio-1-1 su-ratio-16-7-md su-main-picture">
<img decoding="async" class="su-media" alt="Le dernier volet d’OSS 117 détrône Kaamelott dans les salles de cinéma." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NmRhMDIxNWVhYzQ0ZTg2ZWUyNzAyMTFkYjViZTU1MzE?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=99182334695a289d0f71649d199bcf960d1f15e0a9c749196220b1cdd36ca0b2">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image carrée en mobile et en 16/9<sup>e</sup> en écran large</p>
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
<img decoding="async" class="su-media" alt="Après avoir fait les beaux jours de M6 (photo), la série Kaamelott d’Alexandre Astier débarque mercredi au cinéma." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA3MmE4ZTE0MmE4NDRmZGZjMWQ5Mjc0MWY5ZTlmYzQyMTY?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=9a5377c25883307ca579bd739f32db98dbffe7af1c26d9c8b05e67fff0ec33aa">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image 16/7<sup>e</sup> en mobile et en 4/3 en écran moyen</p>
<figure>
<div class="su-ratio-16-7 su-ratio-4-3-md su-main-picture">
<img decoding="async" class="su-media" alt="« À la poursuite de l’affreunard », de Benjamin Bottela" src="https://media.ouest-france.fr/v1/pictures/MjAyNDA0M2YyNjA4MzhiYTRlNzM3NzIzMGRjZmU2NjVjMzZmNjc?width=1260&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=2760e6932ad0dfb9ff19b1a580fb23a3e613584415550930760e34c5aee81943">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
Orientation des images
Il est possible d’afficher les photos en orientation paysage (à l’horizontale) ou en orientation portrait (à la verticale) en retournant le rapport largeur/hauteur de leur conteneur. Par défaut, ces conteneurs sont en mode paysage, pour les passer en mode portrait, utilisez la classe su-portrait.
Attention : comme pour le changement de ratio, le changement d’orientation du conteneur peut détériorer le rendu final de l’image (images d’origine dans l’autre orientation, mauvais point de focus).
<div class="su-container">
<div class="su-row">
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 16/9<sup>e</sup></p>
<figure>
<div class="su-ratio-16-9 su-portrait su-main-picture">
<img class="su-media" alt="Dans son ouvrage « Loire », Étienne Davodeau rend un hommage sensible au fleuve royal. | DAVODEAU / FUTUROPOLIS" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAzZDg3ZGNmMjRmODgwNDA1N2ZmYWIyMjRiMTU5NzA0Njc?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=5178101f3048c4d245fc70b7620ce442b54dd3d6f73fa9c7b7e1af86d9284e4e">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 16/7<sup>e</sup></p>
<figure>
<div class="su-ratio-16-7 su-portrait su-main-picture">
<img class="su-media" alt="Dans son ouvrage « Loire », Étienne Davodeau rend un hommage sensible au fleuve royal. | DAVODEAU / FUTUROPOLIS" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAzZDg3ZGNmMjRmODgwNDA1N2ZmYWIyMjRiMTU5NzA0Njc?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=5178101f3048c4d245fc70b7620ce442b54dd3d6f73fa9c7b7e1af86d9284e4e">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 4/3</p>
<figure>
<div class="su-ratio-4-3 su-portrait su-main-picture">
<img class="su-media" alt="Dans son ouvrage « Loire », Étienne Davodeau rend un hommage sensible au fleuve royal. | DAVODEAU / FUTUROPOLIS" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAzZDg3ZGNmMjRmODgwNDA1N2ZmYWIyMjRiMTU5NzA0Njc?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=5178101f3048c4d245fc70b7620ce442b54dd3d6f73fa9c7b7e1af86d9284e4e">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image en 1/1</p>
<figure>
<div class="su-ratio-1-1 su-portrait su-main-picture">
<img class="su-media" alt="Dans son ouvrage « Loire », Étienne Davodeau rend un hommage sensible au fleuve royal. | DAVODEAU / FUTUROPOLIS" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAzZDg3ZGNmMjRmODgwNDA1N2ZmYWIyMjRiMTU5NzA0Njc?width=630&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=5178101f3048c4d245fc70b7620ce442b54dd3d6f73fa9c7b7e1af86d9284e4e">
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
Image sans recadrage
Comme l’illustrent les exemples ci-dessus, toute image intégrée dans un conteneur qui possède un ratio différent de son ratio natif se verra recadrée et donc tronquée. Quand on maitrise la source, ce n’est pas un problème, on choisi une image qui sera le plus proche possible du ratio du conteneur ou, tout du moins, une image qui supportera le recadrage. Toutefois, parfois, on ne maîtrise pas la source de l’image et cela peut créer une coupe non désirée sur la photo.
Dans ce cas, il faut rajouter la classe su-no-crop à côté de la classe de ratio au-dessus de l’image avec la classe su-media et ajouter un <div class="su-background" style="url(URL_DE_L’IMAGE)"> après l’image.
<div class="su-container">
<div class="su-row">
<div class="su-col-md-12 su-article">
<p class="su-h2">Image verticale non recadrée dans un conteneur en 16/9<sup>e</sup> horizontal</p>
<figure>
<div class="su-ratio-16-9 su-main-picture su-no-crop">
<img class="su-media" alt="Plouguenast-Langast. Le sculpteur Seenu et la statue de saint Joseph, dans sa niche définitive. | OUEST-FRANCE" src="https://media.ouest-france.fr/v1/pictures/MjAyNDA2NTcyYmU0YWJjZGQ3OTUwMjVjNmMwYTUxNTljNGY2MDI?width=1260&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=9aaac457ae9f04a4e303e1c69eeb62dba65a95030749c4c18660f18d35fbf3bc">
<div class="su-background"style="background-image: url('https://media.ouest-france.fr/v1/pictures/MjAyNDA2NTcyYmU0YWJjZGQ3OTUwMjVjNmMwYTUxNTljNGY2MDI?width=1260&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=9aaac457ae9f04a4e303e1c69eeb62dba65a95030749c4c18660f18d35fbf3bc')"></div>
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="su-col-md-12 su-article">
<p class="su-h2">Image panoramique non recadrée dans un conteneur en 16/9<sup>e</sup> horizontal</p>
<figure>
<div class="su-ratio-16-9 su-main-picture su-no-crop">
<img class="su-media" alt="Plouguenast-Langast. Folle ambiance d’après match, les joueuses ont posé avec leurs nombreux supporters. | OUEST-FRANCE" src="https://media.ouest-france.fr/v1/pictures/MjAyNDA2ZWUwMDQwOWM1NWFiNDhjMWUxNGZhMjA4MGUwMGI1YzY?width=1260&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=ccabcdf1c4d78ba08d4a029e6ea6f42f3e8ef41cb15a2fe630f8ab5cbbae5eb9">
<div class="su-background"style="background-image: url('https://media.ouest-france.fr/v1/pictures/MjAyNDA2ZWUwMDQwOWM1NWFiNDhjMWUxNGZhMjA4MGUwMGI1YzY?width=1260&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=ccabcdf1c4d78ba08d4a029e6ea6f42f3e8ef41cb15a2fe630f8ab5cbbae5eb9')"></div>
</div>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
Image à coins arrondis
En fonction du thème, les images ont toutes des coins carrés ou des coins arrondis. Il existe toutefois 2 classes qui permettent de forcer un état ponctuellement si nécessaire, les classes su-radius-on et su-radius-off.
<div class="su-container">
<div class="su-row">
<div class="su-col-md-12 su-article">
<p class="su-h2">Image d’article à coins carrés forcés</p>
<figure>
<img class="su-radius-off su-margin-bottom-m" alt="« Coup de tête », Adel Abdessemed, 2012, 5 m de haut." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4ZDFmNjQ2NTQxNGJkYjkxNDQ2YjQ0NDc1NTlhOTBhZjQ?width=940&height=528&focuspoint=55%2C35&cropresize=1&client_id=bpeditorial&sign=361966cbac8e00a595e83d08fa60bb65dde946fec88fe8be5ed54cc3290ff77c">
</figure>
</div>
<div class="su-col-md-12">
<p class="su-h2">Image hors article à coins arrondis forcés</p>
<figure>
<img class="su-radius-on" alt="« Coup de tête », Adel Abdessemed, 2012, 5 m de haut." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4ZDFmNjQ2NTQxNGJkYjkxNDQ2YjQ0NDc1NTlhOTBhZjQ?width=940&height=528&focuspoint=55%2C35&cropresize=1&client_id=bpeditorial&sign=361966cbac8e00a595e83d08fa60bb65dde946fec88fe8be5ed54cc3290ff77c">
</figure>
</div>
</div>
</div>
Liste des classes disponibles
su-edge-mobilesu-mediasu-media-containersu-main-picturesu-ratio-16-9su-ratio-16-7su-ratio-4-3su-ratio-1-1su-ratio-16-7-mdsu-ratio-16-9-mdsu-ratio-4-3-mdsu-ratio-1-1-mdsu-ratio-16-7-lgsu-ratio-16-9-lgsu-ratio-4-3-lgsu-ratio-1-1-lgsu-radius-onsu-radius-offsu-no-cropsu-background