Aide:Insérer une image

Un article de WikiDoc.

Sommaire

Avant d'insérer une image dans un chapitre, vous devez d'abord transférer cette image sur le serveur de WikiDoc

Les images ne peuvent être insérées dans une page de WikiDoc que si elles ont été préalablement téléchargées sur le serveur de WikiDoc. Si les images que vous voulez insérer ne sont pas encore sur le serveur, vous pouvez les y ajouter, par un processus appelé "importer", en cliquant sur le lien dans la boîte à outils de la colonne de gauche:
Importer un fichier.

Sur la page Importer un fichier, vous verrez un formulaire avec ces deux champs:

Image:Upload-file-1-.jpg

Dans le champ: Nom du fichier source, cliquez sur le bouton "parcourir" vous permettant de trouver le fichier sur le disque dur de votre ordinateur.

Dans le champ: Nom sous lequel le fichier sera enregistré, saisissez simplement le nom que vous souhaitez donner à l'image sur WikiDoc. Choisissez un nom explicite de manière à ce que l'image soit indexée clairement par les moteurs de recherche.

Cliquez ensuite sur le bouton: Importer un fichier, et votre image apparaîtra.

Une fois qu'une image a été ajoutée sur le serveur de WikiDoc, elle peut ensuite être insérée sur n'importe quelle page de WikiDoc. Vous pouvez trouver les noms de fichiers des images qui ont été transférées sur WikiDoc sur la liste des fichiers d'image.
Vous aurez besoin de connaître le nom de fichier de l'image pour insérer cette image. Astuce: copier le nom du fichier lorsque vous l'importez pour que vous puissiez l'insérer facilement sur la page de WikiDoc souhaitée.
Vous pouvez voir les images qui ont été transférées sur WikiDoc dans la galerie des nouvelles images

Instructions élémentaires pour l'insertion d'images sur une page de WikiDoc

Seules les images qui ont été transférées sur WikiDoc peuvent être utilisées. Pour télécharger des images, utiliser la page de téléchargement.

Modalités d'insertion

Les images sont placées dans une page à l'aide d'une syntaxe spécifique. Comme pour la saisie de texte, ceci se fait dans la fenêtre d'édition de la page en cours de modification. Cliquer sur l'onglet Modifier en haut de la page dans laquelle vous souhaitez insérer votre image.

Avant d'éditer le code, prévoyez l'emplacement de cette image dans la page. Cela signifie généralement de réfléchir à la manière dont le texte entourera cette image. Par exemple, il peut être préférable que l'image soit positionnée en haut de section. Si c'est ce que vous souhaitez, alors laissez une ligne vide immédiatement sous le titre ou immediatement au dessus, et saisissez le wikitexte adapté (voir plus loin). Cette ligne sera ignorée sauf pour la production d'image.

Cliquez sur Prévisualiser en bas de la fenêtre d'édition et attendez que l'image apparaisse sur la page. Si l'image a été placée à gauche: left ou à droite: right, le texte entourera l'image depuis le début de la section. Si elle a été placée au centre: center, ou si vous avez choisi l'option none, le texte ne peut pas encadrer l'image, il sera placé en dessous de l'image. Si le résultat n'est pas celui escompté, il est possible de recommencer autant que nécessaire. Quand cela vous convient, cliquez sur Publier en bas de la fenêtre d'édition.

La plupart des images sur un wiki sont trop grandes pour être présentées à leur taille réelle. Dans presque la plupart des cas, une réduction de l'image est nécessaire. Le serveur attend de savoir où placer l'image, ainsi que le genre de cadre nécessaire, s'il faut une légende et comment le texte encadrera cette image. Avec toutes ces exigences à l'esprit, vous gagnerez un temps précieux.

Voici, ci-dessous, une sélection d'exemples et la syntaxe appropriée.

Exemples

Le Résultat La syntaxe wiki
Une image:

Image:humanbody.jpg 

Une image: 
[[Image:humanbody.jpg]]
  • Il est possible d'insérer une image à l'aide de la barre d'outils de WikiDoc, située au dessus du champ d'édition
Légende dans l'info-bulle:

Légende 

Légende dans l'info-bulle:
[[Image:humanbody.jpg|Légende]]
  • Ici la légende n'est pas affichée
  • Cette légende est une alternative textuelle qui apparaît dans une info-bulle lorsque le curseur de la souris survole l'image.
  • Cette légende est une alternative textuelle qui apparaît si l'image n'a pas pu être téléchargée.
  • A défaut de légende, ce sera le nom du fichier qui apparaîtra dans l'info-bulle, (ici ce serait: humanbody.jpg).
Sur le côté droit de la page encadré et avec une légende:
Anatomie
Anatomie

Sur le côté droit de la page encadré et avec une légende:
[[Image:humanbody.jpg|frame|Anatomie]]
  • Un cadre place automatiquement l'image à droite et la légende sous l'image.
  • La légende apparaît également dans l'info-bulle lorsque l'on survole l'image.
Sur le côté droit de la page sans légende visible:
Anatomie
Sur le côté droit de la page ''sans'' légende visible:
[[Image:humanbody.jpg|right|Anatomie]]
  • La rubrique d'aide sur la syntaxe étendue explique plus d'options pour les images.
Lien interne direct à la page de description de l'image:

Image:humanbody.jpg 

Lien interne direct à la page de description
de l'image:
[[:Image:humanbody.jpg]]
  • Cliquer sur l'image conduit aussi à cette page de description
Lien interne direct à la page de description de l'image sans afficher son nom de fichier:

Anatomie 

Lien interne direct à la page de description de l'image 
sans afficher son nom de fichier:
[[media:humanbody.jpg|Anatomie]]
  • Pour insérer des liens vers des images plutôt que de les inclure dans la page, utiliser un lien se référant à l'espace de noms "Media".
  • On peut également créer un lien de style externe menant au fichier en prennant son adresse URL.
Il est possible d'utiliser les balises HTML: 
Exemple:
<div style="display:inline;
width:220px; float:right;">
Placer l'image ici </div>
Utiliser la syntaxe wiki pour créer un tableau et placer les images dans des cellules, cela permet de mieux contrôler la présentation: 
Exemple: {| align=right
|-
| 
Placer l'image ici
|}

Voir la politique d'utilisation des images utilisée comme ligne directrice sur WikiDoc.
Toute l'information sur cette page est attribuée à Wikipédia et ses contributeurs.

Syntaxe détaillée pour l'insertion d'images

Apparence

  • "thumbnail" ou "thumb": cette option permet de générer automatiquement une version réduite de l'image sous forme de vignette, dans un cadre. La légende sera placée en dessous de l'image. Par défaut, l'image sera alignée à droite à moins de préciser un autre positionnement (voir ci-dessous).
  • "frame": l'image est placée dans un cadre comme avec l'option thumb, et accepte une légende mais n'est disponible que dans son format original et l'icône "loupe" est absente. Par défaut, l'image sera alignée à droite à moins de préciser un autre positionnement (voir ci-dessous).
  • aucune spécification ou "frameless": la taille originale de l'image est préservée, mais il n'y a pas de cadre autour. S'il y a une légende, elle ne sera pas vue.
  • "border": comme avec aucune spécification, mais avec un cadre autour de l'image.

Position sur la page par rapport au texte

  • "right": l'image (avec ou sans son cadre) est placée sur le côté droit de la page. Le texte s'affiche le long de celle-ci du côté gauche.
  • "left": l'image (avec ou sans son cadre) est placée sur le côté gauche de la page. Le texte s'affiche le long de celle-ci du côté droit.
  • "center":l'image (avec ou sans son cadre) est placée au centre de la page. Le texte s'affiche en dessous.
  • "none": l'image (avec ou sans son cadre) est placée sur le côté gauche de la page mais le texte s'affiche en dessous.
  • aucune spécification: l'image (avec ou sans son cadre) est placée dans la suite du texte ou à droite s'il s'agit d'une vignette.

Taille

  • thumb: Par défaut, la vignette aura 180pixels de large.
  • 100px: Dimensionne l'image à 100 pixels de large. La hauteur est redimensionnée automatiquement. Si vous spécifiez thumb et une valeur en pixels, la largeur de la vignette sera celle que vous avez choisie. Si la taille initiale de l'image est plus petite que celle spécifiée, cela ne changera rien.
  • 100x200px: Dimensionne l'image pour ne pas être plus large que 100 pixels et pas plus haute que 200 pixels. L'image gardera les mêmes proportions.

Légende

Tout élément qui ne peut pas être identifié comme étant une option citée ci-dessus est supposé être le texte de la légende .

Nouvelle syntaxe avancée pour l'insertion d'images

Anatomie
Anatomie

Cette nouvelle syntaxe est compatible avec l'ancienne, il n'est donc pas nécessaire de corriger les articles utilisant l'ancienne syntaxe.
Dans cette syntaxe: [[Image:nom de fichier|options]], comme par exemple à gauche: [[Image:Humanbody.jpg|thumb|100px|left|Anatomie]]), plusieurs options co-existent qui contrôlent le positionnement et la taille de l'image: right, left, center, none, px, thumb, frame, et une légende.

Human Body
Human Body

Les options peuvent être combinées, des barres verticales ("|") sont utilisées dans ce cas, pour les séparer les unes des autres. Les options peuvent être mises dans n'importe quel ordre.
Une option inconnue ou incomprise sera interprétée comme la légende, mais ceci ne se produit que si l'option thumb est spécifiée, avec les autres options cela apparaîtra dans une info-bulle.
S'il y a deux options inconnues ou plus, la dernière option prend la main: [[Image:Humanbody.jpg|thumb|100px|right|Anatomie|Human Body]] (comme sur l'image de droite).

Voici plusieurs exemples:

  • right :
Anatomie

Avec cette syntaxe [[Image:Humanbody.jpg|right|70px|Anatomie]], l'image est alignée à droite (comme ici) et le texte flotte à gauche.

  • left :
Anatomie

Avec cette syntaxe [[Image:Humanbody.jpg|left|70px|Anatomie]], l'image est alignée à gauche (comme ici) et le texte flotte à droite.

  • center :
Anatomie

Avec cette syntaxe [[Image:Humanbody.jpg|center|70px|Anatomie]], l'image est centrée, et le texte débute en dessous de l'image.

  • none :
Anatomie

Avec cette syntaxe [[Image:Humanbody.jpg|none|70px|Anatomie]], l'image est alignée à gauche, et le texte ne flotte pas à droite (ni évidemment à gauche), mais débute en dessous de l'image.

Notes

  • Ces quatre options sont incompatibles:[[Image:Humanbody.jpg|none|right|center|left|70px|]]
  • Si elles sont employées, ce sera la dernière qui sera appliquée, comme ici à gauche.



Attention

S'il y a une barre verticale (|) après la dernière option avant la fermeture des crochets droits (]]), la légende et l'info-bulle ne s'affichent pas, comme à gauche: [[Image:Humanbody.jpg|thumb|Ce texte n'est pas montré|70px|left|]]

Ce texte est montré
Ce texte est montré

S'il n'y a rien après la dernière option et avant la fermeture des crochets droits (]]: [[Image:Humanbody.jpg|thumb|Ce texte est montré|70px|right]] comme à droite, la légende et l'info-bulle s'affichent.

size px :
Cette option conduit à définir la largeur de l'image en pixels : [[Image:Humanbody.jpg|right|50px|]] (comme à droite). La hauteur est redimensionnée automatiquement.

Notes

Le fait de spécifier la taille, ne modifie pas seulement l'apparence de l'image, cela génère une version redimensionnée de l'image. Ceci se produit que vous utilisiez ou non size en conjonction avec l'option thumb.
Cela signifie que c'est le serveur de WikiDoc qui fait ce travail et pas le navigateur de l'utilisateur. Ceci permet de charger plus vite les pages. Cela signifie aussi que des images de grande taille peuvent être stockées sur le serveur sans ralentir le navigateur des visiteurs du site, puisque seules les données concernant la taille de présentation de l'image dans l'article sont transmises.
Depuis la version MediaWiki 1.5, la taille associée à l'option thumb (par défaut 180px) peut être définie dans les préférences du "wikinaute", aussi il est recommandé de ne pas spécifier "px", de manière à respecter les choix de l'utilisateur (sauf si, pour des raisons spéciales, une taille particulière est requise ou si la taille spécifiée est en dehors des limites 120–300px qui ne peuvent être mises dans les préférences).
Si vous choisissez l'option "frame", l'image ne sera pas réduite, et aucune spécification de taille ne sera générée. L'image sera présentée à sa dimension réelle.
S'il y a deux options "size" ou plus, seule la dernière sera effective: [[Image:Humanbody.jpg|right|50px|80px]] (comme à droite).
thumbnail ou thumb 
Anatomie
Anatomie
L'option thumb ou thumb génère une vignette. Elle est automatiquement dimensionnée lorsque aucune spécification de taille en pixels n'est spécifiée. Sans les options left, center, ou none, l'image est placée par défaut à droite. Si l'image a une légende, celle-ci est affichée dans la marge inférieure. Comme [[Image:Humanbody.jpg|thumbnail|left|100px|]] (à gauche, pas de légende) et [[Image:Humanbody.jpg|thumb|Anatomie]] (à droite, avec une légende). Attention: l'option thumbnail ou thumb ne peut pas être utilisée dans des listes.


Ceci est un puzzle, regardez le dans sa taille réelle.
Ceci est un puzzle, regardez le dans sa taille réelle.
Une "icône loupe" est placée dans l'angle inférieur de la vignette. L'image elle-même ainsi que l'icône loupe sont des liens dirigés vers la page de description de l'image, sur laquelle l'image est à sa taille réelle. L'icône loupe est assortie d'une info-bulle "Agrandir" même si cela ne s'applique pas, parce qu'elle conduit à l'image dans sa taille réelle qui dans certains cas, est plus grande. Par exemple à droite, l'icône loupe avec une info-bulle "Agrandir" apparaît alors qu'elle ne conduit pas à une image de plus grande taille.
frame 
Anatomie
Anatomie
Avec cette option, l'image est entourée par un cadre dans sa taille réelle, qu'il y ait les options "thumb" ou "size". La légende, si elle existe, est visible dans le cadre. Sans les options left, center, et none, l'image est par défaut à droite: [[Image:Humanbody.jpg|frame|thumbnail|50px|Anatomie]].

Avec aucune autre option que size en px ou texte de légende, l'image intégrée est placée à la suite du texte.
Par exemple: 

texte texte texte texte texte texte
[[Image:Humanbody.jpg|150px|Anatomie]]
texte texte texte texte texte
[[Image:tst.jpg|100px|Ceci est un puzzle]]
texte texte texte texte

donne le résultat suivant:

texte texte texte texte texte texte Anatomie texte texte texte texte texte Ceci est un puzzle texte texte texte texte


L'option none peut être utilisée pour avoir des vignettes sans alignement gauche ou droit. Ceci est utile pour les tableaux. Voici un exemple:

Comment utiliser none
pour les tableaux
Corps humain
Anatomie
Anatomie
 [[Image:Humanbody.jpg|thumb|none|Anatomie]]
Squelette
Squelette
Squelette
 [[Image:Squelette.jpg‎|thumb|50px|none|Squelette]]

Vignette avec légende qui présente un ou plusieurs liens

Ceci est une image du squelette humain de WikiDoc
Ceci est une image du squelette humain de WikiDoc
Il est possible d'inclure des liens dans le texte de la légende, comme ici:

[[Image:Squelette.jpg‎|right|thumb|50px| Ceci est une image du [[squelette humain]] de WikiDoc]]



Il faut simplement faire attention au nombre des crochets droits qui encadrent ces liens. Un seul crochet en plus ou en moins et l'image n'apparaît pas.

Autres options de légende

Ceci est un lien vers un article sur l'anatomie dans Wikipédia
Ceci est un lien vers un article sur
l'anatomie
dans Wikipédia
D'autres options sont possibles concernant la légende:

Texte de différentes couleurs, lien externe,...
[[Image:Humanbody.jpg|right|thumbnail|<div align="center">Ceci est <span style="color: green">le </span><br /> [http://fr.wikipedia.org/wiki/Anatomie corps humain]<br /> '''dans <span style="color: red">Wikipédia</span>'''</div>]]



Toutes les options de la syntaxe habituelle fonctionnent dans une légende.

Comment créer une galerie d'images?

Si vous utilisez le texte ci-dessous avec la balise HTML gallery, cela est possible.
Il suffit d'entrer le noms des différents fichiers d'image comme ceci: 

<gallery>
Image:humanbody.jpg 

Image:Femoral artery and branches.jpg

Image:Femoral-triangle.jpg

Image:Femoral-traingle-2.jpg

Image:Femoral-artery1.jpg
</gallery>

Le code génèrera la galerie suivante:

Ceci est un autre exemple de présentation de galerie

Les images et la galerie sont centrées avec la syntaxe ci-dessous: 

<div align="center">

<gallery "center">

Image:humanbody.jpg 

Image:Femoral artery and branches.jpg

Image:Femoral-triangle.jpg

Image:Femoral-traingle-2.jpg

Image:Femoral-artery1.jpg

</gallery>
</div>

Comment procéder pour ne placer que 3 images par ligne dans la galerie?

La syntaxe suivante:

<gallery perRow="3">
Image:humanbody.jpg 

Image:Femoral artery and branches.jpg

Image:Femoral-triangle.jpg

Image:Femoral-traingle-2.jpg

Image:Femoral-artery1.jpg
</gallery>

donnera le résultat ci-dessous:

Comment placer du texte sous l'image?

Avec, par exemple la syntaxe HTML suivante: 

{| 
|-
|[[Image:Femoral artery and branches.jpg|150px]]

|[[Image:Femoral-triangle.jpg|150px]]

|[[Image:Femoral-traingle-2.jpg|150px]]

|[[Image:Femoral-artery1.jpg|150px]]
|-
|<small>'''Image A:''' Artère fémorale</small>

|<small>'''Image B:''' Triangle fémoral</small>

|<small>'''Image C:'''</small>

|<small>'''Image D:'''</small>
|}

Voici le résultat:

Image A: Artère fémorale Image B: Triangle fémoral Image C: Image D:

Comment aligner la galerie à droite ou à gauche de façon à placer du texte à côté?

Pour obtenir le résultat suivant:

Artériole normale

Artériole avec HTA et épaississement de la paroi

Artériole avec cardiomyopathie hypertrophique

Comparativcement à l'artériole normale sur la gauche, l'artériole du patient ayant une HTA (milieu) présente une hypertrophie artériolaire modérée et une fibrose. A droite il s'agit d'un patient avec une cardiomyopathie hypertrophique, qui présente un plus important épaississement péri-artériolaire et une fibrose. Cet épaississement de la paroi des artérioles intramyocardiques provoque une augmentation du rapport paroi/lumière, une ischémie sub-endocardique et une altération des capacités circulatoires coronariennes.

Utilisez ce code: 

<gallery align="right">
Image:120px-Arteriole-normal.jpg|Artériole normale

Image:120px-Arteriole-hypertensive.jpg|Artériole avec HTA et épaississement de la paroi

Image:120px-Arteriole-hcm.jpg|Artériole avec cardiomyopathie hypertrophique

</gallery>
Comparativcement à l'artériole normale sur la gauche, 
l'arterioles du patient ayant une HTA (milieu)
présente une hypertrophie artériolaire  modérée et une fibrose.
A droite il s'agit d'un patient avec une cardiomyopathie hypertrophique,
qui présente  un plus important épaississement 
périartériolaire et une fibrose. Cet épaississement 
de la paroi des artérioles intramyocardiques provoque 
une augmentation du rapport paroi/lumière, une ischémie 
sub-endocardique et une altération des capacités 
circulatoires coronariennes.

Problèmes d'image flottante

Parfois, l'image ne se place pa à l'endroit où on le désire: elle est repoussée plus bas dans la page ou bien le texte qui l'accompagne ne l'encadre pas correctement ou un autre texte vient se glisser à côté de l'image qui ne s'y rapporte pas.
Pour empêcher ce "flottement", juste après le placement de l'image, on peut ajouter la commande {{Clr}} qui appele un modèle spécifique. Ce modèle affiche une rupture de ligne simple et permet aux blocs flottants de texte et d'images de rester à la place souhaitée. On peut également placer ce modèle après un texte.
Il est également possible de placer, juste après l'image, la balise suivante:<br style="clear:both"/>. Cela permettra au texte qui suit de ne pas flotter et d'occuper à nouveau toute la largeur de la page.

Exemple

Code Wiki Rendu

[[Image:Humanbody.jpg|left|50px|]]L'espace laissé libre autour
[[Image:Humanbody.jpg|thumb|right|150px|Bloc flottant à droite]]des blocs flottants d'image est occupé par du texte. Si ce texte ne remplit pas tout l'espace, l'espace laissé libre est cependant préservé.
{{Clr}}
Texte beaucoup plus long, demandant toute la largeur, qui est donc placé en dessous des blocs flottants

Bloc flottant à gauche
L'espace laissé libre autour
Bloc flottant à droite
Bloc flottant à droite
des blocs flottants d'image est occupé par du texte. Si ce texte ne remplit pas tout l'espace, l'espace laissé libre est cependant préservé.

Texte beaucoup plus long, demandant toute la largeur, qui est donc placé en dessous des blocs flottants

Insérer un lien vers une page de description détaillée de l'image

Si vous souhaitez insérer un lien vers la page de description détaillée d'une image, utilisez un code de lien interne avant "image:" comme ceci: 

[[:image:humanbody.jpg|Anatomie]]

qui donnera le résultat suivant: Anatomie


Regardez cette vidéo qui explique comment importer une image

En anglais


Voir aussi

Liens internes

Liens externes

Récupérée de « http://fr.wikidoc.org/index.php/Aide:Ins%C3%A9rer_une_image »
Autres langues