Aide:Insérer une image
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.
Sommaire
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.
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 :
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
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.
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. 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 :
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 luptaImage à 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.
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. 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 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 :
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
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
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
|
Fichier:Drenthe-Position.png Drenthe, la province la moins peuplée |
||
|
Fichier:Zuid Holland-Position.png South Holland, la province la plus peuplée |
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.
