Tuto Spip - Création galerie d’images

1) Génération des vignettes par SPIP

Tout d’abord, afin d’alléger - aussi bien techniquement que visuellement - la page chargée par l’utilisateur, on mettra dans l’article non pas les images grande taille, mais des vignettes.
Ces vignettes seront automatiquement générées par SPIP. Il suffit pour cela d’aller dans le menu Configuration> Fonctions avancées du site, dans l’espace privé.

Cliquer sur la vignette de meilleure qualité dans la page de configuration permet de choisir la méthode de fabrication des vignettes.

Ensuite, il faudra indiquer la taille maximale des vignettes générées, et bien sûr sélectionner le bouton radio "Générer automatiquement les miniatures des images".

Un bouton situé en bas à droite du cadre, non visible sur la capture d’écran, permet d’enregistrer les modifications.

2) Envoi des images sur le serveur

Envoyer un grand nombre d’images en même temps sur le serveur en passant par le formulaire SPIP peut être très long, et même échouer si l’on envoie trop d’images de trop grande taille.

• Afin de ne pas se perdre dans les images il est préférable :
  • de les envoyer par paquets de 50 maximum.
  • de nommer les images avec un numéro croissant pour pouvoir plus facilement les identifier dans une série plus tard. Des noms comme "Capture01, Capture02".... ne sont pas des plus pratiques.

• Et pour aller (beaucoup) plus vite :
  • il faut envoyer les images par FTP dans le répertoire tmp/upload du site, en utilisant un client FTP comme FileZilla
  • puis dans l’interface web de SPIP, choisir de téléverser les images depuis "le serveur".
    

S’il y a des images dans tmp/upload, SPIP proposera une liste déroulante des fichiers, avec en plus une option pour tout charger.

Une fois les images chargées, il ne reste plus qu’a les intégrer à l’article dans l’ordre, les organiser et les commenter.

Pour intégrer les images plus rapidement, voici une petite page html avec un script JavaScript permettant de générer tous les liens de type <docXXX|left>, qu’il suffira de copier-coller ensuite.

Générateur de liens de documents pour SPIP

3) Organisation des images dans l’article

Afin d’alléger visuellement la page, il est recommandé d’utiliser la fonctionnalité d’onglets du plugin Couteau suisse.

La fonction recherche (CTRL+F) du navigateur permettra d’aller image par image dans le bon ordre, avant de cliquer sur le lien <imgXXX|alignement> proposé par SPIP.
Il faudra choisir l’alignement "left".
La zone de recherche restant active dans la page, il suffit de changer un numéro et de cliquer sur "suivant" pour aller à l’image suivante dans la série.

Les images n’ayant pas de titre, le seul lien proposé pour le moment est img

Or, les images ajoutées devront apparaître sous forme de vignette et non en grande taille, c’est pourquoi le code <imgXXX|left> devra être transformé en <docXXX|left>.
Cela peut aisément se faire en copiant tout le texte de l’article (CTRL+A dans la zone de saisie puis CTRL+C) et en le collant (CTRL+V) dans un éditeur de texte comme Notepad++ (Windows) ou Gedit (Linux).
Ensuite, la fonction rechercher et remplacer (habituellement CTRL+H, ou située dans le menu édition) de l’éditeur de texte permettra de remplacer tous les <img par <doc.
Copier-Coller à nouveau, cette fois depuis l’éditeur de texte vers l’article, et le tour est joué.

A ce moment, il est possible d’enregistrer l’article, en gardant éventuellement une copie de son texte dans l’éditeur précédemment utilisé, au cas où l’enregistrement échouerait.

• img affiche l’image en grand, sans titre ni descriptif
• emb affiche l’image en grand, avec titre
• doc affiche la vignette

4) Titrer les vignettes

Afin de mieux référencer les images et pour les décrire brièvement à un visiteur néophye, il est ensuite recommandé de les titrer.
Cela étant long et fastidieux dans la fenêtre d’édition de l’article, il sera plus simple d’aller dans le menu Edition > Documents de SPIP.

Une boîte de recherche spécifique à la médiathèque (à ne pas confondre avec la boîte de recherche générale du site, située dans l’entête) permettra de n’afficher que les images de la série.

Par défaut et ce que je conseille, l’affichage se fait

• par identifiant décroissant, et donc en mettant les images les plus récentes (et pas encore titrées) d’abord.
• en paginant les images par 10

Il suffit alors de cliquer avec la molette de la souris (= ouvrir dans un nouvel onglet) sur les 10 liens "Modifier" des images non titrées, puis dans chaque onglet, de mettre un titre, valider, passer à l’onglet suivant pendant que l’onglet courant recharge et faire de même.
Une fois qu’un onglet a rechargé, il est possible de le fermer en cliquant sur sa petite croix.
Lorsque les 10 premières images sont titrées, on clique sur le lien de pagination pour aller aux 10 suivantes, et ainsi de suite.

Une fois les images envoyées au serveur, triées et organisées dans l’article, et titrées, il ne reste plus qu’à publier l’article.