6.6. Inline : Ajoutez des images à votre contenu

Le module Inline permet d’ajouter des images à vos articles. Inline crée un nouveau filtre pour vos formats d’entrées et utilise ensuite le module Upload (dont l’utilisation sera détaillée dans le prochaine chapitre) pour télécharger les images vers Drupal. Il suffira ensuite d’utiliser la balise [Inline] pour placer les images à l’endroit désiré.

Installation

  • Téléchargez et décompressez le module Inline (version utilisée pour ce livre : 6.x-1.0).
  • Inline est dépendant du module Upload, vous devez donc activer ces deux modules.

Configuration

Il faut maintenant ajouter le filtre Inline file filter dans un format d’entrée. Ici, vous allez l’ajouter dans Filtered HTML :

  • Administrer - Configuration du site - Formats d’entrée.
  • Cliquez sur le lien configurer du format Filtered HTML.
  • Cochez la case Inline file filter de la section Filtres.
  • Cliquez sur le bouton Enregistrer la configuration.

Vous pouvez maintenant régler quelques paramètres sur la page d’administration du module :

  • Administrer - Configuration du site - Inline.

inline150-1_opt.jpegPage de configuration de Inline

Vous pouvez choisir ici d’afficher l’image seulement (Display image only) ou avec un lien vers le fichier image (Display image with a link to the image file).

Inline n’affichera pas les images ayant une résolution supérieure au paramètre Maximum width and height for inline images.

information_opt.jpeg

Le paramètre Maximum width and height for inline images ne redimensionne pas les images ! Pour cela, il faut utiliser le module 21.5. ImageCache.

Pour cet exemple, régler les paramètres comme cela :

  • Sélectionnez Display image with a link to the image file.
  • Maximum width and height for inline images : 1024,1024.
  • Cliquez sur Enregistrer la configuration.

Utilisation

Vous allez maintenant éditer la page de la recette de la soupe japonaise et lui adjoindre des photos :

  • Afficher la recette de la soupe japonaise.
  • Cliquez sur Modifier.
  • Vérifiez bien que le Format d’entrée Filtered HTML est bien sélectionné.

inline150-2_opt.jpegSelection du filtre Filtered HTML acceptant les tag inline

Il faut maintenant télécharger les fichiers à la section Fichiers attachés ajoutée grâce au module Upload :

  • Cliquez sur le bouton Parcourir... de la section Fichiers attachés.
  • Choisissez la photo à insérer (disponible sur http://www.atelierdrupal.net)
  • Cliquez sur le bouton Attacher.

inline150-3_opt.jpegL’image s’ajoute à la liste de la section Fichiers attachés.

Pour finir, il faut insérer le tag inline dans le corps de l’article :

  • Positionnez votre curseur au début de la recette.
  • Insérez le code : [ inline:1 ] (pour afficher première image de la liste des fichiers attachés).

inline150-4_opt.jpeg Insertion du tag Inline dans le corps de l’article

  • Cliquez sur Enregistrer.

inline150-5_opt.jpegUne photo dans votre article !

information_opt.jpeg

Si vous éditez à nouveau l’article, le tag inline sera transformé en [ inline:soupe_japonaise_5.JPG], le numéro de l’image a été remplacé par le nom du fichier. Vous pouvez utiliser directement ce type de notation avec inline.

information_opt.jpeg

Vous pouvez également ajouter l’attribut HTML Alt à votre image en utilisant la notation [ inline:1=soupe].

module_opt.jpeg

21.5. ImageCache : Manipulez vos images avant de les afficher