Help/Images

This page explains the image syntax. You or another user must 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 Fichier: namespace prefix. The File: 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:

1. Prepare the file on your computer in its final format. Make sure the file is exactly as you want it.
2. In the sidebar, under "tools", click "Upload file".
3. 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).
4. Change the "Destination filename:" to something descriptive, if necessary.
5. Fill in the "Summary", if necessary.
6. 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
Each file gets its very own “file description page” on the wiki. The page name will be Fichier: 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
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: [[File:filename.extension|options|caption]] 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.

Description	You type	You get
no format specified rendered inline	... text text text [[Fichier:Example_image.png|caption]] text text text ...	... text text text text text text ...
border rendered inline	... text text text [[Fichier:Example_image.png|border|caption]] text text text ...	... text text text text text text ...
frameless rendered inline	... text text text [[Fichier:Example_image.png|frameless|caption]] text text text ...	... text text text text text text ...
frame rendered as a floating block rendered caption	... text text text [[Fichier:Example_image.png|frame|caption]] text text text ...	... text text text caption text text text ...
thumb rendered as a floating block rendered caption	... text text text [[Fichier:Example_image.png|thumb|caption]] text text text ...	... text text text 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 bordered, 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.

Description	You type	You get
no horizontal alignment specified, or default alignment rendered inline	... text text text [[Fichier:Example_image.png|100px|caption]] text text text ...	... text text text text text text ...
none	... text text text [[Fichier:Example_image.png|none|100px|caption]] text text text ...	... text text text text text text ...
center	... text text text [[Fichier:Example_image.png|center|100px|caption]] text text text ...	... text text text text text text ...
left rendered as a floating block	... text text text [[Fichier:Example_image.png|left|100px|caption]] text text text ...	... text text text text text text ...
right rendered as a floating block	... text text text [[Fichier:Example_image.png|right|100px|caption]] text text text ...	... text text text text text text ...

Vertical alignment

The vertical alignment options take effect only if the image is rendered as an inline element and is not floating. They alter the way the inlined image will be vertically aligned with the text present in the same block before and/or after this image on the same rendered row.

Note that the rendered line of text where inline images are inserted (and the lines of text rendered after the current one) may be moved down (this will increase the line-height conditionally by additional line spacing, just as it may occur with spans of text with variable font sizes, or with superscripts and subscripts) to allow the image height to be fully displayed with this alignment constraint.

Stopping the text flow

On occasion it is desirable to stop text (or other inline non-floating images) from flowing around a floating image. Depending on the web browser's screen resolution and such, text flow on the right side of an image may cause a section header (for instance, == My Header ==) to appear to the right of the image, instead of below it, as a user may expect. The text flow can be stopped by placing <br clear=all> (or if you prefer, <div style="clear: both"></div>) before the text that should start below the floating image. (This may also be done without an empty line by wrapping the section with the floating images with <div style="overflow: hidden">…</div>, which clears all floats inside the div element.)

All images rendered as blocks (including non-floating centered images, left- or right-floating images, as well as framed or thumbnailed floating images) are implicitly breaking the surrounding lines of text (terminating the current block of text before the image, and creating a new paragraph for the text after them). They will then stack vertically along their left or right alignment margin (or along the center line between these margins for centered images).

Altering the default link target

• Internal link: [[Fichier:Example_image.png|link=User help|caption]]
• External link: [[Fichier:Example_image.png|link=https://ras.ppke.hu|caption]]
• No link: [[Fichier:Example_image.png|link=|caption]]

Rendering a gallery of images

Gallery syntax

It's easy to make a gallery of thumbnails with the <gallery> tag. The syntax is:

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

Note that the image code is not enclosed in brackets when enclosed in gallery tags.

Captions are optional, and may contain internal links or other formatting.

The Fichier: prefix can be omitted. However, it is helpful to include it as an aid for quickly locating image specifiers in the wikitext.

Mode parameter
Options:

• traditional is the default gallery type.
• nolines is similar to traditional, but with no border lines.
• packed causes images to have the same height but different widths, with little space between the images. The rows in this responsive mode organize themselves according to the width of the screen.
• packed-overlay shows the caption overlaid on the image, in a semi-transparent white box.
• packed-hover is similar to packed-overlay, but with the caption and box only showing up on hover.
• slideshow creates a slideshow of the images.

Optional gallery attributes

The gallery tag itself takes several additional parameters, specified as attribute name-value pairs:

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

• caption="{caption}": (caption text between double quotes for more than a word) sets a caption centered atop the gallery. Only plain text may be used in the caption; formatting, templates and the like will not work.
• widths={width}px: sets the (max) widths of the images; the default value is 120px. Note the plural: widths.
• heights={heights}px: sets the (max) heights of the images; the default value is 120px.
• perrow={integer}: sets the number of images per row. 0 means automatically adjust based on width of screen.
• showfilename={anything}: Show the filenames of the images in the individual captions for each image.
• mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}: See section above.
• showthumbnails: For "slideshow" mode only, display the strip with image thumbnails below the slideshow by default.

Link behavior

By default an image links to its file description page. The "link=" option modifies this behavior to link to another page or website, or to turn off the image's linking behavior.

Alternatively, you can create a text link to a file description page or to the file itself. See also Links.

Display image, link it to another page or website
Use "link=" option to link image to another page or website:
[[Fichier:Example_image.png|50px|link=User help]]

Display image, turn off link
Use "link=" option with no value assigned to turn link off entirely; the below image is not a link:
[[Fichier:Example_image.png|50px|link=]]

Link to an image
Add : as a prefix to the link you need to create.
[[:Fichier:Example_image.png]]
Fichier:Example_image.png
[[:Fichier:Example_image.png|Example]]
Example

Directly linking to an image
The above examples link to the image's description page. To directly link to an image, the pseudo-namespace Media: can be used:
[[Media:Example_image.png]]
Media:Example_image.png

Back to contents