Help:Images/fr

File:PD-icon.svg

Note: When you edit this page, you agree to release your contribution under the CC0. See Public Domain Help Pages for more info.

File:PD-icon.svg

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 File: (mais l'ancien préfixe d'espace de noms Image: est encore utilisable en tant que synonyme) pour la cible d'un lien MediaWiki. Le préfixe alternatif d'espace de noms Media: 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).

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.).

Types de médias pris en charge pour les images

Les formats suivants sont supportés par défaut :

• .jpg ou .jpeg - image bitmap compressée au format standard JPEG (ce format avec pertes est le plus approprié pour les photographies).
• .png - image bitmap au format Portable Network Graphics (spécifié par le Consortium W3).
• .gif - image bitmap au format ancien Graphics Interchange Format.
• .webp - WebP supporte à la fois la compression avec ou sans perte d'information lors de la réduction jusqu'à 45% de la taille des images.

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 :

• .svg - image redimensionnable au format Scalable Vector Graphics (spécifié par le Consortium W3). Voir Manual:Image Administration#SVG.
• .tiff - Format tagged image. Souvent utilisé pour l'archivage de photographies haute résolution. Souvent utilisé avec Extension:PagedTiffHandler/fr .
• .ogg, .oga, .ogv - Ogg multimedia (audio ou video). Pas un format image, mais traité de la même manière. Souvent utilisé avec Extension:TimedMediaHandler .
• .pdf - documents multi-pages dans le Portable Document Format (initialement spécifié par Adobe). Souvent utilisé en conjonction avec Extension:PdfHandler/fr .
• .djvu - documents bitmap multipages au format DejaVu (le plus souvent, scan de livres). Voir Manuel:Comment utiliser DjVu avec MediaWiki

  Une seule page du fichier .pdf ou .djvu 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.

Affichage d'une seule image

Syntaxe

Voici la syntaxe complète pour afficher une image :

[[File:filename.extension|options|caption]]

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 qui soient un multiple des préférences utilisateur pour les vignettes – ou à la taille par défaut des vignettes pour les utilisateurs non connectés ou ceux qui sont connectés mais qui n'ont pas modifié leurs préférences – afin d'avoir des dimensions raisonnables. Cette option est souvent utile pour les images dont la hauteur est plus grande que la largeur. Nécessite thumb ou frameless. En fixant |upright=1.0| vous affichez l'image avec la largeur d'image par défaut de l'utilisateur. Avec |upright=2.0| 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 upright ne nécessite pas d'utiliser le signe égale, c'est à dire que |upright 2.0| opère de la même manière que |upright=2.0|.

  Si utilisé sans valeur ni signe égale (par exemple, |upright|), il équivaut à la valeur par défaut |upright=0.75| (bien que |upright=| soit la même chose que |upright=1.0|).

  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 [[File:Example.jpg|20px|link=http://www.wikipedia.org]] est interprété comme File:Example.jpg (lien externe), ou [[File:Example.jpg|20px|link=MediaWiki]] est interprété comme File:Example.jpg (lien interne).
  • link= (valeur vide) — (MediaWiki 1.14+) Affiche une image sans aucun lien activable; à savoir [[File:Example.jpg|20px|link=]] est interprété comme File:Example.jpg.

  S'il y a un caractère espace entre link et le signe égale, la déclaration du lien sera traitée comme une légende.

  Y compris quelques caractères HTML équivalents, comme %22 pour ", peut faire que la déclaration du lien est traitée comme une légende (voir phabricator:T306216).

  ! Pour MW 1.24 et plus ancien : si vous définissez |link=| (vide), alors aucun title ne sera interprété (voir phabricator:T23454).

• Autres options spécifiques :
  • alt={texte alternatif} — (MediaWiki 1.14+) Définit le texte alternatif (correspond à l'attribut HTML alt="..." de l'élément d'une image ‎<img />) 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 alt et le signe égale, la déclaration de alt sera traitée comme une légende.

  • page={number} — Affiche le numéro de page spécifié (actuellement seulement applicable lors de l'affichage d'un fichier .djvu ou .pdf).
  • thumbtime={number} — Affiche le rendu d’une miniature de la vidéo à l’horodatage spécifié en secondes ou au format MM:SS ou HH:MM:SS (applicable uniquement lors de l’affichage d’un fichier vidéo).
  • start={number} — Lorsque la lecture vidéo est démarrée, elle débute à l’horodatage spécifié en secondes ou au format MM:SS ou HH:MM:SS (applicable uniquement lors de l’affichage d’un fichier vidéo).
  • muted — Lorsque la lecture multimédia est démarrée, le son est coupé.
  • loop — Les médias seront lus en boucle de manière continue (s’applique uniquement à l’audio et à la vidéo).
  • lossy={false} — (PagedTiffHandler ) Pour utiliser des vignettes PNG au lieu de JPG pour les images Tiff
  • class={html class} — (MediaWiki 1.20+)Définit les classes (fait correspondre à l'attribut HTML class="..." de l'élément généré ‎<span>...‎</span> inclus dans un conteneur ‎<img />).

Comportement par défaut depuis MediaWiki 1.40, facultatif depuis MediaWIKI 1.36. Auparavant, la classe était appliquée directement à l'élément ‎<img />.

• • lang={language code} — (MediaWiki 1.22+) Pour les fichiers SVG contenant des instructions <switch> 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.

Le comportement par défaut réel consiste à afficher le fichier multimédia dans sa taille maximale. Cela peut entraîner des problèmes de réactivité si la largeur du fichier est supérieure à la page. Voir la tâche phab:T113101 pour plus d'informations.

Format

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

Description	Ce que vous entrez	Ce que vous obtenez
format non spécifié: <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> yes</translate> <translate> Rendered caption</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
border produit un liseré gris très fin <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> yes</translate> <translate> Rendered caption</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|border|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
frameless (sans cadre), comme miniature, respecte les préférences utilisateur pour la largeur d'image, mais sans bordure ni flottant à droite <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> yes</translate> <translate> Rendered caption</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|frameless|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
frameless (sans cadre) et border (bordure) <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> yes</translate> <translate> Rendered caption</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|frameless|border|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
frame <translate> Rendered as a floating block</translate>: <translate> yes</translate> <translate> Rendered inline</translate>: <translate> no</translate> <translate> Rendered caption</translate>: <translate> yes</translate>	... <translate> text text text</translate> [[File:example.jpg|frame|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> File:example.jpg <translate> caption</translate> <translate> text text text</translate> ...
thumb (aperçu) ou thumbnail (miniatures) <translate> Rendered as a floating block</translate>: <translate> yes</translate> <translate> Rendered inline</translate>: <translate> no</translate> <translate> Rendered caption</translate>: <translate> yes</translate>	... <translate> text text text</translate> [[File:example.jpg|thumb|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> File:example.jpg <translate> caption</translate> <translate> text text text</translate> ...

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 upright=N, 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 thumb={filename}, 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.

• 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 border, la taille peut être à la fois réduite ou agrandie à la valeur que vous indiquez.

Dans les exemples ci-dessous, la taille originale de l'image est de 400 × 267 pixels.

• Une image avec frame 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.
• La taille d'une image avec thumb ou frameless peut être réduite, mais ne peut pas être élargie au-delà de la taille originale de l'image.

Format	Réduit	Agrandi
(<translate> not specified</translate>)	[[File:example.jpg|50px]]	[[File:example.jpg|500px]]
border	[[File:example.jpg|border|50px]]	[[File:example.jpg|border|500px]]
frame	[[File:example.jpg|frame|50px]] File:example.jpg	[[File:example.jpg|frame|500px]] File:example.jpg
thumb	[[File:example.jpg|thumb|50px]] File:example.jpg	[[File:example.jpg|thumb|500px]] File:example.jpg
frameless	[[File:example.jpg|frameless|50px]]	[[File:example.jpg|frameless|500px]]

Alignement horizontal

Notez qu'en utilisant les formats frame ou thumb[nail], 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).

Description	Vous tapez	Vous obtenez
aucun alignement horizontal n'a été spécifié , ou alignement par défaut <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> yes</translate>	... <translate> text text text</translate> [[File:example.jpg|100px|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
alignement horizontal none (aucun) <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|none|100px|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
alignement horizontal centrer (centré) <translate> Rendered as a floating block</translate>: <translate> no</translate> <translate> Rendered inline</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|center|100px|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
alignement horizontal left (à gauche) <translate> Rendered as a floating block</translate>: <translate> yes</translate> <translate> Rendered inline</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|left|100px|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
alignement horizontal right (à droite) <translate> Rendered as a floating block</translate>: <translate> yes</translate> <translate> Rendered inline</translate>: <translate> no</translate>	... <translate> text text text</translate> [[File:example.jpg|right|100px|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...

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 span 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.

Afficher/Masquer le code source

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>

Pour afficher le résultat d'alignement plus clairement, les span 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: File:Example.jpg File:Example.jpg File:Example.jpg text

text text-top: File:Example.jpg File:Example.jpg File:Example.jpg text

text ^super: File:Example.jpg File:Example.jpg File:Example.jpg text

text baseline: File:Example.jpg File:Example.jpg File:Example.jpg text

text _sub: File:Example.jpg File:Example.jpg File:Example.jpg text

text default: File:Example.jpg File:Example.jpg File:Example.jpg text

text middle: File:Example.jpg File:Example.jpg File:Example.jpg text

text text-bottom: File:Example.jpg File:Example.jpg File:Example.jpg text

text bottom: File:Example.jpg File:Example.jpg File:Example.jpg 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 :
   • 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).
   • l'espacement inter-ligne supplémentaire qui peut être ajouté par les exposants et les indices.
2. 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).
3. 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.
4. 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 span). 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.
5. 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 <br clear=all> (ou si vous préférez, <div style="clear: both"></div>) 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 <div style="overflow: hidden">…</div>, ce qui efface tous les flottants à l'intérieur de l'élément div.)

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.

Description	Saisie	Résultat
lien interne	... <translate> text text text</translate> [[File:example.jpg|link=Main Page|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
lien externe	... <translate> text text text</translate> [[File:example.jpg|link=http://wikipedia.org/wiki/Test|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...
sans lien (externe ou page de fichier)	... <translate> text text text</translate> [[File:example.jpg|link=|<translate> caption</translate>]] <translate> text text text</translate> ...	... <translate> text text text</translate> <translate> caption</translate> <translate> text text text</translate> ...

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.

Affichage d'une galerie d'images

Syntaxe pour une galerie

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

<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>

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.

Les mots « center » , « left » , et « right » utilisés comme légendes crée des erreurs Linter faussement positives. Voir <translate> task <tvar name=1>T275074</tvar></translate> pour les détails.

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 page=4 et avec les vidéos, vous pouvez utiliser thumbtime=10.

Le préfixe File: 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 :

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
File:Example.jpg|Links to external website|link=https://example.com
File:Example.jpg|link=w:Main_Page|Internal link
Example.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>

est formaté comme :

• Example.jpg

  Item 1

• Example.jpg

  a link to Help:Contents

• Example.jpg
• Example.jpg
• Example.jpg

  italic caption

• Example.jpg

  Links to external website

• Example.jpg

  Internal link

• Example.jpg

  on page "Images/fr"

• Using Firefox.pdf

  page=72

Paramètre mode

Version de MediaWiki :

<translate> ≥</translate> 1.22

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

• 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. Les rangées dans ce mode adaptatif (responsive) s'organisent suivant la largeur de l'écran.
• packed-overlay affiche la légende au-dessus de l'image, dans une boîte blanche semi-transparente.
• packed-hover est similaire à packed-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 :

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Qui donne (mode : packed-hover) :

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

• Pterois volitans Manado-e.jpg

  Pterois volitans (Red Lionfish)

• Macropodus opercularis - front (aka).jpg

  Macropodus opercularis (Paradise fish)

• Canthigaster valentini 1.jpg

  Canthigaster valentini (Valentinni's sharpnose puffer)

• Flughahn.jpg

  File:POTY ribbon 2007.svg Dactylopterus volitans (Flying gurnard)

• Fishmarket 01.jpg

  Semicossyphus pulcher (California Sheephead)

• Pseudorasbora parva(edited version).jpg

  Pseudorasbora parva (Topmouth gudgeon)

• MC Rotfeuerfisch.jpg

  Pterois antennata (Antennata Lionfish)

• Cleaning station konan.jpg

  Novaculichthys taeniourus

• Synchiropus splendidus 2 Luc Viatour.jpg

  Synchiropus splendidus (Mandarin fish)

• Psetta maxima Luc Viatour.jpg

  Psetta maxima (Turbot)

• Australian blenny.jpg

  Ecsenius axelrodi

Exemples des autres modes :

mode="traditional"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

mode="nolines"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

mode="packed"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

mode="packed-overlay"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

mode="packed-hover"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

<td class="mw-version-versionbox" title="<translate nowrap> The latest stable version is <tvar name=1>1.41</tvar></translate>">

<translate> ≥</translate> 1.28

<translate> MediaWiki version:</translate>

mode="slideshow"

• Astronotus ocellatus.jpg

  Astronotus ocellatus (Oscar)

• Salmonlarvakils.jpg

  Salmo salar (Salmon Larva)

• Georgia Aquarium - Giant Grouper.jpg

  Epinephelus lanceolatus (Giant grouper)

• Pterois volitans Manado-e.jpg

  Pterois volitans (Red Lionfish)

• Macropodus opercularis - front (aka).jpg

  Macropodus opercularis (Paradise fish)

• Canthigaster valentini 1.jpg

  Canthigaster valentini (Valentinni's sharpnose puffer)

• Flughahn.jpg

  File:POTY ribbon 2007.svg Dactylopterus volitans (Flying gurnard)

• Fishmarket 01.jpg

  Semicossyphus pulcher (California Sheephead)

• Pseudorasbora parva(edited version).jpg

  Pseudorasbora parva (Topmouth gudgeon)

• MC Rotfeuerfisch.jpg

  Pterois antennata (Antennata Lionfish)

• Cleaning station konan.jpg

  Novaculichthys taeniourus

• Synchiropus splendidus 2 Luc Viatour.jpg

  Synchiropus splendidus (Mandarin fish)

• Psetta maxima Luc Viatour.jpg

  Psetta maxima (Turbot)

• Australian blenny.jpg

  Ecsenius axelrodi

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)  :

<gallery {parameters}>
{images}
</gallery>

• caption="{caption}" : (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
• widths={width}px: définit la largeur (max) des images ; par défaut 120px (pas d'effet si le mode correspond à l'une des valeurs suivantes : packed, packed-overlay, packed-hover, slideshow). (notez le pluriel : widths).
• heights={heights}px : définit la hauteur (max) des images ; par défaut 120px (notez le pluriel : heights). (pas d'effet si le mode vaut slideshow).
• perrow={integer} : définit le nombre d'images par rangées. (pas d'effet si le mode correspond à l'une des valeurs suivantes : packed, packed-overlay, packed-hover, slideshow). 0 signifie ajustement automatique basé sur la largeur de l'écran.
• showfilename={anything} : affiche les noms des fichiers d'images dans les légendes individuelles de chaque image (1.17+).
• mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow} : Voir la section ci-dessus (1.22+ ; 1.28+ pour « slideshow »).
• showthumbnails: pour le mode «  diaporama » (slideshow) seulement, affiche par défaut la bande avec les vignettes des images sous le diaporama (1.29+).

Les paramètres de largeur et de hauteur sont davantage pris comme suggestion que comme valeurs strictes pour les modes packed (et leurs dérivés). Les modes packed ajusteront la largeur des images de sorte à rendre toutes les rangées de même largeur.

Exemple 1

Syntaxe :

<gallery widths=300px heights=200px>
File:Example.jpg|Lorem ipsum
File:Example.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>

Résultat :

• Example.jpg

  Lorem ipsum

• Example.jpg

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Exemple 2

Syntaxe :

<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

A pour résultat :

• sunflowers are groovy
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg
• Example.jpg

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.

[[File:Example.jpg|220px]]
[[File:Example.jpg|100px]]
[[File:Example.jpg|150px]]
[[File:Example.jpg|250px]]
[[File:Example.jpg|200px]]
[[File:Example.jpg|50px]]
[[File:Example.jpg|220px]]
[[File:Example.jpg|175px]]

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

<div><ul> 
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

• File:Example.jpg

  Caption 1
• File:Example.jpg

  Caption 2
• File:Example.jpg

  Caption 3
• File:Example.jpg

  Caption 4
• File:Example.jpg

  Caption 5
• File:Example.jpg

  Caption 6
• File:Example.jpg

  Caption 7
• File:Example.jpg

  Caption 8

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

<div><ul> 
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

• File:Example.jpg

  Caption 1
• File:Example.jpg

  Caption 2
• File:Example.jpg

  Caption 3
• File:Example.jpg

  Caption 4
• File:Example.jpg

  Caption 5
• File:Example.jpg

  Caption 6
• File:Example.jpg

  Caption 7
• File:Example.jpg

  Caption 8

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 Aide:Lier des fichiers .

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 :

[[File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]

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

[[File:MediaWiki-2020-logo.svg|50px|link=http://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 :

[[File:MediaWiki-2020-logo.svg|50px|link=]]

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 Media: 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.

[[Special:Redirect/file/Wikipedia.png]]

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

https://www.mediawiki.org/w/index.php?title=Special:Redirect/file/Wikipedia.png&width=100&height=100

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 Mots magiques peuvent être utilisés.

{{filepath:MediaWiki-2020-logo.svg}}

Devient :

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

{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}

Devient :

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é.

[http://url.for/some/image.png]

Ou avec un texte différent affiché :

[http://url.for/some/image.png 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 '''<del>riche</del>'''
''<ins>texte du lien</ins>'' .]

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 Manuel:$wgAllowExternalImages ), 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
• Manual:Adding support for new filetypes
• phab:T113101 - problèmes interactifs
• Peut-on exclure certaines pages d'images ?