Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc du CMS > Des mises en pages personnalisées >

Fiche N° 11 - Un diaporama sous SPIP PDF

Objectif  : Constituer simplement et rapidement une galerie d’images et l’afficher sous forme de diaporama.


Ce diaporama fait appel au plugin MediaBox, inclus dans la distribution SPIP V3 [1] Le principe de fonctionnement est très simple : écrivez un article (deux lignes pour décrire le diaporama par exemple), et associez à cet article les photos qui constitueront le diaporama. Les photos apparaîtront sous forme de vignettes cliquables.

Configuration du plugin MediaBox

  • Sous le menu Squelettes , cliquer sur Boîte Multimédia .
  • Cocher la case Activer la Boîte Multimédia dans le site public , une liste de paramètres s’affiche alors :
  • Au-dessous de la question Insérer une boîte sur toutes les images ? cliquer Oui .
  • Il ne reste plus qu’à sélectionner l’apparence à donner à la boîte d’affichage du diaporama, les effets et les paramètres de défilement des images.
    ATTENTION : Il ne faut pas choisir N’insérer aucun habillage par défaut sinon l’image n’apparaît plus comme un pop-up contenant les commandes de navigation du diaporama, elle s’affichera au-dessous de la galerie de vignettes.

Préparation de l’affichage des vignettes

Pour constituer une galerie sous forme de vignettes, il faut que la configuration de SPIP permette de les fabriquer :

  • Menu Maintenance puis Configuration et Fonctions avancées
  • Cliquer sur l’image GD2 pour choisir cette méthode de génération des miniatures des images ; SPIP va indiquer la taille maximale des images qu’il pourra réduire (8,1Mpx pour GD2).
  • Choisir Générer automatiquement les miniatures des images et préciser la taille maximale des vignettes générées (150px convient généralement).
  • Ne pas oublier de cliquer sur Enregistrer .

Sans cette étape, la sélection de l’image qui débute le diaporama se fait sur une image de taille normale (pas pratique...)

Sélection des images du diaporama

  • Ecrivez le texte de votre nouvel article,
  • Téléversez les images qui constituent le diaporama en les associant à cet article.
    Il est possible d’associer les images soit une par une, soit en une seule fois en créant (sur votre poste de travail) un fichier .zip contenant toutes les photos et en le téléversant ; SPIP se chargera de "dézipper" le contenu.
  • Au bas de la fenêtre de l’image téléversée cliquez sur Modifier et Déposer dans le Portfolio et l’ajouter ainsi à la galerie affichable en diaporama.
  • Toute image placée dans le portfolio fera partie de la galerie affichée sous forme de vignette.
  • ATTENTION Si une image du portfolio est "citée" dans la page sous la forme <imgXXX|left>, elle ne fera plus partie de la galerie.

Utilisation en ligne

Un clic sur la vignette de son choix affiche l’image normale dans une boîte.
La navigation dans la galerie utilise les icônes suivantes :


passage à l’image précédente.


passage à l’image suivante.


démarrage en mode diaporama.


arrêt du mode diaporama.


[1Il nécessite son installation pour les sites en SPIP V2.
La terminologie utilisée dans cette fiche correspond à SPIP V3 mais diffère peu de celle de SPIP V2.