Aide:Galerie/expert

Aide de Wikipédia Insérer une image, une référence, etc. Import des images, mise en page et droit d'auteur

Cette page ne concerne que le wikicode (liens « modifier le code »).

Voir la page d'aide pour l'éditeur visuel.
Quelle différence ?

Niveau expert

Nous vous recommandons de lire auparavant aide de base concernant les galeries

Une galerie d'images sur Wikipédia est une succession d'images organisée horizontalement. Elle se situe souvent en bas des articles, quand des images particulièrement pertinentes sont présentes en trop grand nombre et ne peuvent pas être placées directement en lien avec le texte. La galerie peut avoir un titre ; chaque image doit avoir une légende. Dans la Wikipédia francophone, les galeries sont centrées par défaut. La largeur des galeries s'adapte à la taille d'écran du visiteur. Les tableaux ci-dessous listent les codes permettant d'agrandir la hauteur et la largeur des images. Ils indiquent aussi comment centrer une légende ou forcer la justification à droite ou à gauche en utilisant l'HTML.

Important : Certains codes, comme ceux qui permettent d'agrandir la taille des images, peuvent avoir des conséquences sur l'accessibilité, le rallongement du temps de chargement d'une page : ils sont à utiliser avec pertinence. Les lecteurs qui ne disposent pas d'une liaison internet performante, ou qui utilisent des lecteurs d'écran sont gênés par les galeries comportant de trop nombreuses images.

Récapitulatifs des codes utilisables dans les galeries

Usuels

Syntaxe usuelle

	Effet	Notes
<gallery>	Marque la première ligne de la galerie d'image	Obligatoire.
</gallery>	Clôt votre galerie	Obligatoire.

Options basiques

Options de base
(codes à insérer à la suite du code gallery)

	Effet	Notes
caption=" "	Titre de la galerie inséré entre les guillemets (à l'affichage : centré, en gras)	Wikiliens possibles • Italique ou <br> : impossible
perrow=	Définit le nombre d'images maximum par ligne	Inopérant en mode packed et dérivés
heights= px	Règle la hauteur maximale des images (réglées par défaut à 120 px)	► Déconseillé
widths= px	Règle la largeur des images (réglées par défaut à 120px)	► Déconseillé • Inopérant en mode=packed et dérivés
showfilename	Fait apparaître le nom de fichier de chaque image au-dessus de leurs légendes.

Attention aux paramètres heights et widths

Le réglage par défaut de la taille des images à 120px est optimal. Un agrandissement excessif des images provoque des ralentissements du temps de chargement ou des problèmes d'accessibilité.

À lire préalablement :

Variantes

Modes d'affichage optionnels
(codes à insérer à la suite du code gallery)

	Effet	Notes
mode=traditional	Images affichées avec bordures, légendes en dessous, justifiées à gauche.	Mode par défaut, il peut être omis.
mode=nolines	Idem mode=traditional, bordures réduites, légendes en dessous, centrées.
mode=packed	Images affichées avec hauteur identique, sans bordures, légendes en dessous, justifiées à gauche.	Largeur adaptée automatiquement si besoin
mode=packed-overlay	Idem mode=packed, légendes sur les images.	Idem
mode=packed-hover	Idem mode=packed-overlay, légendes apparaissant au survol des images par la souris.	Idem

Compléments

Options complémentaires image par image
(à insérer à la suite des noms de fichiers)

	Effet	Notes
alt=	Insère un texte alternatif pour les non-voyants.	120 caractères max.
<div style="text-align:center;"> </div>	La légende sera centrée (corrige l'affichage justifié à gauche par défaut)
<div style="text-align:right;"> </div>	La légende sera justifiée à droite (corrige l'affichage justifié à gauche par défaut)
<div style="text-align:left;"> </div>	La légende sera justifiée à gauche (corrige l'affichage centré du mode=nolines)

Les légendes sont justifiées à gauche par défaut, sauf pour le mode=nolines pour le moment. Il est possible de corriger l'affichage des légendes en utilisant du code HTML.

Exemples

Paramètre perrow et paramètres multiples en légende

Exemple d'utilisation de perrow dans une galerie comportant aussi un titre et des textes alternatifs :

<gallery perrow="3" caption="Galerie avec paramètre perrow">
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|Une tomate coupée avec une légende justifiée à gauche (par défaut)
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|<div style="text-align:center;">Une tomate coupée avec une légende centrée</div>
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|<div style="text-align:right;">Une tomate coupée avec une légende justifiée à droite</div>
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|Une tomate coupée avec un [[Wikipedia|lien]]
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|Une tomate<br>coupée
Tomato.svg|alt=Moitié de tomate coupée dans sa hauteur|Une tomate coupée
</gallery>

Résultat :

• Galerie avec paramètre perrow
• 
  Une tomate coupée avec une légende justifiée à gauche (par défaut)
• 
  Une tomate coupée avec une légende centrée
• 
  Une tomate coupée avec une légende justifiée à droite
• 
  Une tomate coupée avec un lien
• 
  Une tomate
  coupée
• 
  Une tomate coupée

Solution pour réduire le nombre d'images par ligne en mode=packed

Le paramètre perrow ne fonctionne pas avec les déclinaisons des mode=packed. L'exemple suivant montre comment réduire l'espace dans lequel vont s'insérer les images.

<div style="width:600px">
<gallery mode="packed" caption="Vers 1910 et en 2013">
W1144-Landreau3_Eglise_DeRueTrittau.jpg|L'église, vue de la rue de Trittau (route de [[Vallet (Loire-Atlantique)|Vallet]]).
W1145-Landreau3_Eglise_DeRueTrittau_58407.JPG|L'église, vue de la rue de Trittau.
W1146-Landreau6_Eglise_DeRueBoutillierDelisle.jpg|L'église, vue de la rue Boutillier Delisle (route de Vallet).
W1147-Landreau6_Eglise_DeRueBoutillierDelisle_58415.JPG|L'église, vue de la rue Boutillier Delisle.
W1148-Landreau7_Eglise_DeRueBoutillierDelisle.jpg|L'église, vue de la rue Boutillier Delisle.
W1149-Landreau7_Eglise_DeRueBoutillierDelisle_58423.JPG|L'église, vue de la rue Boutillier Delisle.
W1150-Landreau9_Eglise_DeRueBriace.jpg|L'église, vue de la rue de Briacé (route de la [[La Chapelle-Heulin|Chapelle-Heulin]]).
W1151-Landreau9_Eglise_DeRueBriace_58513.JPG|L'église, vue de la rue de Briacé.
</gallery></div>

Ce qui donne le résultat suivant (notez que la galerie ne sera plus centrée par défaut mais placée à gauche) :

• Vers 1910 et en 2013
• 
  L'église, vue de la rue de Trittau (route de Vallet).
• 
  L'église, vue de la rue de Trittau.
• 
  L'église, vue de la rue Boutillier Delisle (route de Vallet).
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue de Briacé (route de la Chapelle-Heulin).
• 
  L'église, vue de la rue de Briacé.

Pour retrouver la galerie centrée, il faut utiliser une balise « <div style="margin-left:auto; margin-right:auto;"> » :

<div style="margin-left:auto; margin-right:auto; width:600px;">
<gallery mode="packed" caption="Vers 1910 et en 2013">
W1144-Landreau3_Eglise_DeRueTrittau.jpg|L'église, vue de la rue de Trittau (route de [[Vallet (Loire-Atlantique)|Vallet]]).
W1145-Landreau3_Eglise_DeRueTrittau_58407.JPG|Léglise, vue de la rue de Trittau.
W1146-Landreau6_Eglise_DeRueBoutillierDelisle.jpg|L'église, vue de la rue Boutillier Delisle (route de Vallet).
W1147-Landreau6_Eglise_DeRueBoutillierDelisle_58415.JPG|L'église, vue de la rue Boutillier Delisle.
W1148-Landreau7_Eglise_DeRueBoutillierDelisle.jpg|L'église, vue de la rue Boutillier Delisle.
W1149-Landreau7_Eglise_DeRueBoutillierDelisle_58423.JPG|L'église, vue de la rue Boutillier Delisle.
W1150-Landreau9_Eglise_DeRueBriace.jpg|L'église, vue de la rue de Briacé (route de la [[La Chapelle-Heulin|Chapelle-Heulin]]).
W1151-Landreau9_Eglise_DeRueBriace_58513.JPG|L'église, vue de la rue de Briacé.
</gallery>
</div>

Ce qui donne :

• Vers 1910 et en 2013
• 
  L'église, vue de la rue de Trittau (route de Vallet).
• 
  Léglise, vue de la rue de Trittau.
• 
  L'église, vue de la rue Boutillier Delisle (route de Vallet).
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue Boutillier Delisle.
• 
  L'église, vue de la rue de Briacé (route de la Chapelle-Heulin).
• 
  L'église, vue de la rue de Briacé.

Galeries avec des images aux dimensions hors normes

Dans le mode=packed et ses variantes, la hauteur des vignettes est constante, mais la largeur peut varier considérablement et poser éventuellement des problèmes comme ci-dessous.

• 
  Image ayant un format classique
• 
  Une image particulièrement haute
• 
  Une image particulièrement large
• 
  Une image très petite

Même galerie avec le mode=traditional :

• 
  Image ayant un format classique
• 
  Une image particulièrement haute
• 
  Une image particulièrement large
• 
  Une image très petite

Avec le mode=nolines :

• 
  Image ayant un format classique
• 
  Une image particulièrement haute
• 
  Une image particulièrement large
• 
  Une image très petite

Galerie avec un titre trop long

Problème

Exemple sans la balise « <br> » ; le titre est trop long, pour une galerie composée seulement de deux images, et il n'y a pas de retour à la ligne automatique en fonction des dimensions de la galerie.

<gallery caption="Deux vues sur le nord de Strasbourg. De gauche à droite : les rives de l'İll, le bastionnement de la Finkmatt, la Porte de Pierre, et la porte de Saverne. ">
Strasbourg, vue générale, 1587.png|alt= gravure sépia représentant une ville fortifiée au milieu des champs |Gravure de 1587
Topographia Alsatiae (Merian) p 023.JPG|alt= gravure en noir et blanc représentant une ville entourée de fortifications multiples |Gravure de 1664
</gallery>

Résultat :

• Deux vues sur le nord de Strasbourg. De gauche à droite : les rives de l'İll, le bastionnement de la Finkmatt, la Porte de Pierre, et la porte de Saverne.
• 
  Gravure de 1587
• 
  Gravure de 1664

La balise « <br> » destinée à provoquer un retour à la ligne, fonctionne bien dans les légendes, mais elle provoque un bug si elle est insérée dans le titre ("caption").

Solution

Solution très simple pour rester en mode packed ou autre et contourner les limitations du paramètre caption : mettre le texte servant de titre avant la balise galerie, avec une balise « <div style="text-align:center;"> </div> », et en gras.

<div style="text-align:center;">
'''Deux vues sur le nord de Strasbourg, de gauche à droite :<br>Les rives de l'İll, le bastionnement de la Finkmatt,<br> la porte de Pierre, et la porte de Saverne. '''
</div>
<gallery mode=packed>
Strasbourg, vue générale, 1587.png|alt=gravure de 1587|Gravure de 1587
Topographia Alsatiae (Merian) p 023.JPG|alt= gravure de 1664 |Gravure de 1664
</gallery>

Résultat :

Deux vues sur le nord de Strasbourg, de gauche à droite :
Les rives de l'Ill, le bastionnement de la Finkmatt,
la porte de Pierre, et la porte de Saverne.

• 
  Gravure de 1587
• 
  Gravure de 1664

Autres types de présentation

Diaporama d'images

Il suffit d'insérer le paramètre mode="slideshow".

<gallery mode="slideshow">
Fichier:The Earth seen from Apollo 17.jpg|alt=La Terre vue depuis Apollo 17| La Terre vue depuis [[Apollo 17]]
Fichier:Pluto-01 Stern 03 Pluto Color TXT.jpg|alt=Pluton| [[Pluton (planète naine)|Pluton]]
Fichier:Messier51 sRGB.jpg|alt=La galaxie M51, dite du tourbillon| La galaxie [[M51 (galaxie)|M51]], dite « du tourbillon »
Fichier:Saturn from Cassini Orbiter (2004-10-06).jpg|alt=Saturne, la sixième planète du système solaire| [[Saturne (planète)|Saturne]], la sixième planète du système solaire
Fichier:Redrectangle hst full.jpg|alt=La nébuleuse du Rectangle rouge, appelée également HD 44179| La [[nébuleuse]] du [[Nébuleuse du Rectangle rouge|Rectangle rouge]], appelée également HD 44179
</gallery>

Résultat :

• 
  La Terre vue depuis Apollo 17
• 
  Pluton
• 
  La galaxie M51, dite « du tourbillon »
• 
  Saturne, la sixième planète du système solaire
• 
  La nébuleuse du Rectangle rouge, appelée également HD 44179

Défilement d'images

Le modèle {{Animation}} permet également de réaliser un diaporama, mais il est optimisé pour faire défiler une série d'images fixes. On l'utilise donc souvent afin de montrer une évolution chronologique, l'influence d'un paramètre, etc.

{{Animation
 | upright = 1.2
 | float = center
 | titre = Évolution de la conception des citadelles sous Vauban
 | Vauban 1.svg|Modèle de citadelle construit par Vauban à ses débuts, connu sous le nom de premier système
 | Vauban 2.svg|Évolution dans la construction des citadelles, l'apparition des tours-bastions (ou tours bastionnées), détachement du bastion (contre-garde), connu sous le nom de deuxième système
 | Vauban 3.svg|Dernière évolution dans la conception des citadelles, connu sous le nom de troisième système, mis uniquement en application à [[Neuf-Brisach]]
}}

Résultat :

Évolution de la conception des citadelles sous Vauban

Modèle de citadelle construit par Vauban à ses débuts, connu sous le nom de premier système

Évolution dans la construction des citadelles, l'apparition des tours-bastions (ou tours bastionnées), détachement du bastion (contre-garde), connu sous le nom de deuxième système

Dernière évolution dans la conception des citadelles, connu sous le nom de troisième système, mis uniquement en application à Neuf-Brisach