Important :

Afin que les images publiées sur votre site respectent le référentiel d'accessibilité (consultable avec ce lien), nous vous invitons à consulter le site suivant afin de connaître les obligations auxquelles vous êtes contraints : "AcceDe Web"
Des exemples du rendu d'images par un lecteur d'écran sont présentés dans l'article "Images informatives"

Insérer une image dans un contenu

Depuis la touche Plus (qui se trouve dans la barre Gutenberg ou directement dans la mise en page du contenu), cherchez le bloc "Image" (vous pouvez vous aider du filtre de blocs en tapant "Image").

Trois options s'offriront à vous :

  • Le transfert d'images
  • Sélection d'une image depuis la bibliothèque
  • L'insertion depuis une URL (image externe à votre site Web)

À noter que le transfert d'images depuis un fichier local sera disponible par la suite, si besoin, dans votre bibliothèque de médias.

L'Académie de Grenoble a une banque d'images que vous pouvez utiliser pour l'illustration de vos contenus. Cette banque d'images n'est pas installée par défaut sur les sites, si vous voulez que cela soit fait sur votre site, veuillez nous contacter.

Astuce:

N'hésitez pas à utiliser la banque d'images académiques.

Une fois l'image insérée, vous disposerez de plusieurs options.

Barre de mise en forme de l'image

Vous pourrez depuis cette barre :

  • Gérer le style (par défaut, coins arrondis)
  • Transformer l'image (galerie, couverture, fichier, groupe, média et texte)
  • Placer l'image à gauche, droite, etc.
  • Insérer un lien
  • Croper l'image (c'est-à-dire sélectionner ce qui vous intéresse)
  • Choisir une autre image
  • La dupliquer
  • Etc.

Effet parallax

Vous pouvez créer un "effet parallax" (l'image, montrée partiellement, reste fixe au scroll)

Options de bloc

Les options disponibles depuis le bloc latéral droit :

  • Gérer les styles (y compris ceux que vous aurez créés)
  • Ajouter une description ALT (recommandé)
  • La taille de l'image
  • L'ajout des attributs "title" ou "class"

Insérer une image par glisser/déposer

Vous pouvez aussi faire glisser une image de votre poste de travail directement dans la zone des contenus de Gutenberg. Le fichier sera automatiquement ajouter à votre bibliothèque de médias et l'image sera affichée dans un bloc "Image".

Ajouter une image depuis la gestion de médias

Depuis le menu ("contenus" > "médias" > "ajouter un média"), accédez à la page "Ajouter un élément de média" et cliquez sur "Image"

Vous devrez alors remplir OBLIGATOIREMENT le titre et le fichier à importer. Vous noterez que vous avez plus d'options et que l'attribut ALT (alternative textuelle) est déjà disponible. Compléter cet attribut, il sera pris en compte si vous insérez cette image dans votre contenu à partir d'un bloc "Média".
Par contre, si cette image est insérée dans votre contenu dans un bloc "Image", vous devrez à nouveau compléter, si besoin, l'alternative textuelle en utilisant la zone de saisie "Alt text (alternative text)" dans les paramètres du bloc "Image" disponibles dans la partie droite de l'éditeur Gutenberg.

L'alternative textuelle (texte de remplacement) est un élément obligatoire si votre image sert de lien ou si elle comporte des informations. Vous trouverez plus d'informations sur le blog "Atalan" et sur "AcceDE Web".

Ajouter des images massivement

Insérer des images une à une peut s'avérer fastidieux. Aussi vous pouvez le faire en une fois et accédez à vos images depuis vos contenus avec la bibliothèque.

Depuis le menu ("contenus" > "médias" > "ajouter un média"), accédez à la page "Ajouter un élément des médias en masse" et cliquez sur "Téléverser des images".

Dès lors, vous aurez la possibilité de sélectionner un dossier local ou de glisser-déposer vos images.