Aide:Galerie/expert

Ajouter des liens
Une page de Wikipédia, l'encyclopédie libre.
Wikicode
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[modifier | modifier le code]

Usuels[modifier | modifier le code]

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

Options basiques[modifier | modifier le code]

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 :

Voir la page : Mise en forme des images

Variantes[modifier | modifier le code]

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[modifier | modifier le code]

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[modifier | modifier le code]

Paramètre perrow et paramètres multiples en légende[modifier | modifier le code]

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
  • Moitié de tomate coupée dans sa hauteur
    Une tomate coupée avec une légende justifiée à gauche (par défaut)
  • Moitié de tomate coupée dans sa hauteur
    Une tomate coupée avec une légende centrée
  • Moitié de tomate coupée dans sa hauteur
    Une tomate coupée avec une légende justifiée à droite
  • Moitié de tomate coupée dans sa hauteur
    Une tomate coupée avec un lien
  • Moitié de tomate coupée dans sa hauteur
    Une tomate
    coupée
  • Moitié de tomate coupée dans sa hauteur
    Une tomate coupée

Solution pour réduire le nombre d'images par ligne en mode=packed[modifier | modifier le code]

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 (route de Vallet).
  • L'église, vue de la rue de Trittau.
    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 (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 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é (route de la Chapelle-Heulin).
  • L'église, vue de la rue de Briacé.
    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 (route de Vallet).
  • Léglise, vue de la rue de Trittau.
    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 (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 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é (route de la Chapelle-Heulin).
  • L'église, vue de la rue de Briacé.
    L'église, vue de la rue de Briacé.

Galeries avec des images aux dimensions hors normes[modifier | modifier le code]

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
    Image ayant un format classique
  • Une image particulièrement haute
    Une image particulièrement haute
  • Une image particulièrement large
    Une image particulièrement large
  • Une image très petite
    Une image très petite

Même galerie avec le mode=traditional :

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

Avec le mode=nolines :

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

Galerie avec un titre trop long[modifier | modifier le code]

Problème[modifier | modifier le code]

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 sépia représentant une ville fortifiée au milieu des champs
    Gravure de 1587
  • gravure en noir et blanc représentant une ville entourée de fortifications multiples
    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[modifier | modifier le code]

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 1587
  • gravure de 1664
    Gravure de 1664

Autres types de présentation[modifier | modifier le code]

Diaporama d'images[modifier | modifier le code]

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 :

Défilement d'images[modifier | modifier le code]

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
Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Aide:Galerie/expert&oldid=197443309 ».