[Tutoriel] Insérer des images dans un article SPIP

Contexte pédagogique : vous avez pris des photos (des productions d’élèves en Arts visuels, un compte rendu d’une sortie pédagogique), et vous voulez les publier sur le site SPIP de l’école.

Compétences techniques > Nous allons apprendre à :
 préparer les imags pour le web ;
 utiliser les archives zip ;
 insérer des images et des documents dans un article d’un site SPIP ;

Compétences pré-requises >
 Savoir accéder à l’espace privé du site SPIP (vous avez besoin de vos identifiants (login et mot de passe) et créer un article ;
 Savoir transférer les fichiers-image de l’APN dans un dans un dossier.

1. Sélectionner les images à publier

Les fichiers-image récupérés de l’appareil photo numérique sont stockés dans un dossier (Images dans notre exemple).
L’explorateur de fichiers est ouvert et vous êtes dans le dossier Images contenant les photos à publier.

Nous allons sélectionner et copier les photos à publier dans un sous-dossier pour ne pas modifier les originaux :

 Créez un sous-dossier, SELECTWEB par exemple ;
 Sélectionnez les images à l’aide des touches MAJ et/ou CTRL (ajout/retrait individuel à la sélection),
 Copiez les images sélectionnées dans le presse-papiers : raccourci CRTL+C,
 Placez-vous dans le dossier SELECTWEB et collez-y les images : CTRL+ V.

2. Préparer les images

2.1. Optimiser les images

Nous pouvons maintenant modifier ces images copiées sans toucher aux fichiers originaux.

Selon le cas, on aura besoin de :
 faire pivoter les images ;
 en recadrer certaines ;
 flouter certains visages ;

2.2. Renommer les images

IMPORTANT : les images jointes apparaîtront dans l’ordre des noms des fichiers-image. Pensez à les renommer dans le bon ordre : voyage2009-01.jpg, voyage2009-02.jpg, voyage2009-02.jpg...

2.3. Redimensionner les images

Enfin il reste à redimensionner les images... Pourquoi ?
 parce que la taille des images produites par les APN récents est bien trop grande et inadaptée pour un affichage sur écran ; ces fichiers servent à imprimer les images en qualité photo ;
 parce que le poids élevé des fichiers-image bruts ralentit la vitesse d’affichage (même en haut débit) ;
 le poids élevé des fichiers-image bruts occupe inutilement de la place sur le serveur qui héberge votre SPIP.

Mode opératoire : selon les ordinateurs que possède l’école, il faut choisir l’outil le plus efficace :
 Win XP : installez le Powertoy Image Resizer ;
 Win Vista/Seven : l’outil est intégré à l’explorateur (à confirmer... Je n’en ai pas encore testé) ;
 Pour tous les systèmes, utilisez les fonctionnalités des logiciels de gestion d’images... Je vous conseille XnView (mode opératoire à venir).

Dans le dossier SELECTWEB, nous avons maintenant les images prêtes à être envoyées dans l’article.

3. Images et documents dans un article SPIP

Avant d’aller plus avant, voyons les possibilités qu’offre SPIP pour insérer des images.

3.1. Image ou document ? Dans un article SPIP, on peut insérer deux types d’objets :
 des images, destinées à illustrer l’article ;
 des documents, qui peuvent être tout type de fichiers : par exemple des documents-texte (pdf, doc, odt...), des fichiers audio et vidéo, des animations swf, et également des images ( !).

Quel intérêt de pouvoir insérer les images en tant qu’image ET/OU document ?
Cela dépend de vos besoins :
 pour illustrer un article, des images insérées dans le flux de l’article sont sûrement plus pertinentes qu’en documents joints à l’article ;
 par contre, pour faire un diaporama, ce sont les fichiers-images insérés comme documents-joints sous l’article qui nous intéressent.

3.2. Ajouter un fichier à un article

Que ce soit un article ou un document, la manipulation est la même... Mais il ne faut pas se tromper de fenêtre !

On utilisee l’interface SPIP pour envoyer nos fichier sur le serveur :
 On utilise la fenêtre AJOUTER UN DOCUMENT(resp. AJOUTER UNE IMAGE),
 Le bouton PARCOURIR permet de sélectionner le fichier,
 Le bouton ENREGISTRER permet d’envoyer le fichier sur le serveur qui héberge votre site SPIP.

Un fois le fichier téléchargé, il reste à savoir comment l’utiliser.

Pour insérer une image dans l’article, inutile de faire du HTML, SPIP vous propose un « raccourci » permettant d’insérer votre image simplement.

 Images sans commentaire

Pour chaque image, voyez la mention des 3 raccourcis :

Recopiez l’un de ces raccourcis (le nombre correspond au numéro de l’image, il change donc pour chaque fichier), et recopiez-le à l’intérieur de la case « Texte », là vous désirez le situer dans votre article. « left » aligne l’image à gauche, « right » à droite, et « center » place votre image au centre du texte.

Lors de l’affichage à l’écran, SPIP remplacera ces raccourcis par le code HTML correspondant, en calculant automatiquement la taille des images.

 Images avec titre et description

Si vous avez indiqué un titre et/ou une description, les mentions sont remplacées par :

Elles s’utilisent de la même façon que ci-dessus ; cependant, lorsque vous insérez un « raccourci » de ce type, SPIP insère dans votre texte non seulement l’image, mais le titre et la description que vous lui avez donnée. Votre image apparaît ainsi avec, éventuellement, une explication et des mentions de copyright, le nom de l’artiste, etc.

3.3. Avoir un effet diaporama

Pour faire un diaporama dans un article SPIP, de nombreux plugins ont été développés (voir la rubrique « Galeries et diaporamas » sur Spip-contrib). Nous utiliserons ici un des plugins les plus populaires... Et simple d’emploi : Thickbox

 Si vous utilisez un site SPIP hébergé par l’académie de Poitiers, il n’y a rien a faire, le plugin est déjà installé ;
 Si vous gérez vous-même votre site SPIP :

• Téléchargez Thickbox,
• Installez-le : placez le plugin sur le serveur ET activez-le. Je vous renvoie à l’article de Spip.net pour l’utilisation des plugins.

 Il n’y a rien d’autre à faire : les images insérées en tant que DOCUMENTS seront affichées sous forme de diaporama.

4. Insérer les images dans l’article SPIP

4.1. Insérer une image en tant que document

On peut maintenant utiliser l’interface SPIP pour envoyer nos images sur le serveur :
 On utilise la fenêtre AJOUTER UN DOCUMENT,
 Le bouton Parcourir permet de sélectionner l’image,
 Le bouton Enregistrer permet d’envoyer le fichier-image sur le serveur.

... Manipulation à répéter pour chaque image à insérer !

STOP !!! Astuce : si vous devez envoyer plus de 5 images, la manipulation risque d’être vite fastidieuse... Heureusement, les développeurs ont pensé à nous : on peut envoyer en un clic une archive Zip contenant toutes les images.

4.2. Insérer une archive contenant toutes les images

4.2.1 Utiliser un gestionnaire d’archives Zip

Microsoft propose un outil intégré rudimentaire de gestion des archives.

Mais, si ce n’est déjà fait, je vous conseille d’installer un utilitaire dédié qui vous rendra d’autres services,7zip, logiciel libre à télécharger ici : http://www.7-zip.org/.

4.2.2 Créer l’archive avec toutes les images

Pour créer l’archive zip :
 Sélectionnez toutes les images du dossier SELECTWEB : raccourci CTRL+A,
 ClicD > 7zip > Ajouter à l’archive,
 Dans le fenêtre, choisissez le format zip (au lieu de 7z),
 Validez.

Les images sont maintenant dans le fichier-archive web.zip .

Remarque : créer une archive .zip est LA solution pour envoyer un dossier en pièce jointe par mail !

4.2.3 Insérer l’archive

Vous devez sortir de la fenêtre d’édition de l’article. Vous avez alors une page du type :

Sous l’article, un bouton JOINDRE UN DOCUMENT permet d’ajouter des documents joints à l’article.
 Utilisez ce bouton pour envoyer l’archive sur le serveur ;
 Le téléchargement est plus long que pour une seule image ;
 Une fois l’archive complètement téléchargée, on vous demande si vous voulez :

• décompresser l’archive... Oui, c’est ce que l’on veut faire !
• laisser l’archive zip en document joint. Effectivement, pour des documents autres, cette solution peut être intéressante,
• les deux.

Voilà ! Les images sont automatiquement insérées comme pièces jointes.

Au travail !

PS : Maintenant que vous maîtrisez les images dans SPIP sur le bout des doigts, voici une méthode alternative pour créer un autre type de diaporama dans SPIP, [Tutoriel] Insérer un diaporama dans SPIP.