Blocs de contenus média

Liste des blocs dédiés aux contenus média : image, galerie d'image, vidéo, image avec texte et fichier à télécharger

Les blocs de contenus média regroupent l'ensemble des blocs permettant d'intégrer des visuels et des ressources dans vos pages : images, vidéos, fichiers à télécharger, ainsi que des compositions associant texte et image (image flottante, texte encadré, galerie). Ils enrichissent le contenu textuel en apportant du support visuel ou des ressources complémentaires.

Contrairement aux blocs de texte, ces blocs reposent sur l'envoi de fichiers : vous sélectionnez et importez une image, une vidéo ou un document depuis votre ordinateur, plutôt que de saisir directement du contenu. Le fichier envoyé est enregistré sur le serveur qui héberge votre site et pourra alors être affiché où vous le souhaitez dans la page. Il reste toutefois associé à cette page et à ce bloc : il n'est pas partagé automatiquement avec les autres pages du site. Si vous souhaitez utiliser la même image, vidéo ou document ailleurs, vous devrez l'envoyer à nouveau.

Bloc image

Le bloc image permet d'insérer une image accompagnée d'un texte alternatif, d'une légende et, si besoin, d'un lien. Il est adapté pour illustrer un contenu, mettre en avant un visuel clé ou accompagner un texte d'un support graphique. La mise en forme (proportions selon l'écran, bordures, arrondis, alignement) se règle indépendamment du contenu, dans l'onglet Style.

privilégier un texte alternatif court et descriptif : il doit permettre de comprendre l'image sans la voir, notamment pour l'accessibilité et le référencement. Les textes incrustés sur une image (exemple : affiche de concert avec date et adresse) doivent être retranscris dans le texte alternatif.
adapter les proportions de l'image à chaque taille d'écran (mobile, tablette, ordinateur) plutôt que de garder un cadrage unique, pour que l'image reste lisible sur tous les supports.
ajuster la focale de l'image lorsqu'un recadrage est appliqué, afin que l'élément essentiel du visuel reste visible quel que soit le format.
ne pas utiliser la légende comme texte alternatif : la légende est un texte visible et éditorial, alors que le texte alternatif est une description technique destinée aux lecteurs d'écran et aux moteurs de recherche.

Information d'éco-conception

Les images envoyées sont automatiquement optimisées pour le web. Il n'est pas nécessaire de les redimensionner ou de les compresser vous-même avant l'envoi. Essentiel CMS génère plusieurs versions de chaque image, adaptées à son emplacement dans la page (nombre de colonnes occupées) ainsi qu'à la taille d'écran de l'appareil utilisé pour la consulter (mobile, tablette, ordinateur). Le visiteur reçoit ainsi toujours la version la mieux dimensionnée pour son écran, ce qui améliore la vitesse d'affichage de la page.

La taille de l'image source envoyée reste toutefois à surveiller : une image trop petite risque d'être étirée et de perdre en netteté si elle est affichée en grand format (pleine largeur, option haute définition), tandis qu'une image à très haute résolution (par exemple issue directement d'un appareil photo) n'apporte aucun bénéfice visuel une fois réduite pour le web, mais alourdit inutilement l'envoi et l'espace utilisé sur le serveur. Une largeur d'environ 1800 à 2400 px est généralement suffisante pour couvrir l'ensemble des usages, y compris les formats les plus grands.

Exemple : charger une image sur le site

Édition d'une image dans l'espace d'administration, annoté

1. Onglets contenu et style: L'onglet contenu permet de charger l'image et de lui ajouter plus de contexte via du texte ou un lien. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier le rendu de l'image sur le site.
2. Sélection de l'image: Le bouton transférer permet de charger l'image depuis votre ordinateur, l'image sera alors disponible à la sélection sur cette page. Le bouton sélectionner permet de choisir parmi les images déjà transférées sur cette page.

Pour l'instant aucune image n'a encore été transférée sur cette page, il faut donc passer par le bouton transférer et sélectionner l'image à envoyer.

Image chargée dans l'espace d'administration, annoté

1. Image sélectionnée: Une fois transférée, l'image s'affiche en tant qu'image sélectionnée pour ce bloc.
2. Désélectionner l'image: Ce bouton permet de retirer l'image sélectionnée en 1. Vous pouvez alors en transférer une autre ou bien en sélectionner une parmi les images déjà chargées.
3. Texte alternatif: Les personnes aveugles ou malvoyantes utilisent des lecteurs d'écran pour naviguer sur le web. Le texte alternatif est transformé en lecture audio et leur permettent de comprendre le contenu des images.
4. Légende: La légende ajoute du contexte à l'image pour tous les visiteurs, il est différent du texte alternatif du fait qu'il donne des informations supplémentaires à l'image seule.
5. Lien: Ajoute un lien qui rend l'image cliquable, cette notion est abordée dans la partie suivante blocs de navigation.

Rendu de l'exemple sur le site :

Vue aérienne d'un pont en structure métallique traversant la Loire — Pont de Saint-Mathurin-sur-Loire

Exemple : modifier les proportions de l'image et le point de focale

Dans cet exemple, nous allons réduire au maximum la hauteur de l'image sur mobile afin qu'elle occupe le moins de place possible, tout en gardant le pont toujours visible en entier. Cela passera par une configuration d'un format 3:1 sur mobile, 2:1 sur tablette et 4:3 sur ordinateur, avec une focale positionnée en haut de l'image, du côté du pont, afin que le recadrage retire la partie haute occupée par le ciel plutôt que le pont lui-même.

Réglage des proportions :

Édition du style d'une image dans l'espace d'administration, annoté

1. Onglets style: Accédez aux options de rendu de l'image via son onglet style.
2. Proportions de l'image: Trois menus déroulants permettent de choisir dans quel format l'image sera affichée selon la taille de l'écran de l'utilisateur : mobile, tablette et ordinateur. Un large choix de formats est proposé, du paysage au portrait, pour s'adapter à la composition de chaque image et à son emplacement dans la page.
3. Autres options: D'autres réglages permettent d'ajuster l'affichage de l'image : alignement, bordure, arrondis, taille exacte ou définition. Ces options sont généralement laissées à leurs valeurs par défaut, mais restent accessibles pour des besoins spécifiques.

Réglage de la focale :

Édition de la focale d'une image dans l'espace d'administration, annoté

1. Ouvrir l'image dans son espace de stockage: Pour accéder aux détails techniques de l'image, cliquez sur le nom du fichier dans l'onglet Image du bloc.
2. Fil d'ariane: Le fil d'ariane indique où l'image est stockée. Dans cet exemple, elle a été transférée depuis la page "Blocs de contenu média". Une fois la focale sélectionnée, vous pouvez cliquer sur le lien pour revenir à l'édition de votre page.
3. Sélection de la focale: Pour créer un point de focale, cliquez sur l'image à l'endroit souhaité. Un cercle bleu et blanc apparait là où vous avez cliqué, et les coordonnées du point s'affichent dans le détail technique de l'image. Pour le modifier, cliquez de nouveau à un autre endroit sur l'image.

Rendu de l'exemple sur le site (s'adapte selon la taille de votre écran actuel) :

Vue aérienne d'un pont traversant la Loire — Le pont Jacques-Gabriel à Blois

Pour donner un aperçu du rendu sur les différentes tailles d'écran, voici une galerie compilant l'affichage de l'image sur les trois tailles d'écrans :

Exemple de rendu d'une image sur le site au format ordinateur — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Exemple de rendu d'une image sur le site au format tablette — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Bloc galerie

Le bloc galerie permet d'insérer plusieurs images présentées sous forme de grille, avec une légende commune. Il est adapté pour illustrer un ensemble de visuels liés entre eux : photos d'un événement, étapes d'une réalisation, ou variantes d'un même sujet. La mise en forme (proportions des images, nombre par ligne, bordures, arrondis, couleur de fond) se règle indépendamment du contenu, dans l'onglet Style.

privilégier un texte alternatif court et descriptif pour chaque image : il doit permettre de comprendre l'image sans la voir, notamment pour l'accessibilité et le référencement.
choisir des images de composition similaire (cadrage, orientation) pour un rendu homogène. Il est possible de choisir un format d'image commun qui s'appliquera à l'ensemble des images.
adapter le nombre d'images par ligne à la quantité de visuels et à l'espace disponible, pour garder une grille lisible plutôt que trop dense.
ne pas utiliser la légende comme texte alternatif : la légende est un texte visible et éditorial commun à la galerie, alors que le texte alternatif est une description technique propre à chaque image, destinée aux lecteurs d'écran et aux moteurs de recherche.

Exemple

Dans cet exemple, nous allons afficher une galerie de quatre photos de ponts au format 4:3, réparties sur une ligne de 4 images sur grand écran, deux lignes de deux sur tablette, et une image par ligne sur mobile.

Édition d'une galerie d'images dans l'espace d'administration, annoté

1. Onglets images et style: L'onglet images permet de charger les images de la gallerie et de lui ajouter un texte de légende si nécessaire. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier le rendu de la galerie sur le site.
2. Sélection des l'images: Le bouton transférer permet de charger les images depuis votre ordinateur, elles seront alors disponibles à la sélection sur cette page. Le bouton sélectionner permet de choisir parmi les images déjà transférées sur cette page.
3. Texte alternatif: Le texte alternatif de chaque image peut être renseigné en cliquant sur les images en question. Ces textes sont alors affichés en prévisualisation dans cette vue de la gallerie. Cela facilite l'identification des images n'ayant pas encore de texte alternatif de renseigné.
4. Légende: Ce texte sera affiché en dessous de la gallerie d'image, il doit donc ajouter du contexte qui serait lié à l'ensemble des images de la gallerie.

Édition des options d'une galerie d'images dans l'espace d'administration, annoté

1. Proportions: Applique les mêmes proportions à toutes les images de la galerie, pour un rendu harmonieux.
2. Nombre d'éléments par ligne: Définit le nombre d'images affichées par ligne, selon la taille d'écran (mobile, tablette, ordinateur).

Rendu de l'exemple sur le site (s'adapte selon la taille de votre écran actuel) :

Pont en pierre traversant la Loire — Ponts présents sur le fleuve de la Loire. Dans l'ordre d'apparition, ponts des communes suivantes : Saint-Mathurin-sur-Loire, Blois, Langeais, Ancenis.

Pour donner un aperçu du rendu sur les différentes tailles d'écran, voici une galerie compilant l'affichage de l'image sur les trois tailles d'écrans :

Exemple de rendu d'une gallerie d'images sur le site au format ordinateur — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Exemple de rendu d'une gallerie d'images sur le site au format tablette — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Bloc image flottante avec texte

Le bloc image flottante avec texte permet d'associer un texte et une image dans une même composition, l'image étant placée à gauche ou à droite tandis que le texte s'enroule autour. Il est adapté pour illustrer un paragraphe sans interrompre la lecture par un bloc séparé, ou pour donner un rendu plus dynamique qu'un enchaînement classique texte/image. L'onglet Style reprend les options classiques du bloc image, tandis que l'onglet Contenu regroupe les options spécifiques à ce bloc (texte, position et taille de l'image).

choisir une largeur d'affichage adaptée à la longueur du texte : une image trop large sur un texte court peut déséquilibrer la composition, tandis qu'une image trop petite sur un texte long peut la rendre peu visible.
rester vigilant sur mobile, où le texte peut se retrouver écrasé si l'image occupe une largeur trop importante par rapport à l'écran.

Exemple

Édition d'un bloc image flottante avec texte dans l'espace d'administration, annoté

1. Onglets images et style: L'onglet Images permet d'ajouter le texte, l'image ainsi que de gérer leur mise en page. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet Style contient les mêmes options que le bloc image.
2. Contenu texte: Équivaut à un bloc texte, vous pouvez vous référer à sa documentation si nécessaire dans la partie blocs de textes essentiels.
3. Image: Transférez ou sélectionnez une image déjà chargée. Dans cet exemple l'image du pont d'Ancenis est réutilisée en passant par le bouton sélectionner.
4. Placement sur le côté: Conditionne le rendu de l'image sur le site, à la gauche ou à la droite du texte.
5. Largeur du média affiché: Ce menu déroulant permet de choisir la place que prendra l'image par rapport au texte.
6. Texte alternatif: Cette image n'étant pas décorative, un texte alternatif doit être fourni. Le texte informatif en gris affiché au niveau de l'image confirme qu'un texte alternatif a déjà été renseigné directement sur celle-ci, il n'est donc pas nécessaire de le saisir à nouveau ici.

Rendu de l'exemple sur le site (s'adapte selon la taille de votre écran actuel) :

Ce bloc est idéal pour intégrer un visuel dans un paragraphe sans créer de rupture dans la lecture. Le texte s'ajuste autour de l'image et continue naturellement en dessous lorsqu'il la dépasse en longueur. Le placement et la taille de l'image se règlent dans les options du bloc.

Pour montrer que le texte s'enroule bien autour de l'image, il faut un texte assez long. C'est pourquoi je vais rajouter ici une description issue de la page wikipedia de ce pont : le pont suspendu d'Ancenis, officiellement baptisé pont Bretagne-Anjou et parfois dénommé pont Anjou-Bretagne, est un pont qui franchit la Loire à hauteur de Ancenis-Saint-Géréon (Loire-Atlantique) sur la rive nord, pour rejoindre Orée d'Anjou (Maine-et-Loire) sur la rive sud, par la route départementale D 763 dans la région Pays de la Loire en France.

Pour donner un aperçu du rendu sur les différentes tailles d'écran, voici une galerie compilant l'affichage de l'image sur les trois tailles d'écrans. Vous remarquerez que j'ai configuré le format des images dans l'onglet style pour avoir des proportions de 1:2 sur ordinateur et tablette, et 4:3 sur mobile.

Exemple de rendu d'une d'image flottante avec texte sur le site au format ordinateur — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Exemple de rendu d'une d'image flottante avec texte sur le site au format tablette — Dans l'ordre d'apparition : rendu sur ordinateur, tablette puis mobile.

Bloc texte encadré avec image

Le bloc de texte encadré avec image permet d'associer une image à un contenu texte riche (titres, paragraphes, listes, citation, bouton), le tout présenté dans un encadré avec sa propre couleur de fond et sa bordure. Il est adapté pour mettre en avant un contenu structuré : une mise en avant éditoriale, un encart informatif ou une section qui doit se distinguer visuellement du reste de la page. La mise en forme (couleur de fond, bordure) se règle indépendamment du contenu, dans l'onglet Style.

garder le contenu principal concis : l'encadré est destiné à mettre en valeur une information, pas à accueillir un texte long qui alourdirait visuellement le bloc.
choisir une couleur de fond suffisamment contrastée avec le texte, pour que le contenu reste lisible.
réserver la note de bas de bloc à une information secondaire (source, précision, mention légale).

Exemple

1. Onglets images et style: L'onglet images permet de charger les images de la gallerie et de lui ajouter un texte de légende si nécessaire. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier le rendu de la galerie sur le site.
2. Sélection des l'images: Le bouton transférer permet de charger les images depuis votre ordinateur, elles seront alors disponibles à la sélection sur cette page. Le bouton sélectionner permet de choisir parmi les images déjà transférées sur cette page.
3. Texte alternatif: Le texte alternatif de chaque image peut être renseigné en cliquant sur les images en question. Ces textes sont alors affichés en prévisualisation dans cette vue de la gallerie. Cela facilite l'identification des images n'ayant pas encore de texte alternatif de renseigné.
4. Légende: Ce texte sera affiché en dessous de la gallerie d'image, il doit donc ajouter du contexte qui serait lié à l'ensemble des images de la gallerie.

Rendu de l'exemple sur le site (s'adapte selon la taille de votre écran actuel) :

Passerelle suspendue traversant la Loire

Passerelle Saint-Symphorien

La passerelle Saint-Symphorien (ou Pont de fil) est un pont suspendu piétonnier et cyclable traversant la Loire à Tours, construit de 1845 à 1847 par les frères Seguin, sensiblement à l'emplacement du vieux pont médiéval de Tours.

Bloc vidéo

Le bloc vidéo permet d'intégrer une vidéo à une page, soit en l'envoyant directement sur le site (auto-hébergement), soit en la liant depuis YouTube.

D'autres hébergeurs externes ainsi que l'optimisation automatique des vidéos auto-hébergées sont prévus dans une version future d'Essentiel CMS.

privilégier l'auto-hébergement pour une vidéo courte ou spécifique au site, et YouTube pour une vidéo déjà publiée ou destinée à être aussi visible sur cette plateforme.
pour une vidéo auto-hébergée, privilégier le format MP4 (H.264), largement compatible avec tous les navigateurs.

Information d'éco-conception

Le chargement de la vidéo YouTube est différé jusqu'à ce que l'utilisateur clique dessus, plutôt que d'être lancé automatiquement à l'ouverture de la page. Cela évite de charger inutilement les ressources tierces de YouTube pour les visiteurs qui ne regardent pas la vidéo, réduisant ainsi significativement le poids et l'empreinte environnementale de la page.

Exemple

Ajout d'une vidéo youtube dans l'espace d'administration, annoté

1. Emplacement: Choisir entre une source externe (actuellement seule la plateforme youtube est gérée) et l'auto-hébergement
2. URL de la vidéo: Copiez le lien de la vidéo youtube dans ce champ.

Ajout d'une vidéo auto hébergée dans l'espace d'administration, annoté

1. Emplacement: Si la vidéo doit être auto-hébergée, choisir l'option "Ce site web", ce qui déclenche l'affichage du formulaire de transfert d'une vidéo.
2. Sélection de la vidéo: Le bouton transférer permet de charger la vidéo depuis votre ordinateur. Le bouton sélectionner permet de choisir parmi les vidéos déjà transférées sur cette page.
3. Vignette: Si aucune image d'aperçu n'est renseignée, une vignette est automatiquement choisie par le navigateur pour donner un aperçu du contenu de la vidéo. Si vous souhaitez qu'une image précise soit affichée à la place, vous pouvez la charger ici.
4. Configuration du lecteur vidéo: Le reste des champs de ce formulaire permet de choisir le comportement par défaut à appliquer au lecteur vidéo du visiteur.

Rendu de l'exemple sur le site :

Source externe (youtube) :

Miniature de la vidéo — Histoire de ponts en Pays de la Loire

Auto hébergé sur le site :

Carouge à épaulettes

Bloc fichier à télécharger

Le bloc fichier à télécharger permet de mettre à disposition un document (PDF, image, archive, etc.) que l'internaute peut consulter ou enregistrer sur son appareil. Il est adapté pour partager une ressource complémentaire au contenu de la page : une brochure, un formulaire, un guide ou tout autre document destiné à être téléchargé plutôt qu'affiché directement.

vérifier le poids du fichier avant l'envoi : un document trop volumineux (scan haute résolution, PDF non compressé) peut décourager le téléchargement, notamment sur mobile.
nommer le fichier de façon lisible avant de l'envoyer : lors de l'enregistrement, le navigateur reprend le nom du fichier d'origine, pas le titre affiché sur le site.

Exemple

Ajout d'un fichier à télécharger dans l'espace d'administration, annoté

1. Sélection du fichier: Le bouton transférer permet de charger le fichier depuis votre ordinateur. Le bouton sélectionner permet de choisir parmi les fichiers déjà transférées sur cette page.
2. Titre: Privilégiez un titre explicite plutôt que le nom du fichier lui-même : le visiteur doit comprendre ce qu'il va télécharger avant de cliquer, sans avoir à deviner à partir d'un nom de fichier technique.
4. Description: Utilisez la description pour préciser le format ou le contenu du document si cela n'est pas évident (nombre de pages, année, version), en complément du poids déjà affiché automatiquement à côté du lien.

Rendu de l'exemple sur le site :

Carouge à épaulettes

Vidéo d'un Carouge à épaulettes (Agelaius phoeniceus) avec son chant. Son nom commun vient de deux taches rouges qui prennent la forme d'épaulettes quand l'oiseau prend une attitude d'intimidation.

Télécharger (12.17 MB)