Modèle:Image multiple

Une page de Wikipédia, l'encyclopédie libre.
 Documentation[voir] [modifier] [historique] [purger]

Ce modèle crée une boîte contenant entre deux et dix images, disposées verticalement ou horizontalement et avec des légendes pour la boîte entière ou par image.

Avec le choix approprié des paramètres, le modèle peut automatiquement redimensionner les images à une largeur totale donnée, chaque image ayant la même hauteur.

Sachez que ce modèle ne respecte pas les préférences de taille d'image par défaut des utilisateurs. L'ancienne version non-Lua de ce modèle imposait aussi une taille en pixels aux images, ce qui est en contradiction avec la recommandation sur la mise en forme des images : son usage était donc déconseillé dans l'espace encyclopédique et la prudence reste conseillée dans sa nouvelle version.

Si les paramètres de taille d'image sont omis, ce modèle définit toutes les images à 200px de largeur, indépendamment du fait que le lecteur ait défini une préférence pour une autre largeur d'image par défaut. Ceci provoque la visualisation hors échelle de plusieurs images par rapport aux autres images d'un article.


Mode d'emploi[modifier le code]

Paramètre Description
align right (à droite, par défaut), left (à gauche), center (centré)
direction horizontal (par défaut), vertical
background color Pour définir la couleur de fond de la boîte dans laquelle les images apparaissent.
header Titre de la vignette, placé au-dessus de toutes les images.
header_align Paramètre de l'alignement du titre de la vignette : left (à gauche), center (centré, par défaut), right (à droite)
header_background
width Permet de définir la même largeur pour chaque image (c'est-à-dire qu'elle remplace toute largeur width[n] ci-dessous). Ne pas inclure si des largeurs d'image différentes sont prévues, y compris si les images doivent être redimensionnées à une largeur totale fixe.
total_width Permet de mettre à l'échelle les images à la même hauteur et à la même largeur totale. N'utilisez pas à la fois la largeur totale total_width et la largeur simple width.
image[n] (où [n] = 1 à 10)  Nom de fichier de la [n]e image.
width[n] (comme ci-dessus)  Deux significations: (1) La largeur (en pixel, en nombre entier, en évitant « px ») de l'image [n]. Annulé par width (si installé). (2) La largeur complète de l'image originale [n] si total_width (la largeur totale) est remplie afin de redimensionner toutes les images à la même hauteur et à une largeur totale de votre choix.
height[n] (comme ci-dessus)  La hauteur entière de l'image [n] d'origine si total_width (la largeur totale) est remplie afin de redimensionner toutes les images à la même hauteur et à une largeur totale de votre choix. Sinon, le paramètre est ignoré.
alt[n] (comme ci-dessus)  Alt description pour une image [n] (numérotée de 1 à 10).
link[n] (comme ci-dessus)  Pour spécifier la page à laquelle la[n]ième image est liée (c'est-à-dire la page qui est chargée lorsque l'image est cliquée). Si elle est définie comme vide (par exemple, ...|alt1=... |link1= |caption1=...), le lien est désactivé (même vers la page standard de description des images Wikipedia) ; voir Wikipédia:Atelier accessibilité/Bonnes pratiques.

Remarque : Ce paramètre ne doit pas être utilisé avec des images qui ont reçu des licences libres (telles que la licence GDFL ou une licence CC libre) car ces licences exigent que les images soient liées à une déclaration de la licence sous laquelle elles sont utilisées.

thumbtime[n] (comme ci-dessus)  Lorsqu'on utilise des fichiers vidéo (Ogg theora), ce paramètre indique quel moment de la vidéo est affiché pour l’affichage initial. Pour cela, il faut indiquer soit un nombre uniquement en secondes, soit utiliser le format heures:minutes:secondes ; voir aussi commons:Commons:Video#Setting a video thumbnail image.
caption[n] (comme ci-dessus)  Légende pour l'image [n].
caption_align left (à gauche, par défaut), center (centré), right (à droite).
footer Titre du pied de vignette. Prend toute la largeur du pied de la vignette multi-images, par opposition aux images individuelles. Évitez si possible les options left (à gauche) et right (à droite), car les appareils mobiles peuvent afficher les images verticalement.
footer_align Paramètre de l'alignement du titre du pied de vignette : left (à gauche, par défaut), center (centré), right (à droite)
footer_background


{{multiple image
 | align     = left/right/center
 | direction = horizontal/vertical
 | header    = 
 | header_align = left/right/center
 | header_background = 
 | footer    = 
 | footer_align = left/right/center
 | footer_background = 
 | width     = 

 | image1    = 
 | width1    = 
 | alt1      = 
 | caption1  = 

 | image2    = 
 | width2    = 
 | alt2      = 
 | caption2  = 

 | image3    = 
 | width3    = 
 | alt3      = 
 | caption3  = 

 | image4    = 
 | width4    = 
 | alt4      = 
 | caption4  = 

 | image5    = 
 | width5    = 
 | alt5      = 
 | caption5  = 
}}

Exemples[modifier le code]

Carton jaune
Carton rouge
Les joueurs peuvent recevoir un carton jaune (avertissement) ou un carton rouge (expulsion).
{{multiple image
 | footer    = Les joueurs peuvent recevoir un carton jaune (avertissement) ou un carton rouge (expulsion).
 | width     = 60

 | image1    = Yellow card.svg
 | alt1      = Carton jaune

 | image2    = Red card.svg
 | alt2      = Carton rouge
}}
Démonstration de la transparence PNG
Dés colorés avec fond blanc
Une image PNG avec une couche 8-bit de transparence...
Dés colorés avec fond en damier
... ici avec un fond en damier.
{{multiple image
 | align     = left
 | direction = vertical
 | header    = Démonstration de la transparence [[Portable Network Graphics|PNG]]
 | width     = 200

 | image1    = PNG transparency demonstration 1.png
 | alt1      = Dés colorés avec fond blanc
 | caption1  = Une image PNG avec une couche 8-bit de transparence...

 | image2    = PNG transparency demonstration 2.png
 | alt2      = Dés colorés avec fond en damier
 | caption2  = ... ici avec un fond en damier.
}}
2
3
4
Quand un utilisateur a plusieurs fois les mêmes lauriers,

ils peuvent les représenter avec un ruban

et les chiffres indiquent le nombre de lauriers décernés.
{{multiple image
 | footer   = Quand un utilisateur a plusieurs fois les mêmes [[Wikipédia:Décernez les lauriers|lauriers]],
ils peuvent les représenter avec un [[WP:Rubans|ruban]]
et les chiffres indiquent le nombre de lauriers décernés.
 | width    = 60

 | image1   = Ribbon numeral 2.png
 | alt1     = 2

 | image2   = Ribbon numeral 3.png
 | alt2     = 3

 | image3   = Ribbon numeral 4.png
 | alt3     = 4
}}

Exemple avec arrière-plan[modifier le code]

Herbe verte avec quelques petites fleurs blanches et jaunes
Trois petites fleurs blanches et jaunes avec feuilles vertes en arrière-plan
Feuille d'une plante. Elles viennent en groupe de trois, chacun avec trois lobes.
Petite musquée (Adoxe moscatelline)
{{multiple image
 | image1=Adoxa_moschatellina_210406.jpg
 | alt1=Herbe verte avec quelques petites fleurs blanches et jaunes

 | image2=Adoxa_moschatellina_210406a.jpg
 | alt2=Trois petites fleurs blanches et jaunes avec feuilles vertes en arrière-plan

 | image3=adoxa_moschatellina_blatt.jpeg
 | alt3=Feuilles d'une plante. Elles viennent en groupe de trois, chacune avec trois lobes.

| footer=[[Adoxe moscatelline|Petite musquée]] (''Adoxe moscatelline'')
 | footer_background=#BBDD99
 | background color=#BBDD99
 | footer_align=center
 | width=160
}}

Exemple avec liens[modifier le code]

Un mulet
Un mulet
Un âne
Un âne
Une truite
Une truite
Le mulet dirige vers Mulet, l'âne ne dirige vers rien et la truite dirige vers la page de description de l'image (par défaut).
{{multiple image
 | footer    = Le mulet dirige vers ''[[Mulet]]'', l'âne ne dirige vers rien et la truite dirige vers la page de description de l'image (par défaut).
 | align     = left

 | image1    = Juancito2.png
 | width1    = 143
 | alt1      = Un mulet
 | caption1  = {{centrer|Un mulet}}
 | link1     = Mulet

 | image2    = Donkey 1 arp 750px.jpg
 | width2    = 150
 | alt2      = Un âne
 | caption2  = {{centrer|Un âne}}
 | link2     =

 | image3    = Rainbow_trout.png
 | width3    = 91
 | alt3      = Une truite
 | caption3  = {{centrer|Une truite}}
}}

Voir aussi[modifier le code]

Aucune description.

Paramètres du modèle

La mise en forme multiligne est préférée pour ce modèle.

ParamètreDescriptionTypeStatut
Alignementalign

Alignement des images sur la page : right (à droite, par défaut), left (à gauche), center (centré)

Valeurs suggérées
left center right
Exemple
right
Chaînefacultatif
Directiondirection

Direction d'affichage des images : horizontal (par défaut) ou vertical.

Valeurs suggérées
horizontal vertical
Exemple
horizontal
Chaînesuggéré
Titreheader

Titre de la vignette, placé au-dessus de toutes les images.

Exemple
Plusieurs photos du même sujet.
Chaînesuggéré
Alignement du titreheader_align

Alignement du titre des images

Valeurs suggérées
left center right
Exemple
left
Chaînefacultatif
Couleur de fond du titreheader_background

Code hexa de la couleur de fond du titre des images.

Exemple
#bbdd99
Chaînefacultatif
Pied de vignettefooter

Titre affiché sous les images. Prend toute la largeur du pied de la vignette multi-images, par opposition aux images individuelles. Évitez si possible les options left (à gauche) et right (à droite), car les appareils mobiles peuvent afficher les images verticalement.

Exemple
Plusieurs images d’un même sujet.
Chaînesuggéré
Alignement du pied de vignettefooter_align

Paramètre de l'alignement du titre du pied de vignette : left (à gauche, par défaut), center (centré), right (à droite).

Valeurs suggérées
left center right
Exemple
center
Chaînefacultatif
Couleur de fond du pied de vignettefooter_background

Code hexa de la couleur de fond du pied de vignette.

Exemple
#bbdd99
Chaînefacultatif
Largeur des imageswidth

Permet de définir la même largeur pour chaque image (S’impose à TOUTES les images). Ne pas inclure si des largeurs d'image différentes sont prévues, y compris si les images doivent être redimensionnées à une largeur totale fixe.

Exemple
120
Nombrefacultatif
Image 1image1

Première image

Exemple
New Hampshire Red Hen.jpg
Fichierobligatoire
Texte alternatif à l’image 1alt1

Texte alternatif à l’image 1, utilisé pour l’accessibilité (lecteurs d’écran, etc).

Exemple
Photo d’une poule rousse.
Chaînesuggéré
Légende de l’image 1caption1

Légende propre à l’image 1, affichée sous celle-ci.

Exemple
Une poule de race New Hampshire.
Chaînesuggéré
Largeur de l’image 1width1

Largeur en pixels de l’image 1.

Exemple
140
Nombrefacultatif
Hauteur de l’image 1height1

Hauteur en pixels de l’image 1

Exemple
150
Nombrefacultatif
Image 2image2

Deuxième image.

Exemple
White Hen in Norway.jpg
Fichierobligatoire
Texte alternatif à l’image 2alt2

Texte alternatif à l’image 2, utilisé pour l’accessibilité (lecteurs d’écran, etc).

Exemple
Photo d'une poule blanche.
Chaînesuggéré
Légende de l’image 2caption2

Légende propre à l’image 2, affichée sous celle-ci.

Exemple
Poule norvégienne.
Chaînesuggéré
Largeur de l’image 2width2

Largeur en pixels de l’image 2

Exemple
160
Nombrefacultatif
Hauteur de l’image 2height2

Hauteur en pixels de l’image 2

Exemple
150
Nombrefacultatif
Image 3image3

aucune description

Fichierfacultatif
Texte alternatif à l’image 3alt3

aucune description

Chaînefacultatif
Légende de l’image 3caption3

aucune description

Chaînefacultatif
Largeur de l’image 3width3

aucune description

Nombrefacultatif
Hauteur de l’image 3height3

aucune description

Nombrefacultatif
Image 4image4

aucune description

Fichierfacultatif
Texte alternatif à l’image 4alt4

aucune description

Chaînefacultatif
Légende de l’image 4caption4

aucune description

Chaînefacultatif
Largeur de l’image 4width4

aucune description

Nombrefacultatif
Hauteur de l’image 4height4

aucune description

Nombrefacultatif
Image 5image5

aucune description

Fichierfacultatif
Texte alternatif à l’image 5alt5

aucune description

Chaînefacultatif
Légende de l’image 5caption5

aucune description

Chaînefacultatif
Largeur de l’image 5width5

aucune description

Nombrefacultatif
Hauteur de l’image 5height5

aucune description

Nombrefacultatif
Alignement des légendescaption_align

Alignement des légendes par rapport aux images qu’elles concernent.

Valeurs suggérées
left center right
Exemple
left
Chaînefacultatif
Largeur totaletotal_width

Permet de mettre à l'échelle les images à la même hauteur et à la même largeur totale. N'utilisez pas à la fois la largeur totale total_width et la largeur simple width.

Exemple
400
Nombrefacultatif

Voir les statistiques d'utilisation du modèle sur l'outil wstat.