Aide:Images

< Aide

Les images destinées à illustrer la GBT, à de rares exceptions près, doivent venir de sources officielles (jeux, artworks officiels, ...). Il est recommandé de choisir les illustrations des articles avec discernement et d'en limiter le nombre. La consultation d'articles de la GBT déjà illustrés sur le même thème offre souvent une aide précieuse. En cas de doute, la page de discussion de l'article concerné permet de sélectionner les illustrations appropriées en accord avec les autres contributeurs.

Charger l'image sur le site

Si l'image que vous souhaitez utiliser dans votre article n'est pas disponible sur la GBT, il faut au préalable l'importer sur le site.

Pour cela, il faut être identifié, et cliquer sur Importer un fichier, dans le menu à gauche, avant de suivre les instructions.

Pensez à mettre une courte description de l'image avec son origine dans le cadre prévu à cet effet (Exemple : Artwork de Morrowind, Capture d'écran d'Oblivion) et d'ajouter la catégorie correspondante.

Insertion dans un article

Syntaxe de base

Voici la syntaxe de base pour placer une image en utilisant le wikicode :

[[Fichier:Nom du fichier|vignette|alt=Texte alternatif pour l'image|Légende de l'image]]

Ainsi, l'image apparaît dans un cadre sur le côté droit de l'article, avec une taille standard de 250 pixels de large. Sa légende est placée en bas du cadre, et en bas à droite une petite icône ( ) fournit un lien sur l'image en format original. Le texte alternatif n'apparaît que si l'image n'est pas affichée, par exemple si le téléchargement est interrompu, ou lors de la lecture de la page par synthèse vocale. Pour mieux comprendre, voici un exemple simple :

Duel à l'épée entre Cyrus et Hakan

[[Fichier:Cyrus-hakan-duel.jpg|vignette|alt=Duel entre Cyrus et Hakan|Duel à l'épée entre Cyrus et Hakan]]

…qui donne cette image (cf. à droite) →

« Fichier:Cyrus-hakan-duel.jpg » est le nom du fichier image. Il s'agit du titre de l'image. Parfois on trouve écrit « Image: » ou « File: » au lieu de « Fichier: », c'est simplement une autre manière de faire qui revient au même.
« vignette » (attention, ne pas mettre un V majuscule) permet de ne voir automatiquement qu'une vignette, un aperçu réduit de l'image, entouré d'un cadre gris clair par défaut. Sur les articles, la mise en vignette des images est obligatoire. Par défaut vignette affiche une image de 250 pixels de large mais chaque utilisateur inscrit est libre de modifier cette taille dans ses préférences. Il est aussi possible d’utiliser à la place la version anglaise « thumb », qui donne un rendu identique.
« alt=Duel entre Cyrus et Hakan » est une description alternative qui décrit brièvement (éviter de dépasser 120 caractères) l'image pour le visiteur n'y ayant pas accès. Une image ne voulant pas ou ne pouvant pas se charger sera remplacée par ce texte ; dans un navigateur en mode texte, c'est ce texte alternatif qui est affiché ; pour les malvoyants, le synthétiseur vocal lira ce texte alternatif. En l'absence de ce texte alternatif, les logiciels de synthèse vocale liront le plus souvent le nom du fichier image, généralement peu ou pas compréhensible.
« Duel à l'épée entre Cyrus et Hakan » est le texte de la légende, au libre choix du contributeur, mais doit répondre à certains critères précis : n'être pas trop long et situer le contexte de l'image. Il est possible d'insérer des liens internes dans la légende.

Options de positionnement

Par défaut l'image est alignée sur la droite du texte, mais il est aussi possible de paramétrer son image en lui donnant une option de positionnement.

Voici la syntaxe :

`[[Fichier:Nom de l'image\|thumb\|alt=alternative textuelle\|positionnement\|légende]]`

Positionnement
Syntaxe	Rendu
`droite` `gauche` `centre` `néant`	Placer l'image à droite. Placer l'image à gauche. Placer l'image au centre. Placer l'image à gauche et exclure le texte à son côté.

Voici un exemple :

`[[Fichier:Cyrus-hakan-duel.jpg\|vignette\|alt=Duel entre Cyrus et Hakan\|centre\|Image centrée]]`

Image centrée

Paramètre de taille dans les images

Lorsqu'on insère une image dans la GBT, on peut éventuellement introduire un paramètre de taille, qui peut être proportionnel aux préférences de l'utilisateur ou être invariable.

Dans la majorité des cas, il est inutile de spécifier la taille d'une image car le paramètre thumb (ou, en français, vignette) donne une taille par défaut (fixée à 250 pixels, mais modifiable dans les préférences) adaptée à la plupart des cas. Dans certains cas particuliers on peut toutefois souhaiter modifier la taille :

Syntaxe complète avec paramètre de taille :

Le paramètre de « taille » peut s'écrire de deux manières :

proportionnelle aux préférences de l'utilisateur (recommandé pour des raisons d'accessibilité) ;
taille invariable (exceptionnel, car les images doivent pouvoir être adaptées à la taille des écrans et aux préférences de chacun).

Pour modifier les préférences de taille des images, cliquer sur l'onglet « Préférences » du compte d'utilisateur, puis sur l'onglet « Fichiers » et modifier les tailles par défaut proposées.

Taille variable

Exemple d'image avec « upright=1.25 »

Dans des cas de contenu ou de dimension d'images particuliers, le paramètre upright permet soit d'agrandir l'image (valeur supérieure à 1), soit de la réduire (valeur inférieure à 1). Ainsi, le code |upright=1.5| affiche l'image avec une largeur de 50 % supérieure à celle spécifiée dans les préférences de l'utilisateur, ce qui permet par exemple de faire apparaître une légende dans l'image, qui aurait été illisible avec un simple |upright|. Le code |upright=0.5| réduit une image de moitié.

Exemple de code avec upright=n :

[[Fichier:Cyrus-hakan-duel.jpg|vignette|upright=1.25|Exemple d'image avec « upright=1.25 »]]

À noter que le paramètre |upright| employé sans valeur équivaut à |upright=0.75|, car c'est l'utilisation courante pour une image portrait de proportion standard 4/3.

Taille invariable

À éviter : Son usage doit rester exceptionnel car ce paramètre nuit à l'accessibilité des images pour certains lecteurs.

Code : |....px|
à utiliser pour les schémas lisibles seulement à partir d'une taille précise ou pour les images de livres, ce paramètre correspond à une largeur absolue d'affichage en pixels.
Exemple : |200px|
code complet : [[Fichier:Cyrus-hakan-duel.jpg|vignette|centre|200px|Exemple d'image de 200px]] donne le rendu suivant :

Exemple d'image de 200px

Galerie

Une galerie d'images sur la GBT 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. La largeur des galeries s'adapte à la taille d'écran du visiteur. Les galeries doivent généralement être centrés, avec la balise <center>.

Attention, en français le terme « galerie » s'écrit avec un seul « l », mais le code source utilise comme balise HTML le terme anglais gallery qui prend deux « l ».

Syntaxe

Cette liste résume les codes habituellement utilisés ; seuls <gallery> et </gallery> et le nom des fichiers d'images sont obligatoires. Les paragraphes suivants illustrent leur fonctionnement.

Codes obligatoires :

<gallery>: obligatoire, ce code marque l'ouverture de votre galerie
nom du fichier.extension : exemple de contenu minimaliste avec une première ligne de contenu variable (Exemple1.jpg)
nom du fichier.extension|alt=Texte alternatif|Légende : exemple de contenu accessible avec une seconde ligne de contenu variable (Exemple2.jpg|alt=Texte alternatif|Légende)
</gallery> : obligatoire, ce code clôt la galerie

Codes optionnels :

caption="..." : le titre de la galerie, à insérer à l'intérieur des deux guillemets pour éviter les problèmes de typographie (le titre est centré à l'affichage)
perrow= : définit le nombre d'images par ligne ; n'agit que par réduction du nombre de vignette, qui seront « au maximum » au nombre fixé
showfilename : fait apparaître le nom de fichier de chaque image au dessus de leurs titres.

Modes d'affichage optionnels :

mode=traditional : images affichées avec une bordure, légendes apparentes en dessous. Mode par défaut, il peut être omis.
mode=nolines : idem, mais les bordures sont réduites, et les légendes centrées
mode=packed : images affichées avec une hauteur identique (largeur adaptée automatiquement si besoin), légendes en dessous des images
mode=packed-hover : images affichées avec une hauteur identique, légendes n'apparaissant qu'au passage de la souris, sur les images.
mode=packed-overlay : images affichées avec une hauteur identique, légendes permanentes sur les images.

Exemple

<center>
<gallery caption="Tribunal">
Trib_web03B.jpg|Grand Ordonnateur devant le Temple
Trib_web04B.jpg|Rues de Longsanglot
Trib_web05B.jpg|Gobelins
Trib_web07B.jpg|Animoncules dwemer
</gallery>
</center>