Image Bloc

  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.

Palette d'options d'image

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
Tailles prédéfinies

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
Redimensionner l'image par largeur et hauteur

ou cliquez sur un pourcentage 

Redimensionner l'image par rapport

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 Redimensionner une image une grille s’affiche sur l’image
  3. Cliquez ensuite sur le bouton Modifier le ratio d'une image 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 Options d'alignement dans la page 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  Options d'image

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 Ajouter un lien Ă  l'image 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 Remplacer un image
  • 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.

Exemple

Sun over Mont Tendre