Aide:Insérer une image : Différence entre versions

Version actuelle en date du 19 avril 2011 à 17:21

Il est possible de télécharger des images sur le serveur grâce à la page Special:Upload, puis de les insérer dans les pages de différentes manières.

Notez que, pour Solarpedia, "image" désigne n'importe quel fichier importé sur le serveur. Seule la procédure d'insertion dans une page est différente entre une image et un autre fichier.

Téléchargement de l'image

Pour télécharger une image ou n'importe quel autre fichier sur le serveur, il faut passer par la page Special:Upload.

Fichier:Aide FR Upload.png

La page de téléchargement Special:Upload

.

Les informations demandées pendant le téléchargement sont :

Le nom du fichier local
Le nom du fichier une fois téléchargé
Le résumé, qui composera la page de description de l'image une fois téléchargé. Il peut inclure les informations sur le fichier, sa licence, une catégorie, etc. La page de description peut être modifiée ultérieurement.

L'image peut ainsi être trouvée sur la page [[Image:Nom]] où "Nom" est le nom sélectionné lors du téléchargement.

Nom de l'image

Le nom d'origine (sur votre ordinateur) de l'image a peu d'importance : depuis la version 1.5, il est possible de renommer l'image pendant le téléchargement.

Les noms des images sont sensibles à la casse, en particulier l'extension. La première lettre peut être indifférente à la casse selon le projet, voir Aide:Nom de page. Le logiciel convertit automatiquement les espaces en soulignements et les caractères spéciaux.

Si le nom du fichier choisi correspond à un nom déjà existant, alors le fichier téléchargé remplacera le fichier existant. Il est possible de revenir à une ancienne version si besoin, en utilisant la page d'image.

Types de fichiers supportés

À part le texte, Solarpedia permet d'insérer les médias suivant dans les pages :

Les images, aux formats PNG, GIF, JPG/JPEG.
Les sons au format OGG.

Il est possible de télécharger d'autres types de fichiers, et de faire des liens vers eux, mais ils ne seront pas affichés par Solarpedia (il vous faudra d'abord les télécharger sur votre ordinateur pour les visualiser). C'est le cas par exemple des images au format SVG.

Les extensions autorisées sont définies dans le fichier LocalSettings.php :

$wgFileExtensions = array( 'png', 'jpg', 'jpeg', 'ogg','doc','xls','ppt','mp3','sxc','pdf' );

Il existe aussi une liste des extensions interdites dans DefaultSettings.php. Par défaut, et pour des raisons de sécurité, les fichiers exécutables sont interdits.

Il peut y avoir une limite de taille, souvent de 6,5 Mo.

Images produites automatiquement

Solarpedia crée aussi certaines images automatiquement à partir du code wiki :

Formules converties si besoin en images PNG.
Frises chronologiques
Vignettes d'images téléchargées, pour améliorer l'utilisation de la bande passante.

Pour les tableaux, le système produit du HTML et non un fichier, à part dans certains cas, comme avec des cellules vides colorées.

Liens vers une image

Il existe trois façons de créer un lien vers une image : pour une image nommée picture.png par exemple,

insère l'image dans l'article. La syntaxe complète est décrite plus bas.
[[:Image:picture.png]] crée un lien interne vers la page de description de l'image
crée un lien vers le fichier lui-même, permettant de le télécharger directement.

Ces exemples donnent respectivement :

Image:picture.png

Les liens redirigés fonctionnent comme d'habitude.

Les liens interwiki donnent un lien vers la page de description de l'image. Pour inclure l'image elle-même, il faut utiliser un lien externe (avec l'URL complète).

Pour utiliser une image qui redirige vers une page, voir Help:Navigational image.

Insertion d'une image interne dans une page

Il s'agit ici d'inclure une image téléchargée sur le projet dans une page. Seules les images peuvent être incluses dans une page ; les sons et les vidéos ne seront pas joués automatiquement.

Quand on clique sur une image dans une page, le lien redirige vers la page de description de l'image. Voir Aide:Page d'image pour plus de détails.

La syntaxe de base pour inclure une image est :

[[Image:''Nom de l'image avec l'extension''|''option1''|''option2''|...|''Légende'']]

Seul le nom de l'image est obligatoire, le reste est facultatif. Les options servent à contrôler la position, la taille et le cadre de l'image et sont décrites plus loin. L'ordre des options n'importe pas, mais si plusieurs options contradictoires sont données, la dernière prime

Légende

La légende peut contenir du code wiki, des liens, etc. Elle se trouve après la dernière barre verticale dans le lien ; pour ne pas avoir de légende, il faut donc écrire par exemple [[Image:Nom.png|option|]].

L'aspect de la légende peut varier :

Avec un cadre ou une vignette, la légende si elle existe apparaît sous l'image.
Sans cadre, la légende apparaît dans une info-bulle lorsque la souris passe sur l'image.
Dans ce dernier cas, si aucune légende n'est donnée, l'info-bulle affiche le nom du fichier.

Les liens externes sont autorisés dans la légende, mais uniquement dans la forme sans crochets (écrit en toutes lettres). Si l'URL complète est trop longue et ne s'affiche pas correctement, le lien marche tout de même.

Taille

Sans précision, l'image s'affichera en pleine taille. Il est toutefois possible de préciser la taille affichée, par deux moyens : soit explicitement par la taille en pixels, soit en affichant une vignette.

La taille est sélectionnée explicitement avec la syntaxe :

[[Image:Solarpedia logo.png|10px|]] qui donne :
[[Image:Solarpedia logo.png|50px|]] qui donne :
[[Image:Solarpedia logo.png|100px|]] qui donne :

Le chiffre avant px donne la largeur de l'image en pixels. Solarpedia redimensionne automatiquement la hauteur de manière à conserver l'aspect de l'image.

Vignette

Pour obtenir une vignette, ajouter l'option thumb (ou "thumbnail"). Si aucune taille n'est précisée, la taille sera celle choisie par l'utilisateur dans ses préférences. Il est conseillé de ne pas imposer de taille pour laisser les choix des utilisateurs primer.

Exemple :

[[Image:Solarpedia logo.png|thumb|Vignette sans taille imposée]] qui donne

Vignette sans taille imposée

L'icône et l'image sont toutes deux un lien vers la page de description de l'image.

Position sur la page

Par défaut, une image est placée dans la suite du texte, ou à droite s'il s'agit d'une vignette. Il est possible de contrôler la position avec les options left, right, center ou none. Ces options contrôlent aussi l'adaptation du texte autour de l'image.

Image à gauche

L'option left place l'image à gauche. Le texte qui suit est flottant à droite de l'image. Si une seconde image est placée immédiatement après, elle se trouve juste à droite de la première. S'il y a du texte entre les deux images, alors la deuxième image est en bas à droite de la première, sous le texte.

demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Texte entre la troisième et la quatrième image.

demo

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Texte après la quatrième image.

Avec l'option none, l'image se trouve à gauche, mais le texte commence en-dessous de l'image :

demo

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupta

Image à droite

L'option right place l'image à droite. Le texte qui suit flotte à sa gauche. Par contre, si une autre image suit, elle est placée à droite à nouveau, sous la première.

Fichier:Tst.png

demo

zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Après la première image.

Fichier:Tst.png

demo

consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril Après la deuxième image.

Image au centre

Avec l'option center, l'image est centrée et le texte recommence en-dessous de l'image :

Texte avant l'image

Fichier:Tst.png

demo

Texte après l'image.

Cadre

L'option frame (ou framed) permet d'ajouter un cadre à l'image. Dans ce cas la légende s'affiche en-dessous de l'image. Le cadre est automatiquement ajouté par l'option "thumb".

Exemple :

Fichier:Tst.png

demo

Alignement du texte

Pour que le texte occupe de nouveau toute la largeur après une image, il faut insérer le code <br style="clear:both;" />. Ceci empêche le texte qui suit de flotter.

Texte superposé à une image

Il est possible de superposer du texte, des liens et des images à une image, ce qui peut être utile pour les cartes par exemple. Il faut alors utiliser utiliser la balise HTML "div" :

<div style="position: relative">[[Image:Map South Holland.png]]
<div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 10px; top: 40px">
{| style="background:transparent"
|- 
|[[w:fr:Hollande méridionale|Hollande méridionale]] (Pays-bas)
|}
</div>
</div>

ce qui donne

Fichier:Map South Holland.png

Fichier:Tst.png

Hollande méridionale (Pays-bas)

Comme démontré, les petites images peuvent aussi se recouvrir l'une l'autre, donc l'ordre dans lequel elles sont listées est important.

Exemple où toutes les étiquettes sont superposées :

<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]]
<div style="position: absolute; left: 5px; top: 25px">
{| style="background:transparent"
|- 
|[[w:en:Sluis|Sluis]]
|}
</div>
<div style="position: absolute; left: 50px; top: 40px">
{| style="background:transparent"
|- 
|[[w:en:Terneuzen|Terneuzen]]
|}
</div>
<div style="position: absolute; left: 100px; top: 25px">
{| style="background:transparent"
|- 
|[[w:en:Hulst|Hulst]]
|}
</div>
</div>

donne

Fichier:Zeeuws Vlaanderen.png

Sluis

Terneuzen

Hulst

Ainsi toutes les étiquettes et les symboles (comme un point pour une ville) peuvent être superposés sur un fond de carte qui ne monterait que la topologie. Il est alors possible de changer les symboles, d'avoir des liens, de traduire la carte facilement, etc.

Cependant, le résultat peut dépendre des réglages de chaque utilisateur, comme :

la taille de la police (éviter les chevauchements)
l'utilisation d'une couleur de fond pour les liens
si les images sont montrées avec un bord.

Création d'une galerie d'images

La balise gallery est un moyen rapide de montrer des vignettes sur quatre colonnes. Il suffit d'entrer le nom de l'image et une éventuelle légende, sans crochets. Si une entrée contient autre chose qu'une image, rien ne s'affiche. Exemple :

<gallery>
A-L
Image:Drenthe-Position.png|[[w:Drenthe|Drenthe]], la province la moins peuplée
Image:Flevoland-Position.png
Image:Friesland-Position.png
[[Friesland]] est magnifique
Image:Gelderland-Position.png
Image:Groningen-Position.png
Image:Limburg-Position.png
M-Z
Image:Noord_Brabant-Position.png 
Image:Noord_Holland-Position.png
Image:Overijssel-Position.png
Image:Zuid_Holland-Position.png|[[w:South Holland|South Holland]], la province la plus peuplée
Image:Utrecht-Position.png
Image:Zeeland-Position.png
</gallery>

donne :

A-L
Drenthe-Position.png

Drenthe, la province la moins peuplée
Flevoland-Position.png
Friesland-Position.png
Gelderland-Position.png
Groningen-Position.png
Limburg-Position.png
M-Z
Noord Brabant-Position.png
Noord Holland-Position.png
Overijssel-Position.png
Zuid Holland-Position.png

South Holland, la province la plus peuplée
Utrecht-Position.png
Zeeland-Position.png

Dans une galerie, les images ont une largeur fixe. Les légendes peuvent ou non élargir la galerie, suivant le navigateur utilisé.

Dans une catégorie, une galerie des images de la catégorie est automatiquement montrée. Les 20 premiers caractères du fichier sont affichés. Aucun texte alternatif n'est possible. La taille de l'image est aussi montrée.

En utilisant la syntaxe des tableaux, il est possible de mettre une image dans chaque cellule et d'avoir un meilleur contrôle sur la taille et le texte.

Exemple :

{|
|+'''Provinces of the Netherlands'''
|-
| valign="top"|
[[Image:Drenthe-Position.png|thumb|left|150px|[[w:Drenthe|]], la province la moins peuplée]]
| valign="top"|
[[Image:Flevoland-Position.png|thumb|left|100px|]]
| valign="top"|
[[Image:Friesland-Position.png|thumb|left|100px|]]
|-
|
|-
| valign="top"|
[[Image:Gelderland-Position.png|thumb|left|100px|]]
| valign="top"|
[[Image:Zuid_Holland-Position.png|thumb|left|100px|[[w:South Holland|]], la province la plus peuplée]]
| valign="top"|
[[Image:Utrecht-Position.png|thumb|left|50px|]]
|}

donne

**Provinces of the Netherlands**
Fichier:Drenthe-Position.png Drenthe, la province la moins peuplée	Fichier:Flevoland-Position.png	Fichier:Friesland-Position.png

Fichier:Gelderland-Position.png	Fichier:Zuid Holland-Position.png South Holland, la province la plus peuplée	Fichier:Utrecht-Position.png

Notez qu'avec cette méthode, chaque image a une largeur qui doit être spécifiée. La largeur d'une colonne est déterminée par l'image la plus large de la colonne.

Insertion d'images externes

Les images externes (d'un autre site ou d'un site de partage de photographies) ne peuvent pas toujours être incluses dans la page, suivant les réglages de votre projet.

Si cette option a été activée, vous pouvez voir l'image ci-dessous, sinon seul un lien s'affiche : http://en.wikipedia.org/upload/b/bc/Wiki.png

La syntaxe pour inclure une image externe est simplement d'écrire l'URL de l'image. L'image est alors affichée dans sa taille normale.

Sans formatage, les images sont positionnées au milieu du texte. Il est alors conseillé d'utiliser un tableau pour positionner les images à un endroit précis.

Réglages par défaut (administrateur)

Les réglages par défaut se trouvent dans [1].

# This is the list of preferred extensions for uploading files. Uploading
# files with extensions not in this list will trigger a warning.
# Extensions préférées lors du téléchargement (avertissement si différent)
$wgFileExtensions = array( 'png', 'jpg', 'jpeg', 'ogg' );

# Files with these extensions will never be allowed as uploads.
# Extensions non autorisées
$wgFileBlacklist = array(
	# HTML may contain cookie-stealing JavaScript and web bugs
	'html', 'htm',
	# PHP scripts may execute arbitrary code on the server
	'php', 'phtml', 'php3', 'php4', 'phps',
	# Other types that may be interpreted by some servers
	'shtml', 'jhtml', 'pl', 'py',
	# May contain harmful executables for Windows victims
	'exe', 'scr', 'dll', 'msi', 'vbs', 'bat', 'com', 'pif', 'cmd', 'vxd', 'cpl' );

# This is a flag to determine whether or not to check file extensions on
# upload.
# Variable déterminant si les extensions vérifiées au démarrage.
$wgCheckFileExtensions = true;

# If this is turned off, users may override the warning for files not
# covered by $wgFileExtensions.
$wgStrictFileExtensions = true;

# Warn if uploaded files are larger than this
# Acertissement si la taille dépasse ceci.
$wgUploadSizeWarning = 150000;

Limitations

Redirection

Il n'est pas possible d'insérer une image à la place d'une autre avec une redirection. Pour obtenir une certaine flexibilité dans l'insertion d'images, il vaut mieux utiliser un modèle contenant une image, puisqu'un modèle peut rediriger vers un autre.

Lien vers une version large

Il n'est pas possible, en faisant un lien vers la page de description, de spécifier une taille plus grande pour l'affichage. Il faut alors créer une page séparée qui contient une version élargie de l'image. Il est aussi possible de l'inclure sur la page de description, dans la page de discussion associée, ou comme une image séparée.

Pages internes qui ne peuvent pas être incluses

Les images sur Solarpedia:Bad image list ne peuvent pas être incluses dans les pages. Elles apparaissent comme liens vers les pages de descriptions.

Aide:Insérer une image : Différence entre versions

Version actuelle en date du 19 avril 2011 à 17:21

Sommaire

Téléchargement de l'image

Nom de l'image

Types de fichiers supportés

Images produites automatiquement

Liens vers une image

Insertion d'une image interne dans une page

Légende

Taille

Vignette

Position sur la page

Image à gauche

Image à droite

Image au centre

Cadre

Alignement du texte

Texte superposé à une image

Création d'une galerie d'images

Insertion d'images externes

Réglages par défaut (administrateur)

Limitations

Redirection

Lien vers une version large

Pages internes qui ne peuvent pas être incluses

Menu de navigation

Outils personnels

Espaces de noms

Variantes

Affichages

Plus

Rechercher

Navigation

Outils

Publicité