HOWTO : Insérer une image dans un contenu

Bien démarrer avec Drupal... qui n'a pas eu du mal à mettre une image dans son article ?
Et qu'on se le dise une bonne fois pour toute : il n'est pas nécessaire d'installer un quelconque module optionnel pour afficher des images avec Drupal.

Cas 1 : afficher une image présente sur un autre site

Je vous le déconseille car si le site auquel vous vous référez, renomme ou supprime cette image, votre site va la chercher très longtemps (selon le navigateur que vous utilisez)... et votre site sera très lent !

Remarque importante :
Pour utiliser une image présente sur un autre site, vérifier que les droits sont disponibles. Autant vous pouvez généralement afficher sur votre site les logos de tel ou tel logiciel libre (par exemple celui de Drupal), autant une photo personnelle d'un autre site ce n'est pas sûr...
En général, il est conseillé de contacter par courriel le webmaster du site dont vous souhaitez ré-utiliser une image pour lui demander son accord et/ou de consulter les mentions légales du site qui indiquent peut-être les conditions d'utilisation (par exemple en citant l'auteur).

Cas 2 : afficher une image de votre site.

1. Via client-ftp, créer un dossier (répertoire) images dans le répertoire /files
2. Via client-ftp, mettre une image dans ce dossier (exemple toto.png, toto.jpg)
3. Dans drupal, créer (ou éditer) l'article qui devra contenir l'image toto.png
4. Le format d'entrée "full HTML" doit être coché, le code pour une image est du type : <img src="files/images/nom_du_fichier.ext" alt="texte_alternatif" /> Explications : on utilise la balise img avec les attributs src et alt !
   • la valeur entre guillemet de src est le chemin de votre image : sous drupal je vous conseille de mettre le chemin relatif à partir du répertoire de Drupal. Si vous voulez afficher une image présente sur votre serveur sans qu'elle soit dans le répertoire de Drupal il faut mettre le chemin complet (type http://www.mon_site.ext/dossier/nom_du_fichier.ext
   • la valeur entre guillemet pour alt est le texte alternatif qui s'affichera si votre visiteur n'affiche pas les images et qui sera lu par les navigateurs vocaux. Afin d'améliorer l'accessibilité et le référencement de votre site, n'oubliez pas de renseigner l'attribut alt [On note alt="" (attribut vide) UNIQUEMENT en cas d'image non significative]

Mise en forme de vos images en CSS

Quelque soit le template que vous utilisez, les contenus (pages, articles...) sont généralement codés avec une balise de classe qui est class="node" (un forum c'est un div#forum). Pour mettre en forme vos images, il suffit donc de modifier ou créer (selon le template utilisé) une ligne .node img. Par exemple .node img {border: 1px solid #000000;} encadrera les images présentes dans tous vos contenus Drupal d'une bordure de 1px, continue et de couleur noire.

Pour avoir différents rendus des images présentes dans vos contenus sur votre site, vous pouvez ajouter un attribut class au code de l'image.
Par exemple : vous voulez que les images des contenus "articles" aient un rendu différent du précédent. Pour cela, dans les articles, le code html devient <img class="img_articles" src="files/images/nom_du_fichier.ext" alt="texte_alternatif" /> et vous ajoutez une mention css .node img.img_articles {border: 1px solid #ff0000;} qui encadrera les images d'un article d'une bordure rouge.

Votre image ne s'affiche pas ?

1. Vérifier le format d'entrée de votre contenu : ce doit être "Full HTML"
2. Vérifier le chemin : il doit partir de la racine de votre drupal (dans notre exemple files/images/nom_du_fichier.extention_du_fichier.)
3. Vérifier les permissions par défaut :
   • dans la barre d'adresse du navigateur, mettre le chemin de l'image. (Exemple : via son client-ftp, mettre l'image toto.jpg dans le répertoire files > l'adresse à saisir dans la barre d'adresse sera http://monsite.ext/files/toto.jpg) et voir si l'image s'affiche.
   • si on obtient la page d'erreur "erreur 500" (Internal Server Error / The server encountered an internal error or misconfiguration and was unable to complete your request.)
     Via le client-ftp, supprimer le fichier .htaccess qui existe dans le répertoire /files (obligatoire avec certains hébergeurs... notamment pour les pages perso free.fr)

Bon à savoir...

• Le module additionnel "images" n'est pas nécessaire pour l'affichage d'image dans votre contenu, par contre si vous l'avez installé (même si vous l'avez désinstallé ensuite), il aura ajouté un fichier .htaccess dans le répertoire /files qui peut poser problème...
• Bien ranger son Drupal...
  A la première utilisation, Drupal crée un répertoire files : il est prévu pour accueillir, réunir tous vos documents type images, documents .pdf etc...
  Je vous conseille de créer des sous-répertoires dans le répertoire files pour organiser votre contenu. Vous gagnerez un temps précieux quand vous souhaiterez trier ou mettre à jour votre site.

(article initial http://herisson185.free.fr/?q=node/35)