Placez vos photos avec le module Insert !

L'ajout de photos dans un document n'était pas chose facile en Drupal 6.

La situation s'est bien améliorée en Drupal 7 !

  • Dès l'installation de Drupal 7, sans devoir ajouter de modules, vous pouvez déjà créer des articles comprenant une photo. Cette photo sera nécessairement au dessus de votre texte.
  • La photo sera réduite automatiquement pour faire maximum 480x480, encore une fois sans qu'il soit nécessaire d'installer de modules supplémentaire.
  • Une vignette est générée. Elle apparaîtra dans le résumé de votre article sur votre page d'accueil.

C'est un net progrès par rapport à Drupal 6. En effet, les modules Images et ImageCache (pour réduire l'image) sont inclus dans le core de Drupal 7.

Il reste malgré tout des limitations :

  • une seule image par article
  • image nécessairement en tête de l'article. Impossible de l'inclure dans le texte
  • pas d'image dans le contenu "Page"

Voyons comment ajouter la possibilité de mettre plusieurs photos par articles ou pages, et surtout, comment pouvoir les insérer dans le corps de votre article.

La base pour écrire un article ou une page, en insérant des photos, est d'avoir un éditeur Wysiwyg.

Le module Wysiwyg, complété par l'éditeur Wysiwyg de votre choix, vous permettra de facilement mettre du texte en gras, en italique, et même d'ajouter des photos.

Un des éditeurs Wysiwyg les plus connu est CKEditor. 

Pour ma part, je conseille WYMEditor, plus simple, qui génère un code très propre conformes aux standards de validation, et qui permet d'afficher en même temps le code HTML de votre article, et l'affichage Wysiwyg. Les explications devraient fonctionner avec la majorité des éditeurs compatibles avec le Wysiwyg.

Je suppose ici qu'un éditeur Wysiwyg est déjà installé sur votre site Drupal 7.

L'utilisation d'un éditeur Wysiwyg ne résout pas réellement notre problème d'ajout de photos !

De base, les éditeurs Wysiwyg ne font que d'insérer le code d'accès (URL) à une image, mais ne transfèrent pas cette image vers votre serveur !

Il vous faut alors transférer manuellement votre photo sur le serveur en FTP ou scp, trouver l'adresse exacte de cette photo et copier/coller cette URL dans l'éditeur Wysiwyg. Ça dépanne, mais ce n'est ni rapide, ni convivial...

Résolvons ce problème en 2 étapes :

1 - Ajouter plusieurs photos dans un article grâce à CCK

Quand on parle d'ajouter un élément à un type de contenu, càd créer son propre type de contenu, on parle "Content Construction Kit" (CCK).

Déjà important et très souvent utilisé en Drupal 6, CCK fait maintenant partie du code de Drupal 7. Donc, plus besoin d'ajouter de module pour créer son propre type de contenu.

Je vais créer un type de contenu "Article" pouvant avoir plusieurs images.

  1. Je vais dans "Structure" et dans "Types de contenu".
  2. Je clique sur "Ajouter un type de contenu"

  3. Je donne un nom à mon nouveau type de contenu, par exemple "Articles avec insertion photos".
  4. Je clique en bas de page sur "Enregistrer et ajouter les champs"

  5. Par défaut, j'ai les champs "Title" et "Body", càd le titre et le texte de l'article avec un résumé
  6. J'ajoute un champ supplémentaire "image".
  7. Un champ "image" existe déjà d'origine en Drupal 7. Je l'ajoute dans mon type de contenu : je donne le nom "Image" (par exemple) à mon nouveau champ et je sélectionne le champ "field_image"

  8. J'enregistre la définition de mon nouveau champ

J'arrive dans les paramètres de mon champ "Image"

  1. je ne sélectionne pas "Champ requis" : mettre une image n'est pas obligatoire
  2. je peux ajouter un texte d'aide. Par exemple "Fichier image ou photo à insérer dans l'article"
  3. les extensions autorisées pourraient être modifiées, mais cela me semble ok
  4. éventuellement indiquer une résolution minimale ou maximale de la photo, ainsi qu'une taille de fichier maximale
  5. Personnellement j'active les champs "Alt" et "Titre"
    1. "Alt" est utilisé par les moteurs de recherche, mais aussi par les mal ou non-voyants, pour indiquer ce que représente la photo
    2. "Titre" (ou "title" en html) génère une info-bulle quand la souris passe sur la photo : utile est attractif pour vos visiteurs
  6. Très important : le nombre maximum de valeurs autorisées ! Je ne désire pas limiter le nombre de photos par article. Je choisi "illimité"

Je sauve, et je peux maintenant créer mes articles avec plusieurs photos.

Je clique sur "Ajouter du contenu" et "Articles avec insertion photos"

Comme pour un article normal (le type de contenu présent d'origine en Drupal 7), je peux ajouter une image. Mais après chaque ajout d'une image, une zone supplémentaire "Ajouter un nouveau fichier" apparaît.

Je peux donc ajouter autant de photos que je veux...

mais quand je sauve mon article, mes photos apparaissent en taille maximale, toutes au dessus de mon texte !

2 - Insérer les photos dans le texte

Le module qui va me permettre cela s'appelle simplement "insert" :

  1. Je vais sur la page du projet "insert". 
  2. Je copie l'adresse du fichier d'installation (click souris droit).
  3. Dans "Modules", "Installer un nouveau module", je colle l'adresse du module dans "Installer depuis une URL"
  4. je clique sur "Installer"
  5. je retourne dans la page des modules, et j'active mon nouveau module "insert"

Je vais modifier dans mon type de contenu "Articles avec insertion photos", le champ "Image" :

  1. Structure / Type de contenu
  2. "Gérer les champs" pour mes "Articles avec insertion photos"
  3. "Modifier" sur la ligne du champ "Image"

Dans les paramètres du champ "Image", une zone "Insert" est apparue.

  1. Dans cette zone, j'active le bouton "insert" et je sauve la configuration.

Je vérifie le fonctionnement en créant un nouvel "Article avec insertion de photos".

Je veux insérer ma photo entre 2 lignes de texte :

  1. je dois utiliser le format de texte "Full HTML", sinon les codes HTML générés seront effacés !
  2. je tape mon texte en laissant une ligne blanche pour y mettre ma photo
  3. je choisis sur mon Pc la photo que je veux insérer
  4. je la transfère sur mon site
  5. je clique alors DANS mon éditeur à l'endroit où je veux insérer ma photo. Le but est d'avoir le CURSEUR à l'endroit de la photo
  6. je clique ensuite à côté de la miniature de la photo sur le bouton "Insert"

J'enregistre mon article.

Ma photo est bien à l'endroit voulu ...mais elle est en DOUBLE : une fois insérée dans l'article, et une fois en dessous du corps de mon article.

Le problème vient du fait que j'ai ajouté le code pour afficher la photo dans mon texte, mais Drupal fait toujours son travail normal qui consiste à afficher la photo en dehors du texte.

Je dois indiquer que je ne veux pas cet affichage automatique de mon image :

  1. je retourne dans Structure / Type de Contenu
  2. sur la ligne de mon contenu "Articles avec insertion photos", je clique sur "Gérer l'affichage"
  3. pour le champ "Image", je cache l'étiquette (Hidden) et je mets également le format d'affichage sur "Hidden"

De cette façon, bien que présent, l'image ne sera pas affichée automatiquement en dessous de mon texte par Drupal.

Voilà, cela fonctionne. J'ai une seule fois la photo.

Je remarque qu'elle est aussi (et en grand format) sur la page d'accueil : c'est uniquement du au fait que je n'ai pas modifié le résumé. Drupal a donc pris le début de mon article, qui contient la photo.

Reste un défaut : si l'image d'origine est gigantesque (par exemple une photo 10 Mpx venant de mon appareil photo), elle prendra une place énorme sur ma page web ...

-3- Comment réduire cette photo lors de l'insertion ?

2 méthodes.

D'abord simplement dans la configuration d' Insert :

Dans la configuration du champ "Image" de mon type de données, dans la zone "Insert", je peux activer différentes tailles d'image : large, medium, thumbnail...

Je vous conseille d'activer au moins les 3 tailles courantes : large,medium, thumbnail.

Lorsque j'insère une photo dans mon article, j'ai maintenant un menu déroulant me proposant le style d'insertion (càd la taille).

>

La taille correspond à ce que j'ai demandé, dans cette copie d'écran en format "thumbnail".

Remarquez que l'image est bien retaillée. Ce n'est pas juste une réduction d'affichage. La chargement d'une image au format "thumbnail" sera donc très rapide.

Une 2ème méthode est d'utiliser le module "Image Resize filter".

Les explications avec "Image Resize filter" feront l'objet d'un prochain didacticiel.

Merci à Jean-François Hovinne, développeur de WYMeditor, pour ses conseils et explications qui m'ont été très utiles.

Drupal 6 : ces explications sont prévues pour Drupal 7, mais elles sont transposables en Drupal 6 à condition d'installer les modules non inclus d'origine (CCK, ImageCache...).

Une très bonne vidéo pour Drupal 6, mais en anglais, est disponible sur le site de mustardseed.

Commentaires

Portrait de luptidej

Bonsoir Didier, merci pour ce long tuto, je n'en suis pas encore là, et, j'ai voulu charger WYLEditor, mais il semblerait que la version 7 ne soit pas sortie. Comment as-tu fait ?Merci d'avance.