Insérer des images

Insérer et aligner des images

Afficher des images et les aligner entre elles ou avec du texte.

Avant d'insérer une image veuillez-consulter les préconisations sur les formats des images.

Insérer une image dans le texte

Cas 1 : avec l'icône
icone-inserer-image.jpg

Positionnez le curseur dans le texte puis cliquez sur l'icône 

icone-image.jpg

Le navigateur de contenu affiche l’arborescence Media par défaut . A ce stade vous pouvez :

  1. Naviguer dans l’arborescence et sélectionner l’image à intégrer
  2. Rechercher l’image à partir de son nom et/ou en appliquant des filtres (orientation, format, créateur..)
  3. Téléverser l’image depuis son poste de travail et la classer dans le répertoire dans lequel vous êtes positionné : ici vous pouvez effectuer un glisser/déposer de l’image
selection-image

Après avoir sélectionné l’image un menu sur fond noir s’affiche au bas de l’écran pour : 

menu pour insérer une image : insérer, dupliquer, éditer, télécharger, supprimer
  • Insérer l'image dans le texte 
  • Dupliquer le fichier image dans l'espace media du site
  • Editer l'image et la modifier 
  • Télécharger l'image sur le poste de travail
  • Supprimer l'image

 

Cas 2 : avec l'icône
icone-telecharger-image.jpg

Positionnez le curseur dans le texte puis cliquez sur l'icône 

icone-telecharger-image.jpg

Une fenêtre vous permet de sélectionner une image sur votre poste de travail. Celle-ci est directement insérée dans le texte.
L'image est également enregistrée dans l'onglet Media  >> Dossier Images : ici pas de sélection du dossier d'enregistrement et pas d'accès au menu d'édition de l'image.

Taille d'insertion de l'image

Un menu spécifique s'affiche au survol de l'image insérée dans un texte. Il vous permet de :

Sélectionner la taille d'affichage de l'image (par défaut la taille d'insertion est medium)

menu listant les tailles d'insertion d'une image

Original : taille à son format original sans dépasser la largeur limite de la page

Tiny : largeur maxi =  30 px -  hauteur maxi = 30 px

Small : largeur maxi =  100 px -  hauteur maxi = 100 px

Medium : largeur maxi =  200 px -  hauteur maxi = 200 px

Large : largeur maxi =  300 px -  hauteur maxi = 300 px

Référence : largeur maxi =  600 px -  hauteur maxi = 600 px

Gallery : largeur maxi =  1200 px -  hauteur maxi = 1200 px

Agir sur l'alignement de l'image 
Icônes d'alignement des images

pas d'icône sélectionnée : l'image est alignée à gauche et le paragraphe qui suit est positionné au dessous

aligne-gauche.png

l'image est alignée à gauche et les contenus des paragraphes suivants (texte, image, widget) viennent se positionner à la droite de l'image

alignement-centre.png

l'image est centrée et les contenus des paragraphes précédent et suivant sont positionnés au-dessus et au-dessous de l'image

alignement-droite.png

l'image est positionnée à droite et les contenus des paragraphes suivants (texte, image, widget) viennent se positionner à la gauche de celle-ci

 

Supprimer l'image 
icone corbeille

Modifier une image 

2 accès à l'éditeur d'image :
- en mode modification pour un fichier image sélectionné dans l'onglet media du site
- en mode edition lors de l'ajout d'une image dans un texte

Pour accéder à l'éditeur, cliquez sur "Modifier image".

Mode modification du fichier image

 

L'éditeur vous permet de recadrer l'image, de changer son orientation et de définir un point focal (pas encore implémenté dans cette version).

Recadrer l'image

1. Sélection d’un format

Choisissez l’un des formats proposés :

menu-recadrer-image.png

 

 

Carré = ratio 1:1

Rectangle vertical = ratio 3:4

Rectangle horizontal = ratio 4:3

Écran large = ratio 16:9

Pour définir vos propres dimensions, sélectionnez Personnalisé (Custom).

 

 

2. Ajustement de la zone de recadrage

Une grille de recadrage s’affiche sur l’image. Vous pouvez :

grille pour ajuster la taille d'une image

Redimensionner la grille manuellement pour délimiter la zone à conserver.

Saisir les dimensions exactes (largeur et hauteur) dans le champ Taille du recadrage.

Astuce : utilisez les poignées de la grille pour un ajustement rapide, ou entrez des valeurs précises pour un contrôle optimal.

Après sélection de la zone de recadrage, vous devez, soit :

  • Valider la sélection → cliquez sur la coche verte.
  • Annuler la sélection → cliquez sur la croix rouge.
  • Déplacer la sélection en maintenant le clic sur la grille.

 

3. Validation et mise à jour

Après validation, l’aperçu de l’image est automatiquement actualisé. Les options suivantes sont alors disponibles :

valider-image

 

1. Enregistrer : l’image d’origine est remplacée par la version recadrée.
2. Annuler : retour à l’image d’origine et à la barre de menu.
3. Revenir sur la dernière action à l’aide des flèches.
4. Réinitialiser l’image pour revenir à l’affichage initial.

 

Retourner l'image

La fonction Retourner permet de refléter l'image selon un axe horizontal ou vertical. Cliquez sur le bouton Horizontal ou Vertical pour retourner l'image.

Toute écriture incrustée dans l'image devient illisible.

icônes pour retourner une image
reflet-horiz
reflet-vertical

 

Point Focal

Cette fonctionnalité n'est pas actuellement en service.