Insertion d'une image

Cette page explique en détail le processus d'insertion d'une image depuis le module "Fichiers"

 

Comment insérer une image

  • Étape 1: insérer une image sur le serveur
    Cette étape est décrite dans la section "télécharger des fichiers". Les formats d'image utilisables sur Internet ont l'extension .gif, .jpg ou .png.
  • Étape 2: cliquer sur l'icône permettant la manipulation
    Cette icône représentant une montagne porte l'intitulé "insérer/modifier une image". Elle permet dans un premier temps l'insertion des images, puis dans une deuxième temps, la manipulation des propriétés de image sélectionnée.
  • Étape 3: sélectionner l'image à insérer
    La fenêtre nouvellement ouverte affiche l'arborescence des répertoires du module "fichiers". Après avoir navigué dans l'arborescence, sélectionner l'image à insérer en cliquant sur son nom.

Comment modifier une image

Propriétés imageL'éditeur wysiwyg de Typo3 permet de redimensionner aisément les images affichées. Pour ce faire, il suffit de sélectionner l'image à modifier avec un clique de souris. Autour de l'image sélectionnée apparaissent des poignées permettant de redimensionner verticalement, horizontalement ou les deux à la fois.

À noter, le comportement de Firefox est plus civilisé que celui d'Internet Explorer. En effet, celui-ci conserve les proportions de l'image lorsqu'on sélectionne l'es poignées situées aux coins de l'image.

Après avoir sélectionné une image et cliqué sur l'icône de manipulation des images, l est aussi possible d'accéder à tout un ensemble de propriété:

  • "Width" et "Height"
    Respectivement modifie la largeur et la hauteur de l'image sélectionnée.
  • "Border"
    Affiche un contour autour de l'image.
  • "Float"
    Positionne l'image à droite ou à gauche du texte et permet à celui-ci d'être disposé autour de l'image.
  • "Margin left/right"
    Insère une marge à gauche et à droite de l'image (considérer une valeur de 10 par exemple).
  • "Margin bottom/top"
    Insère une marge au-dessous et au-dessus de l'image.
  • "Title"
    Texte apparaissant au niveau du curseur de la sourie lorsque celui-ci est au-dessus de l'image, utile aux personnes mal ou non voyantes ainsi qu'au référencement.
  • "Alternative Text"
    Texte apparaissant à la place de l'image lorsque l'utilisation des images est désactivée ou lorsqu'une image est en cours de chargement, utile aux personnes mal ou non voyantes ainsi qu'au référencement.

Truc et astuces

Lorsqu'on parcourt l'arborescence des fichiers à la recherche d'une image, il est possible d'afficher et de masquer les vignettes. L'affichage des vignettes permet de visuellement localiser une image à insérer tandis que son masquage permet un rafraîchissement des pages plus rapide, pour une utilisation plus intensive de l'outil. Cette fonctionnalité est atteignable en cochant l'option située en dessous de l'arborescence des fichiers à l'intérieur de la fenêtre de localisation des images.