- Ajoutez le bloc Image
- Si l’image se trouve dans la bibliothèque de médias, passez au point 3, sinon …
- Cliquez sur le bouton Téléverser
- Localisez le fichier désiré et cliquez sur ouvrir
- 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. - 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
- Cliquez sur l’image pour la sélectionner
- Assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
- 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
- Cliquez sur l’image pour la sélectionner
- Assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
- 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
- Cliquez sur l’image pour la sélectionner
- Dans la barre d’outils cliquez sur le bouton une grille s’affiche sur l’image
- Cliquez ensuite sur le bouton et dans le menu déroulant, choisissez un des ratios de recadrage proposé
- Cliquez ensuite sur Appliquer pour confirmer ou sur Cancel pour annuler.
Alignement d’une image
- Cliquez sur l’image pour la sélectionner
- Cliquez ensuite sur le bouton dans la barre d’outils
- 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
- Cliquez sur l’image pour la sélectionner
- Cliquez ensuite sur le bouton dans la barre d’outils
- 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
- Lien vers un site externe : Saisissez ou collez l’adresse (URL) du site. Pressez Enter
- Fichier média : Pour afficher l’image seule dans une fenêtre.
- 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