1. Ajoutez le bloc Image
2. Si l’image se trouve dans la bibliothèque de médias, passez au point 3, sinon …
   1. Cliquez sur le bouton Téléverser
   2. Localisez le fichier désiré et cliquez sur ouvrir
3. Cliquez sur Bibliothèque de médias pour choisir une image.
   Note : La plupart des réglages disponibles à cette étape le sont également directement dans la page. Nous les expliquons ci-dessous.
4. Après avoir inséré votre image, dans la colonne de droite, assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.

Paramètres d’une image

WordPress dispose de multiples outils et réglages pour l’affichage d’une image. Ces réglages sont parfois redondants et disponibles de différentes manières.

Ainsi certains sont disponibles via l’onglet Bloc de la colonne de droite, d’autres via la barre d’outils qui s’affiche en sélectionnant le bloc.

Taille d’une image

La taille d’une image peut être adaptée de 3 manières indépendantes. Nous les décrivons ci-dessous.

1 – Image size

Il est important d’avoir en tête que la charte graphique de l’EPFL impose certaines restrictions concernant la taille des images. De fait, certains réglages disponibles dans ce bloc n’ont pas d’effets visuels

1. Cliquez sur l’image pour la sélectionner
2. Assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
3. Dans la section Image size, cliquez sur le menu déroulant et choisissez parmi les 4 options
   
   La taille de l’image s’affiche alors dans la section Image dimensions

Note : La largeur de la colonne est de 570 pixels. De fait même si les dimensions indiquées sont plus grandes, l’affichage de l’image sera proportionnellement réduit à 570 pixels.

2 – Image dimensions

1. Cliquez sur l’image pour la sélectionner
2. Assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
3. Dans la section Image dimensions, modifiez la largeur et la hauteur (les 2 valeurs ne sont pas liées, modifier l’une n’adapte pas l’autre)
   
   
   ou
   
   Cliquez sur un pourcentage 
   
    
   Note : C’est la taille de l’image indiquée via Image size qui est réduite. Dans ce cas également si les dimensions indiquées sont plus grandes, l’affichage de l’image sera proportionnellement réduit à 570 pixels.

3 – Recadrage de l’image

Il est possible de recadrer l’image, c’est à dire de changer le ratio Largeur / Hauteur

1. Cliquez sur l’image pour la sélectionner
2. Dans la barre d’outils cliquez sur le bouton  une grille s’affiche sur l’image
3. Cliquez ensuite sur le bouton  et dans le menu déroulant, choisissez un des ratios de recadrage proposé 
4. Cliquez ensuite sur Appliquer pour confirmer ou sur Cancel pour annuler.

Alignement d’une image

1. Cliquez sur l’image pour la sélectionner
2. Cliquez ensuite sur le bouton  dans la barre d’outils
3. Choisissez l’alignement dans le menu déroulant.

Coin arrondis

Pour afficher une image aux coins arrondis, procédez de la manière suivante

• Cliquez sur l’image dans l’onglet Bloc, section Styles, cliquez sur Rounded
  ou
• Cliquez sur l’image puis dans la barre d’outils  

Note : Si vous souhaitez que les images ajoutées dans la page s’affichent automatiquement avec des coins arrondis, choisissez Rounded dans le menu déroulant Default style

Lien sur une image

1. Cliquez sur l’image pour la sélectionner
2. Cliquez ensuite sur le bouton  dans la barre d’outils
   1. Lien vers une page de votre site : Le plus simple est de saisir les premières lettres du titre de la page.  Mais dans les faits vous pouvez saisir n’importe quel texte se trouvant dans la page. Pressez Enter
   2. Lien vers un site externe : Saisissez ou collez l’adresse (URL) du site. Pressez Enter
   3. Fichier média : Pour afficher l’image seule dans une fenêtre.
   4. Page du fichier joint : Pour afficher une page contenant l’image et d’autres informations.

Autres réglages

 

Légende
Ajoutez une légende en cliquant sur le texte Rédigez la légende (sous l’image)… Si vous ne faites rien, aucun texte n’apparaît au-dessous de l’image lorsqu’elle est en ligne.

Alt text (alternative text)
Description utilisée pour l’accessibilité des personnes mal-voyantes et par les moteurs de recherche
Assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus. Dans la section Image settings, remplissez le champ Alt text (alternative text)

Remplacer l’image

Il n’y a pas besoin de supprimer le bloc pour remplacer une image par une autre. Procédez de la manière suivante :

• Cliquez sur l’image puis sur
• Cliquez ensuite sur Open Media Library ou sur Téléverser
• Cliquez sur le bouton Sélectionner

Supprimer l’image

Il suffit de supprimer le bloc