Association Cécile Dudon

Ce tutoriel présente comment intégrer des images dans un document du site.

Le principe est de joindre (comme on le fait pour un e-mail) les images qui doivent être affichées dans le document ; à cette fin, la section "Attach files" doit être utilisée :

Les images qui seront téléchargées doivent avoir été préalablement préparées afin de les redimensionner et d'incruster un texte de copyright. Si vous téléchargez vos photos sans aucun traitement, les internautes accéderont à votre fichier en haute définition (le risque de piratage de vos images est important !). Ce choix, de conserver la définition du fichier téléchargé, est volontaire : ainsi, il est possible de mettre en ligne une image en grand format, lorsqu'on le souhaite (cas par exemple de l'Hommage à Quamille dont les textes seraient illisibles dans un format réduit).

Pour préparer vos images, suivez le tutoriel de Préparation des images : les images préparées sont normalement situées dans un dossier "big" et leur nom de fichier a pris le suffixe "big".

Joignez la première image à votre document en cliquant sur [Parcourir...] et en allant la chercher dans votre dossier "big".

Elle est alors téléchargée, puis apparaît dans la liste des fichiers joints :

Cliquez sur le bouton [Aperçu] en bas de page pour visualiser ce que donnera votre document une fois enregistré ; l'aperçu apparaît alors en haut de page d'édition sur un fond jaune :

On peut y voir en particulier dans l'encadré le fichier qui vient d'être uploadé (téléversé pour les fracophiles !).

Nous allons ajouter une deuxième image, et cliquer à nouveau sur l'aperçu ; nous obtenons :

On peut constater que dans l'encadré sont affichés tous les fichiers téléchargés sous la forme d'une liste. C'est justement le sens des cases à cocher qui sont dans la section de téléchargement : elles indiquent si ces fichiers apparaissent dans la liste.

L'objectif de ce tutoriel est de faire apparaître les images dans le corps du texte (uniquement) ; pour cela, dans la zone de saisie "Corps :", tapez "avant [inline:1] après".

Enregistrez le document en cliquant sur le bouton dédié.

La première image a été insérée dans le corps du texte, entre les mots "avant" et "après" ! la balise "[inline:1]" indique en effet d'insérer l'image n°1.

Nous rééditons le document pour ajouter la seconde image à la fin (cliquer sur [Modifier] en haut).

Vous constatez que votre texte est passé de "avant [inline:1] après" à "avant [inline:_MG_8964-big.jpg] après". En fait le nom du fichier a automatiquement remplacé le "1" qui faisait référence au premier fichier téléchargé. C'est tout à fait normal, car Drupal a besoin du nom de fichier pour l'insérer, l'indication du numéro d'ordre est juste une facilité offerte lors de la création du document ; si les numéros d'ordre n'étaient pas substitués par une référence absolue, toutes les images seraient chamboulées si l'ordre des fichiers dans la liste était modifié (cela se faisant très facilement par drag'n drop sur les icônes ). Notez que si vous le souhaitez, vous pouvez taper directement le nom de fichier [inline:monFichier.jpg] au lieu de mettre un numéro d'ordre (cela s'avère en effet plus pratique quand on commence à avoir pas mal de fichiers).

Après le mot "après", tapez la commande permettant d'insérer le second fichier : "[inline:2]" ; cliquez sur [Aperçu].

Revenons sur la liste des fichiers téléchargés. Nous allons décocher toutes les cases car les images apparaissant dans le corps du texte, il est inutile de les afficher dans la liste (par contre, dans le cas où nous souhaitons joindre un fichier au document, par exemple un PDF ou un tableau Excel, nous laisserons coché cette case qui sera le seul moyen d'y accéder !).

Par ailleurs nous allons légender convenablement nos images ; la légende a deux fonctions : d'une part elle apparaît en infobulle sur l'image (ou en remplacement si elle ne peut être chargée), d'autre part elle est utilisée par les moteurs de recherche (qui référencent les images selon leur légende).
Par défaut la légende reprend le nom de fichier ; il suffit de cliquer sur [Rename] pour modifier la légende.

La section téléchargement a maintenant cet aspect :

On peut constater l'affichage de la légende sur rollover (passer la souris sur l'image et attendre deux secondes).

Constatez la suppression de la liste en fin de document, puisque "Liste" a été décoché pour les deux images.