FANDOM


Cette page décrit comment utiliser et personnaliser les galeries d'images, diaporamas et carrousels en utilisant le wikitexte et l'Éditeur source.

Consultez aussi Aide:Galeries, diaporamas et carrousels pour les bases. Veuillez noter que sur les anciens wikis, les vidéos sont aussi supportées pour les galeries et carrousels, seulement si les nouvelles galeries d'images ne sont pas activées. Sur l'UCP, les vidéos ne sont supportées que dans les galeries.

Galerie

Une galerie est une collection d'images ou vidéos miniatures affichées sous forme de tuiles sur la page.

Exemple simple

Voici le code de base pour les galeries :

<gallery>
Example1.png
Example2.png
Example3.png
</gallery>

Exemple avec variations

Le code suivant produira une galerie plus complexe, comme montré plus haut :

<gallery navigation="true" orientation="none">
Example1.png
Example2.png|Avec légende
Example3.png|Le '''[[Aide:Wikitexte|wikitexte]]''' peut être utilisé dans les légendes
Example4.png|Cette image renvoie vers [[Aide:Contenu]]|link=Aide:Contenu
</gallery>

Dans cet exemple :

  • Le premier élément est une image seule
  • Le deuxième élément est une image avec une légende
  • Le troisième élément est une image avec une légende qui comprend du wikitexte
  • Le quatrième élément est une image qui renvoie vers une page de wiki, suivie par une légende

Exemple avec variables

Si vous souhaitez utiliser des variables au lieu d'images, vous aurez besoin d'utiliser une forme légèrement différente des balises de galerie telle que ci-après (avec trois variables et quelques réglages définis) :

{{#tag:gallery|
{{{1|}}}
{{{2|}}}
{{{3|}}}
|hideaddbutton="true"
|crop="true"
}}

Diaporama

Un diaporama est un module d'images qui affiche une image à la fois et les fait défiler automatiquement. Les vidéos sont ignorées si elles sont placées dans un diaporama.

  • Chatons !
  • Chiots !
  • Singes !
  • Girafes !

Exemple simple

Voici le code de base pour les diaporamas :

<gallery type="slideshow">
Example1.png
Example2.png
Example3.png
</gallery>

Exemple avec variations

Le code suivant génère un diaporama plus complexe :

<gallery type="slideshow" hideaddbutton="true" navigation="true">
Example1.png
Example2.png|Avec légende
Example3.png|Le  '''[[Aide:Wikitexte|wikitexte]]''' peut être utilisé dans les légendes
Example4.png|Cliquer sur l'image vous emmène sur [[Aide:Contenu]]|link=Aide:Contenu|linktext=Aide:Contenu
</gallery>

Dans cet exemple :

  • Le premier élément est une image seule.
  • Le deuxième élément est une image avec une légende.
  • Le troisième élément est une image avec une légende qui comprend du wikitexte.
  • Le quatrième élément est une image qui renvoie vers une page de wiki. Il inclut aussi une légende, ainsi qu'un texte pour le lien.

Carrousel

Un carrousel est un module d'image qui prend toute la la largeur de la page et fait défiler jusqu'à quatre images. Les vidéos sont ignorées si elles sont placées dans un diaporama.

Astuce : pour un meilleur résultat, utilisez des images dont la taille est exactement 670 x 360px.

Exemple simple

Voici le code de base pour les carrousels :

<gallery type="slider">
Example1.png
Example2.png
Example3.png
</gallery>

Exemple avec variations

Le code suivant génère un carrousel plus complexe :

<gallery type="slider">
Example1.png
Example2.png|Exemple deux
Example3.png|Exemple trois|linktext=Super liens
Example4.png|Exemple quatre|link=Aide:Contenu|linktext=Pages intéressantes
</gallery>

Dans cet exemple :

  • Le premier élément est une image seule.
  • Le deuxième élément est une image avec un titre.
  • Le troisième élément est une image avec un titre et un sous-titre.
  • Le quatrième élément est une image liée à une page de wiki. Il inclut aussi une légende, ainsi qu'un texte pour le lien.

Carrousel avancé avec variables

Si vous souhaitez utiliser des variables à la place des images, vous devrez passer à une forme légèrement différente de la balise gallery, comme indiqué ci-dessous (avec trois variables d'image et quelques paramètres définis) :

{{#tag:gallery|
{{{1|}}}
{{{2|}}}
{{{3|}}}
|type="slider"
|orientation="right"
|hideaddbutton="true"
}}

Wikitexte et options

Le tableau suivant liste les options de personnalisation pour chacun des trois modules d'images.

Galerie

Type Options wikitexte Valeur par défaut
Options de mise en page
Largeur des images (max) widths=[nombre de pixels] (sans unité) 200
Nombre de colonnes columns=[nombre de colonnes] ou
perrow=[nombre de colonnes]
S'adapte à la page*
* Si columns n'est pas indiqué, le nombre d'images affichées par ligne sera automatiquement ajusté en fonction de la taille de la fenêtre du navigateur
Position de la galerie position=[left|center|right] left
Espacement des images spacing=[small|medium|large] medium
Orientation et rognage des images orientation=[none|landscape|portrait|square] none (aucun)
Options de légende
Position de la légende captionposition=[within|below] below
Alignement de la légende captionalign=[left|center|right] left
Couleur de la légende captiontextcolor=[code couleur]
(#a1b2c3 ou nom de couleur standard comme "yellow")
Couleur du texte de l'article
Options de bordure
Épaisseur de la bordure bordersize=[none|small|medium|large] small
Couleur de la bordure bordercolor=[code couleur]
(#a1b2c3 ou nom de couleur standard comme "yellow")
Couleur du thème accentué
Autre
Masquer le bouton « ajouter une image » hideaddbutton=true false
Légende de galerie caption=[texte affiché] Pas de légende
Images
Les images sont séparées par un saut de ligne.
Les légendes ne sont pas obligatoires. Les crochets ne sont utilisés que pour ajouter des liens dans les légendes.
Les liens ne sont pas obligatoires et utilisent link=

Diaporama

Type Options wikitexte Valeur par défaut
Options de mise en page
Largeur des images (max) widths=[nombre de pixels] (sans unité) 300
Rognage crop=true false
Afficher les importations récentes showrecentuploads=true false
Position du diaporama position=[left|center|right] right
Autre
Masquer le bouton « ajouter une image » hideaddbutton=true false
Légende du diaporama caption=[texte affiché] Pas de légende
Images
Les images sont séparées par un saut de ligne.
Les légendes ne sont pas obligatoires. Les crochets ne sont utilisés que pour ajouter des liens dans les légendes.
Les liens ne sont pas obligatoires et utilisent link=

Carrousels

Type Options wikitexte Valeur par défaut
Options de mise en page
Alignement orientation=[bottom|right] bottom
Images
Les images sont séparées par un saut de ligne.
Les titres ne sont pas obligatoires.
Les liens ne sont pas obligatoires et utilisent link=
Les sous-titres ne sont pas obligatoires et utilisent linktext=

Voir aussi

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .