Media icons (Icônes médias)

Les icônes de médias permettent d’informer l’utilisateur qu’un article présenté dans une liste offre l’accès à un média particulier (diaporama, vidéo…).

Usage

L’icône est présente sur la photo illustrant un article présenté sous forme de liste. Elle n’est donc visible ni sur les articles présentés sans photo, ni dans le détail article lui-même.
Une seule pastille est affichée à la fois. Lorsque l’article est composé d’au moins une vidéo, d’au moins un podcast ou d’un « diaporama », une seule des icônes est présente. Il est préférable d’afficher l’icône la plus pertinente et la plus riche pour l’utilisateur.
3 types d’icônes existent :
- Vidéo permet d’indiquer à l’utilisateur qu’un article est composé d’au moins une vidéo. Celle-ci ne permet pas de lire la vidéo.
- Podcast permet d’informer l’utilisateur qu’un article est composé d’au moins un podcast.
- Diapo permet d’indiquer à l’utilisateur qu’un article comporte un « diaporama ». Cette icône ne concerne pas les photos dans le détail article, pour ce cas-là il faudra utiliser le Fullscreen button (bouton plein écran)
Ces pastilles ne sont pas des boutons c’est pourquoi, elles ne produisent pas d’action. Dans ce contexte de liste, où la photo est cliquable pour ouvrir le détail article (article complet), elle ne rentre donc pas en conflit avec cette action.

Bonnes pratiques

L’arrière plan de chaque pastille doit permettre sa visibilité grâce à un contraste suffisamment élevé.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide).

Rappel : il n’est pas possible de mettre plus d’une icône média à la fois.

Base

Pour insérer ces icônes il suffit d’un  avec une des trois classes liées aux médias :

su-media-icons-slideshow
su-media-icons-video
su-media-icons-podcast

Dans ce span, on ajoute un texte pour le rendre accessible, c’est-à-dire pour que les lecteurs d’écran apportent aux déficients visuels l’information liée à cette icône. Cela donne donc : Article avec diaporama.

N. B. – Ces icônes se positionnent en absolu par rapport au parent, il faut donc que ce parent ait une position relative. Le parent indiqué pour ces icônes est un élément avec la classe d’image su-main-picture qui possède cette position relative. Si vous devez utiliser un autre type de parent, vous pouvez comme ici, lui ajouter la classe su-relative disponible dans les Helpers (classes d’aide).

<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-slideshow">Article avec diaporama</span>
</div>
<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-video">Article avec vidéo</span>
</div>
<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-podcast">Article avec podcast</span>
</div>

Petites icônes

Pour mettre une petite icône (sur une petite photo), il suffit d’ajouter la classe su-small au composant. Cela donne donc : Article avec diaporama.

<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-slideshow su-small">Article avec diaporama</span>
</div>
<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-video su-small">Article avec vidéo</span>
</div>
<div class="su-relative" style="height: 70px; background: var(--gris); margin-bottom: var(--marge-s)">
    <span class="su-media-icons-podcast su-small">Article avec podcast</span>
</div>

Mise en situation

Ici, l’icône est positionnée dans son environnement « naturel », un parent avec la classe su-main-picture. Il n’y a donc pas besoin de la classe su-relative (cf plus haut). Toutefois, pour que le positionnement fonctionne dans tous les cas, y compris lorsqu’il y a une légende, il faut que cette classe soit posée sur un parent de l’image et de l’icône media, mais un enfant de <figure>.

<div class="su-row">
    <div class="su-col-md-12 su-col-lg-8 su-main-picture">
        <figure>
            <img alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
            <span class="su-media-icons-slideshow">Article avec diaporama</span>
        </figure>
    </div>
</div>
<div class="su-row">
    <div class="su-col-sm-3 su-col-md-4 su-col-lg-2 su-main-picture">
        <figure>
            <img alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
            <span class="su-media-icons-slideshow su-small">Article avec diaporama</span>
        </figure>
    </div>
</div>

Liste des classes disponibles

su-media-icons-slideshow
su-media-icons-video
su-media-icons-podcast
su-small

Classes annexes

su-main-picture (dépendant du composant Picture (image))
su-relative (dépendant des Helpers (classes d’aide))