Aide:Galerie/expert
![Wikicode](http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Wikitext.svg/70px-Wikitext.svg.png)
Quelle différence ?
Récapitulatifs des codes utilisables dans les galeries
[modifier | modifier le code]Usuels
[modifier | modifier le code]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]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. |
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
[modifier | modifier le code]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]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
-
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
[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.
-
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
[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
-
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
[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 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
[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 :
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
[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 :
![](http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Vauban_2.svg/260px-Vauban_2.svg.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Vauban_3.svg/260px-Vauban_3.svg.png)