Créer une galerie d'images avec le plugin Multiviewer - Sites SPIP mutualisés Académie de Rouen

Créer une galerie d’images avec le plugin Multiviewer

, par Olivier Gautier - Format PDF Enregistrer au format PDF

Dans cet article, vous aurez des exemples de galeries présentant des sites utilisant la charte graphique académique.

Quelques précautions avant de débuter

Pour pouvoir réaliser ces galeries, il vous faudra :
- activer le plugin MultiViewer FULL pour SPIP 2.0.
- Utiliser des images peu lourdes (moins de 300 ko) et de taille adaptée (pas plus de 800 pixels en largeur et hauteur). Dans le cas contraire, vous risquez de demander au serveur web académique d’effectuer des traitements graphiques qu’il est incapable de réaliser : vous obtiendrez alors des articles contenant des erreurs, voire des pages totalement bloquées.
- Utiliser des formats d’images jgp, png ou gif.
- Ne pas déposer les images dans le portfolio de SPIP, dans le cas contraire, vos images seraient affichées en double.

Pour compléter la lecture de cet article, vous pouvez vous rendre sur la documentation officielle.

Un exemple de code pour créer une galerie autoviewer

<MULTIVIEWER103|NOUVEAU|nom=galerie1>
<MULTIVIEWER103|PARAM|nom=galerie1|typegalerie=autoviewer>
<MULTIVIEWER103|PARAM|nom=galerie1|largeur=700>
<MULTIVIEWER103|PARAM|nom=galerie1|hauteur=400>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=182>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=183><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=184>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=185><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=186><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=187>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=188><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=189>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=190><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=191>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=192><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=193>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=194><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=195>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=196><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=197>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=198><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=199>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=200><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=201>
<MULTIVIEWER103|VOIR|nom=galerie1>

Explication du code :

<MULTIVIEWER103|NOUVEAU|nom=galerie1> indique qu’on va créer une galerie nommée galerie1. 103 est le numéro de cet article.

<MULTIVIEWER103|PARAM|nom=galerie1|typegalerie=autoviewer> : la galerie galerie1 sera de type autoviewer.

<MULTIVIEWER103|PARAM|nom=galerie1|largeur=700>
<MULTIVIEWER103|PARAM|nom=galerie1|hauteur=400>

La galerie galerie1 sera générée dans un bloc de 700 pixels de large sur 400 pixels de haut.

<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=182> : on ajoute le document 182 dans la galerie.

<MULTIVIEWER103|VOIR|nom=galerie1> : on affiche enfin la galerie.

Galerie autoviewer, le résultat

<MULTIVIEWER103|NOUVEAU|nom=galerie1>
<MULTIVIEWER103|PARAM|nom=galerie1|typegalerie=autoviewer>
<MULTIVIEWER103|PARAM|nom=galerie1|largeur=700>
<MULTIVIEWER103|PARAM|nom=galerie1|hauteur=400>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=182>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=183><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=184>
<MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=185><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=186><MULTIVIEWER103|AJOUTERDOC|nom=galerie1|doc=187>

Exemple de galerie simpleviewer

Dans le code précédent, il suffit d’indiquer simpleviewer comme type de galerie à la place d’autoviewer pour obtenir le résultat ci-dessous :

Exemple de galerie imagerotator

Dans le code précédent, il suffit d’indiquer imagerotator comme type de galerie à la place d’autoviewer pour obtenir le résultat ci-dessous :

Exemple de galerie postcard

Dans le code précédent, il suffit d’indiquer postcard comme type de galerie à la place d’autoviewer pour obtenir le résultat ci-dessous :

Vous aurez noté que certaines des images insérées dans cette galerie ne sont pas accessibles car elles sortent du cadre des 700 pixels par 400 pixels. Il vous faudra donc soit restreindre le nombre d’images, soit augmenter la dimension en pixels de la galerie.

Exemple de galerie tiltviewer

Dans le code précédent, il suffit d’indiquer tiltviewercomme type de galerie à la place d’autoviewer pour obtenir le résultat ci-dessous :

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Mots-clés : activites
Mots-clés : affichage

Suivre les commentaires : RSS 2.0 | Atom

juin 2020 :

Rien pour ce mois

mai 2020 | juillet 2020

Police pour dyslexie ?
Interlignage double ?

Visites