Voir la source de Help/Images

This page explains the '''image''' syntax. You or another user must [[#Upload a file|upload an image]] before you can use it on a page.

Images that are stored on a the Rich Annotator System server are rendered by using the <code>Fichier:</code> namespace prefix. The <code>File:</code> namespace prefix can also be used as a synonym.


===Upload a file===
You can upload certain types of files to the Rich Annotator System. Permitted file types are: png, gif, jpg, jpeg, webp, pdf, flac, mkv, mov, mp3, mp4, oga, ogg, ogv, wav, webm.
To upload a file:
# Prepare the file on your computer in its final format. Make sure the file is exactly as you want it.
# In the sidebar, under "tools", click "'''Upload file'''".
# Click "'''Browse'''" next to the "'''Source filename:'''” to locate the file on your computer. (The "browse" button may have a different label depending on your web browser).
# Change the "'''Destination filename:'''" to something descriptive, if necessary.
# Fill in the "'''Summary'''", if necessary.
# Click the "'''Upload file'''" button.
If it is a large file, you may need to wait several seconds for the upload to complete.

'''File description page'''<br>
Each file gets its very own “file description page” on the wiki. The page name will be <code>Fichier:</code> followed by the destination filename you provided. You can edit this page to provide more information about the file. For example, if there are copyright issues, you should explain on the description page where you got the file from, and what its copyright status is. Any other useful descriptive notes could also be added there.

'''Using the file'''<br>
After you've uploaded a new file, it doesn't automatically appear on any page – not even the page you were on when you clicked on the "'''Upload file'''" link. You must decide on which pages of the wiki you want it to appear.


===Rendering a single image===
====Syntax====
The full syntax for displaying an image is: <code><nowiki>[[File:</nowiki>''filename.extension''|''options''|''caption''<nowiki>]]</nowiki></code> where ''options'' can be zero or more of the following, separated by pipes (|):
* ''Format'' option: one of '''border''', '''frameless''', '''frame''' or '''thumb'''.
* ''Resizing'' option: one of
** ''{width}'''''px''' — Resizes the image to fit within the given maximum width in pixels, without restricting its height. (A space character between the width value and "px" is permitted.)
** '''x'''''{height}'''''px''' — Resizes the image to fit within the given maximum height in pixels, without restricting its width.
** ''{width}'''''x'''''{height}'''''px''' — Resizes the image to fit within the given width and height in pixels.
* ''Horizontal alignment'' option: one of '''left''', '''right''', '''center''', '''none'''. If multiple of these options are present, only the first one will be used.
* ''Vertical alignment'' option: one of '''baseline''', '''sub''', '''super''', '''top''', '''text-top''', '''middle''', '''bottom''', '''text-bottom'''. The default vertical alignment is '''middle'''.
* ''Link'' option: one of
** '''link='''''{target}'' — Allows to change the target (to an arbitrary page title, or URL) of the generated link, activable on the rendered image surface.
** '''link=''' (with an empty value) — Displays an image without any activable link.
* Other specific options:
** '''alt='''''{alternative text}'' — Defines the alternative text of an image that will be rendered if either the referenced image cannot be downloaded and embedded, or if the support media must use the alternative description text.
** '''class='''''{html class}'' — Defines classes.
If a parameter does not match any of the other possibilities, it is assumed to be the caption text. If more than one non-parameter string is present, the final non-parameter string will be used as the caption. Caption text shows below the image in '''thumb''' and '''frame''' formats, or as tooltip text in any other format. Caption text displayed in the '''thumb''' and '''frame''' formats may contain wiki links and other formatting.

====Format====
The following table shows the effect of all available formats.
{| class="wikitable" style="text-align:left;"
! Description !! You type !! You get
|-
| no format specified || <pre>... text text text
[[Fichier:Example_image.png|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|caption]]
text text text ...
|-
| '''border''' || <pre>... text text text
[[Fichier:Example_image.png|border|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|border|caption]]
text text text ...
|-
| '''frameless''' || <pre>... text text text
[[Fichier:Example_image.png|frameless|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|frameless|caption]]
text text text ...
|-
| '''frame''' || <pre>... text text text
[[Fichier:Example_image.png|frame|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|frame|caption]]
text text text ...
|-
| '''thumb''' || <pre>... text text text
[[Fichier:Example_image.png|thumb|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|thumb|caption]]
text text text ...
|}

====Size and frame====
Among different formats, the effect of the size parameter may be different:
* When the format is not specified, or only '''border'''ed, the size can be both reduced and enlarged to any specified size.
* An image with '''frame''' always '''ignores''' the size specification, the original image will be reduced if it exceeds the maximum size defined in user preferences.
* The size of an image with '''thumb''' or '''frameless''' can be reduced, but cannot be enlarged beyond the original size of the image.

====Horizontal alignment====
Note that when using the '''frame''' or '''thumb''' formats, the default horizontal alignment will be '''right'''.
{| class="wikitable" style="text-align:left;"
! Description !! You type !! You get
|-
| '''no horizontal alignment specified''', or default alignment || <pre>... text text text
[[Fichier:Example_image.png|100px|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|100px|caption]]
text text text ...
|-
| '''none''' || <pre>... text text text
[[Fichier:Example_image.png|none|100px|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|none|100px|caption]]
text text text ...
|-
| '''center''' || <pre>... text text text
[[Fichier:Example_image.png|center|100px|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|center|100px|caption]]
text text text ...
|-
| '''left''' || <pre>... text text text
[[Fichier:Example_image.png|left|100px|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|left|100px|caption]]
text text text ...
|-
| '''right''' || <pre>... text text text
[[Fichier:Example_image.png|right|100px|caption]]
text text text ...</pre> || ... text text text
[[Fichier:Example_image.png|right|100px|caption]]
text text text ...
|}

====Vertical alignment====



[[User help|{{#fas:caret-left}} Back to contents]]
[[Category:Help]]
{{interlanguagelink:en|Help-Images}}