Drupal 7 - Ajouter facilement des images dans vos articles avec IMCE

Introduction

Cet article présente le module IMCE qui permet de simplifier la gestion et l'insertion des images dans vos articles.

IMCE permet notamment :

  • de télécharger des images depuis votre disque dur vers votre serveur web
  • de redimensionner les images
  • de naviguer dans l'arborescence de votre serveur web pour sélectionner une image
  • de créer les versions "miniatures" d'une image...

Attention : CKEditor doit être installé sur votre Drupal pour utiliser IMCE

Par défaut, Drupal permet uniquement d'associer une image à un article.
Mais généralement, il est plutôt pratique d'insérer des images comme on le souhaite à l'intérieur d'un article pour illustrer nos propos.
Une image vaut mieux qu'un long discours smiley

Le module CKEditor, offre la possibilité d'ajouter des images dans les articles mais comme vous le voyez ci-dessous, il faut saisir l'URL de l'image.
Il n'est pas possible (en standard) de l'uploader directement ou de la sélectionner dans un dossier sur le serveur web.

Pour faciliter la gestion des images, nous allons donc installer le module IMCE.

Installation et configuration

Commencez par télécharger le module à l'adresse suivante : https://www.drupal.org/project/IMCE
Puis décompresser le contenu de l'archive du module dans le dossier sites\all\modules de votre installation Drupal.

Enfin, activez le module dans la page d'administration de Drupal

Il est maintenant nécessaire d'indiquer à CKEditor d'utiliser notre module IMCE pour ajouter les images.
Depuis le menu Administration de Drupal, sélectionnez CKEditor puis cliquez sur le bouton "Edit" du profil "Advanced"

Puis ouvrez la zone "File Browser settings" en bas de la fenêtre.
Il vous reste enfin à sélectionner "IMCE" dans les 2 listes déroulantes que CKEdtor utilise pour demander un fichier ou une image.

Comme d'habitude, n'oubliez pas de sauvegarder vos modifications avec le bouton "Save" en bas de la page.
Puis répétez la même opération pour le profil "Full HTML" de CKeditor : IMCE sera ainsi actif dans les 2 profils.

Utilisation

Maintenant, si vous retournez dans l'écran de création d'un article, et que vous utilisez le bouton "Insérer image" de la barre d'outils CKEditor, vous verrez un nouveau bouton "Explorer le serveur" à coté de l'URL de l'image à afficher.

Cliquez sur le bouton "Explorer le serveur" pour ouvrir la fenêtre ci-dessous.
Puis cliquez sur le bouton" Upload" en haut à gauche pour envoyer un fichier vers votre serveur web.

Sélectionnez une image sur votre disque dur et cliquer sur "Upload".
Vous remarquerez au passage qu'il est possible de redimensionner automatiquement une image pour créer des miniatures.

Votre image est maintenant disponible sur votre serveur web.
Elle a été copié dans le dossier sites\default\files​ de votre serveur
Cliquez maintenant sur le bouton "Insert file" pour l'ajouter dans votre article.

Vous constaterez que l'URL est automatiquement complétée et que l'aperçu de notre image apparaît.
Il ne reste plus qu'à valider pour insérer l'image dans votre article.

Il est possible d'insérer autant d'images que vous le souhaitez dans un article.

Vous pouvez également transférer manuellement par FTP un dossier avec des images sur votre serveur dans le dossier sites\default\files
Ce dossier sera affiché dans la fenêtre de IMCE et vous pourrez ajouter les images dans vos articles.
 

Tags: 

Ajouter un commentaire

You must have Javascript enabled to use this form.