Help:Images/fr

Cette page explique la syntaxe des images lors de l'édition du wiki. Vous, ou un autre utilisateur devez habituellement téléverser une image sur un serveur avant de pouvoir l'utiliser dans une page.

Les images ainsi stockées sur un serveur MediaWiki sont généralement accessibles en utilisant le préfixe de l'espace de noms  (mais l'ancien préfixe d'espace de noms   est encore utilisable en tant que synonyme) pour la cible d'un lien MediaWiki. Le préfixe alternatif d'espace de noms  peut être également utilisé pour référencer le contenu originel du fichier média (pour un rendu ou un téléchargement séparé, en dehors de toute page MediaWiki).

Types de médias pris en charge pour les images
Les formats suivants sont supportés par défaut :


 * ou  - image bitmap compressée au format standard JPEG (ce format avec pertes est le plus approprié pour les photographies).
 * - image bitmap au format Portable Network Graphics (spécifié par le Consortium W3).
 * - image bitmap au format ancien Graphics Interchange Format.

Les autres formats utilisés sur Wikimedia, et généralement activés ailleurs (cela peut nécessiter des étapes d'installation supplémentaire au delà de ce qui est activé par défaut) sont :


 * - image redimensionnable au format Scalable Vector Graphics (spécifié par le Consortium W3). Voir Manual:Image Administration#SVG.
 * - Format tagged image. Souvent utilisé pour l'archivage de photographies haute résolution. Souvent utilisé avec.
 * ,,   - Ogg multimedia (audio ou video). Pas un format image, mais traité de la même manière. Souvent utilisé avec.
 * - documents multi-pages dans le Portable Document Format (initialement spécifié par Adobe). Souvent utilisé en conjonction avec.
 * - documents bitmap multipages au format DejaVu (le plus souvent, scan de livres). Voir
 * Une seule page du fichier  ou   est affichée à la fois.

D'autres types de supports peuvent être pris en charge, mais il peut ne pas être possible de les afficher en ligne.

Syntaxe
Voici la syntaxe complète pour afficher une image :

où « options » peut être vide ou bien est composé des éléments suivants, séparés par le symbole '|' (pipe) :


 * Option de format : une valeur parmi border et/ou frameless, frame (ou framed), thumb (ou thumbnail); (respectivement pour bordure, sans cadre, avec cadre, miniature). Note: border can be used in combination with frameless but will be ignored if used with one of the other options.
 * Ceci contrôle la manière dont l'image affichée est formatée et incluse dans le reste de la page.
 * Option de Redimensionement : une valeur parmi :
 * {width}px — Redimensionne l'image pour l'adapter à la largeur maximale donnée en pixels, sans restreindre sa hauteur. (Ne sont acceptées que les valeurs représentant un nombre entier de pixels. Vous pouvez mettre un caractère espace entre la valeur de la largeur et « px ».)
 * x{height}px — Redimensionne l'image pour l'adapter à une hauteur maximale donnée en pixels, sans restreindre sa largeur. Ne sont acceptées que les valeurs représentant un nombre entier de pixels. Vous pouvez mettre un caractère espace entre la valeur de la taille et « px ».
 * {width}x{height}px — Redimensionne l'image pour l'adapter à la largeur et la hauteur données en pixels. Ne sont acceptées que les valeurs représentant un nombre entier de pixels. Vous pouvez mettre un caractère espace entre la valeur de la largeur et « px ».
 * upright — Redimensionne une image pour l'adapter à des dimensions raisonnables, selon les préférences de l'utilisateur (adapté aux images dont la hauteur est plus grande que la largeur). En fixant  vous affichez l'image avec la largeur d'image par défaut de l'utilisateur. Avec   vous afficherez l'image deux fois plus grande que la largeur par défaut de l'utilisateur.
 * L'image gardera toujours ses proportions.
 * Les images ayant des types de média non-redimensionnables peuvent être réduites en taille, mais pas agrandies; c'est par exemple le cas des images au format bitmap.
 * L'initialisation de  ne nécessite pas d'utiliser le signe égale, c'est à dire que   opère de la même manière que.
 * Si utilisé sans valeur ou de signe égale (par exemple, ), il équivaut à la valeur par défaut   (bien que   soit la même chose que  ).
 * La taille maximale par défaut dépend du  format  et des dimensions internes de l'image (en fonction de son type de support).
 * Option Horizontal alignment : une parmi left (gauche), right (droite), center (centré), none (aucun); Si plusieurs de ces options sont présentes, seule la première sera utilisée.
 * Contrôle l'alignement horizontal (et les styles en-ligne/bloc ou flottant) de l'image dans un texte (pas de valeur par défaut).
 * Option Vertical alignment : une parmi baseline (line de base), sub (sous), super (au-dessus), top (haut), text-top (haut du texte), middle (milieu), bottom (bas), text-bottom (bas du texte).
 * Contrôle l'alignement vertical d'une image non-flottante en ligne avec le texte avant ou après l'image, et dans le même bloc (l'alignement vertical par défaut est au milieu middle ).
 * Option Link: une parmi:
 * link={cible} — Permet de changer la cible du lien généré (vers un titre de page arbitraire, ou une URL), activable pour l'affichage de l'image; par exemple  est interprété comme Example.jpg (lien externe), ou   est interprété comme Example.jpg (lien interne).
 * link= (valeur vide) — (MediaWiki 1.14+) Affiche une image sans aucun lien activable; à savoir   est interprété comme Example.jpg.
 * S'il y a un caractère espace entre  et le signe égale, la déclaration du lien sera traitée comme une légende.
 * Y compris quelques caractères HTML équivalents, comme  pour , peut faire que la déclaration du lien est traitée comme une légende (voir T306216).


 * ! Pour MW 1.24 et plus ancien : si vous définissez  (vide), alors aucun   ne sera interprété (voir T23454).
 * Autres options spécifiques :
 * alt={texte alternatif} — (MediaWiki 1.14+) Définit le texte alternatif (correspond à l'attribut HTML  de l'élément d'une image ) généré qui sera affiché soit si l'image référencée ne peut pas être téléchargée et intégrée, soit si le support du média nécessite l'utilisation du texte de description de remplacement (par exemple lors de l'utilisation d'un lecteur Braille ou avec des options d'accessibilité définies par l'utilisateur dans son navigateur).
 * S'il y a un caractère espace entre  et le signe égale, la déclaration de alt sera traitée comme une légende.
 * page={nombre} — Affiche le numéro de page spécifié (actuellement seulement applicable lors de l'affichage d'un fichier .djvu ou .pdf).
 * class={classe html} — (MediaWiki 1.20+) Définit les classes (correspond à l'attribut HTML  de l'élément  généré).
 * lang={language code} — (MediaWiki 1.22+) Pour les fichiers SVG contenant des instructions &lt;switch&gt; qui dépendent d'un attribut langue système. Sélectionne la langue dans laquelle le fichier doit être affiché. Par défaut il s'agit de la langue de la page (la langue par défaut du projet pour la plupart des projets).

Si un paramètre ne correspond à aucune des autres possibilités, il est supposé être le texte de la légende. S'il y a plus d'une chaîne présente qui ne soit pas un paramètre, la dernière de ces chaînes sera utilisée en tant que légende. Le texte de la légende s'affiche sous l'image pour les formats vignette(thumb) et cadre(frame), et correspond au texte d'une infobulle pour les autres formats. Pour les formats thumb et frame, le texte affiché dans la légende peut contenir des liens wiki et d'autres marques de formatage. D'autres options peuvent êtres ajoutées par les extensions MediaWiki.

Si l'option 'alt' n'est pas renseignée, et qu'une légende est fournie, le texte alternatif (alt) sera créé automatiquement à partir de la légende, sans marques de formatage, sauf en mode vignette ou cadre car la légende est déjà lisible par les lecteurs d'écran dans ce cas.

Format
Le tableau suivant montre l'effet de tous les formats disponibles.

Lorsque la hauteur d'une image en miniature est plus grande que sa largeur (c'est à dire en orientation portrait plutôt que paysage) et que vous trouvez qu'elle est trop grande, vous pouvez essayer l'option, où N est le rapport d'aspect de l'image (largeur de l'image divisée par sa hauteur; fixée par défaut à 0,75). L'alternative est de spécifier explicitement la hauteur maximale souhaitée (en pixels).

Notez qu'en écrivant, vous pouvez utiliser une image différente pour la vignette.

Taille et cadre
Parmi les différents formats, l'effet du paramètre de taille peut être différent, comme indiqué ci-dessous.

Dans les exemples ci-dessous, la taille originale de l'image est de 400 × 267 pixels. La taille d'une image avec  ou   peut être réduite, mais ne peut pas être élargie au-delà de la taille originale de l'image.
 * Pour savoir comment il apparaît lorsque sa taille est pas spécifiée, voir la section Format ci-dessus.
 * Lorsque le format est pas spécifié, ou seulement avec, la taille peut être à la fois réduite ou agrandie à la valeur que vous indiquez.
 * Une image avec  ignore toujours la spécification de la taille; l'image originale sera réduite si elle dépasse la taille maximale définie dans les préférences de l'utilisateur et les informations de la page afficheront une erreur Linter.

Alignement horizontal
Notez qu'en utilisant les formats  ou , l'alignement horizontal par défaut sera à droite (right) pour les langues de gauche à droite (left-to-right) et à gauche (left) pour les langues de droite à gauche (right-to-left).

Alignement vertical
Les options d'alignement vertical n'ont d'effet que si l'image est rendue comme un élément en-ligne (inline) et non pas en flottant. Ils modifient la façon dont l'image en ligne sera alignée verticalement avec le texte présent dans le même bloc avant ou après cette image sur la même ligne d'affichage.

Notez que la ligne de texte affichée là où les images en ligne sont insérées (et les lignes de texte affichées ensuite) peut être déplacée vers le bas (cela va augmenter la hauteur de ligne conditionnée par l'espacement de ligne additionnel, exactement comme s'il s'agissait d'un  avec du texte de taille variable, ou avec des exposants ou des indices) pour permettre à l'image d'être pleinement affichée avec cette contrainte d'alignement.



Pour afficher le résultat d'alignement plus clairement, les  du texte sont surlignés et soulignés, la taille de police est augmentée à 200%, et le bloc de paragraphe est encadré avec une bordure mince; en outre, des images de tailles différentes sont alignées:

 text top: text

 text text-top: text

 text super: text

 text baseline: text

 text sub: text

 text default: text

 text middle: text

 text text-bottom: text

 text bottom: text

Notes:


 * 1) La position « middle » d'alignement vertical de l'image (qui est aussi la valeur par défaut) se réfère généralement au milieu entre la « hauteur de x » et la ligne de base du texte (sur lequel le milieu vertical de l'image sera aligné, et sur lequel le texte peut habituellement être en dépassement), mais pas au milieu de la hauteur de ligne de la hauteur de la police qui se réfère à la hauteur entre les positions « haut du texte » (text-top)  et « bas du texte » (text-bottom); la hauteur de la police exclut :
 * 2) * l'espacement inter-ligne supplémentaire normalement divisé également en deux marges (ici 0.5em, selon la hauteur de ligne-fixé à 200%) au-dessus et au-dessous de la hauteur de la police).
 * 3) * l'espacement inter-ligne supplémentaire qui peut être ajouté par les exposants et les indices.
 * 4) Toutefois, si la hauteur de l'image provoque un dépassement au-dessus ou en dessous de la ligne pleine hauteur normale du texte, la position médiane sera ajustée par augmentation de la marge supérieure et/ou inférieure de telle sorte que l'image puisse s'adapter et aligner correctement, et que toutes les images (y compris celles d'hauteurs plus petites) soient centrées verticalement sur la position médiane ajustée (pour calculer la hauteur de ligne effective, on considère le texte de chaque rangée affichée avec la hauteur de police la plus grande).
 * 5) Les positions d'alignement « haut du texte » (text-top) et « bas du texte » (text-bottom) excluent également l'ajout d'espacement supplémentaire de ligne lié aux exposants et indices, mais pas l'espacement supplémentaire interligne défini par la hauteur de ligne.
 * 6) Les positions d'alignement « top » et « bottom » prennent en compte tous les espacements supplémentaires des lignes (y compris les exposants et les indices, s'ils ont été inclus dans un  ). Lorsque l'alignement d'images contraint l'image à croître au-dessus ou en dessous du seuil d'espacement normal de ligne, et que l'image n'est pas en positionnée en absolu, l'image provoque l'ajustement des positions « haut » (top) et « bas » (bottom) (tout comme les exposants et indices), de sorte que la hauteur effective rendue entre les lignes de texte, sera plus grande.
 * 7) Les positions des décorations de texte « underline », « overline » et « overstrike » devraient être quelque part entre ces deux limites et peuvent dépendre du type et de la taille des polices utilisées (les styles exposant et indice peuvent être pris en compte dans certains navigateurs, mais généralement ces styles sont ignorés et la position de ces décorations ne peuvent pas être ajustées); de sorte que ces décorations n'ont normalement pas d'incidence sur la position verticale des images, par rapport au texte.

Arrêter le flux du texte
A l'occasion, il est souhaitable d'arrêter le flux du texte (ou d'autres images en ligne non flottantes) autour d'une image flottante. En fonction de la résolution de l'écran du navigateur web et autres, le flux du texte sur le côté droit d'une image peut provoquer qu'un en-tête de section (par exemple, == My Header == ) apparaisse à droite de l'image, au lieu de se trouver en dessous, comme un utilisateur pourrait s'y attendre. Le flux du texte peut être arrêté en plaçant   (ou si vous préférez, ) avant le texte qui doit commencer sous l'image flottante. (Cela peut aussi se faire sans ligne vide, en encadrant la section des images flottantes avec, ce qui efface tous les flottants à l'intérieur de l'élément   .)

Toutes les images affichées sous forme de blocs, y compris les images non-flottantes centrées (center), les images flottantes alignées à gauche (left) ou à droite (right), ainsi que les images flottantes encadrées (frame) ou sous forme de vignette (thumbnail), cassent implicitement les lignes du texte enveloppant (elles terminent le bloc de texte actuel précédent l'image et créent un nouveau paragraphe pour le texte qui les suit). Elles seront ensuite empilées verticalement le long de leur marge d'alignement à gauche ou à droite (ou le long de la ligne médiane entre ces marges pour les images centrées).

Modifier la cible du lien par défaut
Le tableau suivant illustre comment modifier la cible du lien (dont la valeur par défaut est la page de description de l'image) ou comment l'enlever. Changer le lien ne modifie pas le format décrit dans les sections précédentes.

Avertissement:
 * Les exigences de licence sur votre wiki peuvent ne pas vous permettre de supprimer tous les liens vers la page de description qui affiche les attributions d'auteurs requises, les déclarations de droits d'auteur, les conditions de licence applicables, ou une description plus complète de l'image affichée (y compris son historique des modifications).
 * Si vous modifiez ou supprimez le lien cible d'une image, vous devrez alors fournir sur votre page un lien explicite vers un autre endroit où se trouve cette page de description, ou afficher les droits et la déclaration de l'auteur, ainsi qu'un lien vers la licence applicable, si ceux-ci sont différents des éléments applicables à la page d'intégration elle-même.
 * Votre politique de wiki peut restreindre l'utilisation du paramètre de lien alternatif, ou peut même appliquer une interdiction de paramètres de liaison alternatifs pour les fichiers multimédias intégrés (dans ce cas, le paramètre de liaison sera ignoré), ou ne peut les accepter qu'après validation par les utilisateurs autorisés ou les administrateurs.

Syntaxe pour une galerie
Il est facile de faire une galerie de miniatures en utilisant la balise $galery. La syntaxe est :

Notez que le code de l'image n'est pas entre crochets lorsqu'il est entre les balises de galerie.

Les légendes sont optionnelles, et peuvent contenir des liens wiki et autres balises de formatage.

Certains paramètres contrôlant l'affichage des vignettes peuvent également être utilisés ici, notamment ceux qui modifient le fichier (contrairement à ceux qui contrôlent le positionnement de l'image dans la page). Par exemple, avec les médias multi-pages comme les PDF, vous pouvez utiliser du code comme.

Le préfixe  peut être omis. Cependant, il est pratique de l'inclure comme une aide pour localiser rapidement les attributs d'image dans le wikicode (pour par exemple, nettoyer la mise en page).

Par exemple :

est formaté comme :

Paramètre mode
Depuis la version 1.22, un paramètre $mode expérimental est disponible, qui dispose des options suivantes :

Les rangées dans ce mode adaptatif (responsive) s'organisent suivant la largeur de l'écran.
 * $traditional est le type de galerie original utilisé par MediaWiki.
 * $nolines est similaire à $traditional, mais sans bordure.
 * $packed implique des images de même hauteur mais avec des largeurs différentes, et séparées par de petite espaces.
 * $overlay affiche la légende au-dessus de l'image, dans une boîte blanche semi-transparente.
 * $hover est similaire à $overlay, mais la légende et la boîte n'apparaîssent qu'avec le survol de la souris.
 * $slideshow crée un diaporama avec les images.

Par exemple :

Qui donne (mode : ) :

Attributs facultatifs pour la galerie
La balise galerie prend elle-même plusieurs paramètres additionnels, spécifiés comme des attributs de paires (clé, valeur) :


 * : (le texte de la légende entre guillemets doubles pour plusieurs mots) définit une légende centrée en tête de la galerie. Seul le texte brut peut être utilisé dans la légende; le formatage, les modèles et autres ne fonctionneront pas
 * : définit la largeur (max) des images ; par défaut 120px (notez le pluriel : widths).
 * : définit la hauteur (max) des images ; par défaut 120px (notez le pluriel : heights).
 * : définit le nombre d'images par rangées. 0 signifie ajustement automatique basé sur la largeur de l'écran.
 * : affiche les noms des fichiers d'images dans les légendes individuelles de chaque image (1.17+).
 * : Voir la section ci-dessus (1.22+ ; 1.28+ pour « slideshow »).
 * : pour le mode « diaporama » (slideshow) seulement, affiche par défaut la bande avec les vignettes des images sous le diaporama (1.29+).


 * Exemple 1

Syntaxe :

Résultat :

Rangées d'images qui s'adaptent à la largeur du navigateur
Une méthode qui fonctionne pour une rangée d'images avec différentes largeurs est de ne pas utiliser « thumb » ni « left » ni « none ». Si le mode vignette (« thumb ») n'est pas utilisé (et donc sans les légendes), une rangée d'images occupera la largeur du navigateur. Si nécessaire, réduire la fenêtre du navigateur pour voir les images s'enrouler à la rangée suivante.





Pour justifier les images de largeur variable avec légendes, il est is nécessaire d'utiliser un  HTML avec une liste non ordonnée avec aussi. Pour plus d'infos et d'idées voir : Give Floats the Flick in CSS Layouts (en anglais).

        </li>  </li>  </li>  </li>  </li> </ul>

Pour aligner le bord supérieur des images ajoutez la commande d'alignement vertical

<ul>  </li>  </li>  </li>  </li>  </li>  </li>  </li>  </li> </ul>

Certaines fermes de wikis n'ont pas toutes les options de galerie (telles que « widths »). En outre, quelque fois, un veut des largeurs variables pour les images d'une rangée. Hors de la galerie, ou du div HTML, il est impossible d'avoir des légendes individuelles pour les images d'une rangée qui occupe la largeur du navigateur. Testez et voyez. Il n'y a pas d'autre possibilité que d'utiliser le texte wiki correctement. Les images iront soit s'entasser sur la droite, ou provoquer l'apparition d'une barre de défilement horizontale.

L'utilisation en flottant à gauche (« left ») pour certaines images, combiné à « none » pour quelques-unes d'entre elles, ne fonctionne pas toujours non plus, surtout s'il y a en plus une barre latérale d'images à droite. Des choses bizarres se produisent. Pour les navigateurs ou les écrans dont la largeur est plus étroite, une image d'une rangée peut apparaître loin en bas sur la page après la fin de la barre d'images latérale droite.

Comportement des liens
Par défaut une image est liée à la page de description de son fichier. L'option « link= » modifie ce comportement pour créer un lien vers une autre page ou site web, ou pour désactiver le comportement de liaison de l'image.

Alternativement, vous pouvez créer un lien texte vers une page de description du fichier ou vers le fichier lui-même. Voir.

Afficher une image et la lier à une autre page ou site web
Utiliser l'option « link= » pour lier l'image à une autre page ou un site web :

Cliquer sur l'image ci-dessous vous dirigera vers MediaWiki :





Cliquer sur l'image ci-dessous vous dirigera vers « example.com » :





Afficher une image sans lien
Utiliser l'option « link= » sans valeur attribuée, pour désactiver le lien; l'image ci-dessous n'a pas de lien :





Lien vers une image
Ajoutez  comme préfixe au lien que vous devez créer.

File:MediaWiki-2020-logo.svg File:MediaWiki-2020-logo.svg Wiki Wiki

Lien direct vers une image
Les exemples ci-dessus renvoient à la page de description de l'image. Pour créer un lien direct vers une image, le pseudo-espace de noms  peut être utilisé sur les pages MediaWiki :

[[Media:MediaWiki-2020-logo.svg]]

Liens directs depuis des sites externes
Une autre possibilité est d'utiliser la page Special:Redirect/file (ou son alias Special:Filepath). Contrairement à l'exemple ci-dessus, vous pouvez y accéder à partir de sites web externes ainsi que des pages MediaWiki.

Les paramètres  (hauteur) et   (largeur) peuvent également être ajoutés pour renvoyer une taille spécifique de l'image. Les proportions de l'image sont toujours conservées.

Obtention de l'URL complète d'une image
Pour obtenir le chemin complet d'une image (sans passer par des redirections comme indiqué ci-dessus), certains peuvent être utilisés.

Devient :



Dans le cas où cela est utilisé à partir d'un modèle où l'espace de noms  doit être supprimé,   peut le faire :

Devient :



Pré-requis
Avant d'utiliser des images dans votre page, l'administrateur système de votre wiki doit avoir activé le téléversement de fichiers et un utilisateur doit téléverser le fichier de l'image. Les administrateurs système peuvent configurer le wiki pour qu'il accepte les fichiers des dépôts externes comme Wikimedia Commons. Pour le redimensionnement des images côté serveur il est nécessaire d'avoir une librairie graphique configurée (telle que GD2, ImageMagick, etc.).

Fichiers sur d'autres sites web
Vous pouvez lier vers un fichier externe disponible en ligne en utilisant la même syntaxe que celle des liens vers une page web externe. Avec ces syntaxes, l'image ne sera pas affichée, mais seulement le texte du lien correspondant sera affiché.



Ou avec un texte différent affiché :

texte du lien ici

Les balises MediaWiki supplémentaires ou les mises en forme HTML/CSS (pour les éléments en ligne) sont autorisés dans ce texte affiché (à l'exception des liens intégrés qui pourraient casser le lien englobant) :

[http://www.example.com/some/image.png Exemple ici  riche   texte du lien  .]

est interprété comme : Exemple ici  riche   texte du lien .

Si les utilisateurs ont le droit d'importer une image intégrée à partir d'une URL externe (voir ), vous pouvez aussi incorporer des images externes. Pour cela, insérez simplement l'URL de l'image : http://url.for/some/image.png Pour le moment, les images incorporées ne peuvent pas être redimensionnées, mais elles peuvent être formatées à l'aide de balises MediaWiki ou du code HTML/CSS.

Si cette option n'est pas activée, l'image ne sera pas incorporée mais affichée comme un lien textuel vers le site externe, juste comme précédemment.

Voir aussi

 * Wikipedia:Extended image syntax
 * Category:Wikipedia image help
 * Wikipedia:Picture tutorial
 * Wikipedia:Help:Gallery tag
 * T113101 - problèmes interactifs
 * Extension:PageImages
 * Extension:PageImages