Rédacteurs - Typo3 v6.2

Transcription

1 Rédacteurs - Typo3 v6.2 Insérer des images Objet et contexte Ce document présente l insertion d images dans les contenus de l environnement typo3 6.2 Les outils images Il y a deux types d outils qui permettent d insérer les images : 1. Texte & Images 2. Images seules Page 1 / 10

2 C est donc l un de ces deux contenu qu il faut choisir d insérer, si on veut afficher des images. Texte & Images L outil qui s ouvre contient trois onglets essentiels : 1. Général 2. Images 3. Apparences Onglet général C est là qu on va écrire son texte dans le traitement de texte habituel. Le type de document a été souligné en rouge dans l image d illustration. Ce type qui est en fait une liste déroulante, peut être changé à tout moment. Si vous aviez créé un contenu Texte, vous pouvez décider de passer à un contenu Texte & Images en sélectionnant le thème à ce niveau. Le contenu texte est conservé. Si vous souhaitez finalement passer à Images seules, vous pouvez le faire également via ce menu déroulant. Le texte disparaît Page 2 / 10

3 alors de l'outil d édition. Mais il revient dès lors que vous changez le type à Texte ou Texte & Images. Onglet Images Pour ajouter une image, il faut sélectionner l onglet Images et cliquer sur le bouton Ajouter une image. La fenêtre de gestion des fichiers s ouvre et il ne reste plus qu à parcourir les répertoire et choisir les fichiers voulus. Pour obtenir la liste des fichiers d un répertoire, il faut cliquer sur le nom du répertoire. Voici la liste des fichiers du répertoire Annie : Page 3 / 10

4 Il y a deux manières différentes de sélectionner les fichiers : 1. En cochant dans les cases (1) puis en cliquant sur Importer la sélection (2) 2. En cliquant directement sur les signe + (3) Dès lors qu on clique sur Importer la sélection ou sur un + on revient à l onglet image de départ. Pour choisir plus facilement ses fichiers, on peut cocher la case Afficher les miniatures : Page 4 / 10

5 Pour chaque image, on peut obtenir diverses informations en appuyant sur le i dans un rond bleu, notamment, l endroit exact où est rangé le fichier (Folder). Il est également possible d obtenir l adresse du fichier en faisant un clic droit sur le bouton Télécharger et en choisissant l option Copier l adresse du lien. Une fois de retour dans l onglet Image, on peut : choisir un titre (cocher surcharger pour pouvoir le faire) c est l info bulle qui s affiche au dessus de l image lorsqu on la survole écrire une description c est ce qui s affiche sous l image dans votre page (là encore, cliquer sur Surcharger ) Page 5 / 10

6 assigner un lien (un clic sur l image enverra le visiteur vers la page référencée par le lien ajouter un texte alternatif. Attention : vous devez ajouter un texte alternatif dans seulement deux cas : 1. l image est informative et non décorative (ex : le portrait d un personnage, la photographie d un bâtiment spécifique, d une fleur spécifique, etc ), 2. vous avez assigné un lien à l image et vous devez indiquer vers quel site le lien va envoyer le visiteur (exemple de ALT pour un lien : visiter le site de notre laboratoire) Positionnement des images Voici le positionnement par défaut des images que nous avons insérées via notre exemple : Ceci correspond en backend à ce paramétrage : habillé, droite deux colonnes Page 6 / 10

7 Si dans le nombre de colonne le chiffre 1 avait été choisi, les deux images seraient l une au dessus de l autre. Il y a 10 types de position et alignement d images (de gauche à droite et haut en bas) : 1. dessus, centre; 2. dessus, droite; 3. dessus, gauche; 4. dessous, centre; 5. dessous, droite; 6. dessous, gauche; 7. habillé, droite; 8. habillé, gauche; 9. à coté du texte, droite; 10. à coté du texte gauche. Page 7 / 10

8 Attention, le site est responsif (s adapte à la taille de l outil de consultation utilisé), et la conséquence en est que l image prend toute la place qui lui est laissée. Si vous choisissez par exemple, de mettre une image en dessus centre et que sa taille dépasse en largeur la taille de l espace qui lui est laissé, elle s affichera sur toute cette longueur. Il est possible de contraindre une taille de l image en choisissant soit une largeur, soit une longueur via l option Ajustement aux images : Voici le résultats : Page 8 / 10

9 Positionnement de la description Par défaut le texte mis dans description (Onglet Image) se potionne en dessous à gauche, il est possible, via l onglet Apparence, de choisir de le centrer. Gérer les images L onglet Image donne accès à 4 outils : 1. la poubelle (retirer l image du contenu, mais pas du serveur) 2. l ampoule (jaune, votre image est visible; grise, votre image est cachée) 3. déplacement lorsqu on se positionne sur cet outil, en cliquant, on peut modifier l ordre des images en les replaçant les unes par rapport aux autres. Page 9 / 10

10 4. Le quatrième permet d agrandir l image lorsqu on clique dessus. Cette option ne peut pas être choisie si on assigne un lien à l image. Il faut choisir l un des deux Faire un diaporama Pour faire un diaporama il faut : créer un contenu Images seules, aller dans l onglet Images ajouter ses images aller dans l onglet apparence choisir le cadre carousel et régler à une seule colonne. Document réalisé le 19 novembre 2015 version 1 Page 10 / 10