Help:Images and other uploaded files

From SAGoClubs
Jump to navigation Jump to search

Choose a name for an image as carefully as you would choose an article name, and use proper spacing and capitalization: the name may not be visible in a page that embeds the image, but it is, for example, on the page for a category that contains the image.

Supported file types; miscellaneous

Apart from text, MediaWiki supports the following media inline:

  • images -- preferred formats: PNG and JPEG.

Currently the following file types can be uploaded:

'png', 'gif', 'jpg'/'jpeg', 'ogg'.

The most common type of media apart from images is:

  • sound -- preferred format: Ogg Vorbis.

I'm not sure whether we support mathematical formulae or not.

Embedding images

An embedded internal image automatically links to the image page, which shows the full image, or, depending on preferences, a reduced version with a link to the full version. The page also provides info about the image.

To add the uploaded image to an article as a thumbnail, one can use [[Image: image name including extension |thumb|caption]] or [[Image: image name including extension |thumb|width in pixels px|caption]].

The caption can contain links. This format allows both size reduction and enlargement. Both the image itself and an icon link to the image page. The icon has the link title "Enlarge" in its hoverbox, even in cases where the image on the image page is smaller. Depending on preferences the image on the image page may be smaller than the thumbnail image, so a link may be convenient from the thumbnail straight to the image in actual size.

External links in the caption are possible, but only in the form without brackets, hence showing the full URL; if the full URL does not fit in the available width, the rest falls off, but the link works anyway. These links are especially useful to link to the full version of an image, if that can not be displayed on the image description page, because it is in pdf-format. Alternatively, an extra caption can be put outside the image syntax.

Image at the left

[[image:SAGAlogo.png|left|thumb|50px|[[help:contents|demo]]]] puts the image at the left; text that follows floats to the right of it; if a second image immediately comes after the first, the second abuts to the right side of the first; if there is text in between then the second image is at the lower right of the first, under this text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. between the 3rd and 4th images.

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. after the 4th image.

With [[image:SAGAlogo.png|none|thumb|50px|[[help:contents|demo]]]] the image is put at the left, and text that follows starts below it.

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 at the right

[[image:SAGAlogo.png|right|thumb|50px|[[help:contents|demo]]]] puts the image at the right; text that follows floats to the left of it. The situation is not symmetric with the case above: a second image is put at the extreme right again, under the first.

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. after the 1st 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 after the 2nd image.

Using full width again

Use <br style="clear:both;" />. Text floats around the image until it gets

there. like this.
After <br style="clear:both;" />, however, text can float no longer, and restarts from under the image, using the full width again like this,...... like this, like this, like this, like this, like this, like this, like this.

Inline images

Inline images cannot have a caption, but they can have a "title"-attribute (often misidentified as the "alt" attribute, which has a different purpose), which is shown in the hoverbox (in the cases above, for the image it is the same as the caption, and for the enlarge icon it is "Enlarge"). It is the last item of the image code, hence, if there is only the image name with prefix "image:" it gives that; if there is an empty item by ending with a pipe character ("|") it gives none; otherwise, it gives the image code item that happens to be last, unless a proper text is specified.

The size of the images can be reduced but they can not be enlarged.

Example (note the hoverbox too): "text [[image:SAGAlogo.png]] text [[image:SAGAlogo.png|5px|]] text [[image:SAGAlogo.png|500px|demo]] text" gives "text

Error creating thumbnail: Unable to save thumbnail to destination

text SAGAlogo.png text demo text".

In the last example, in 1.5 the width is as specified, but the height is the original one.

See also below.

Redirection

An image tag specifying an image can not be made to embed another image through a redirect.

Gallery tag, category, table of images

The gallery-tag is a quick way to show thumbnails in four columns. Each entry is of the form "Image:image name or "Image:image name|caption, possibly with links". It also allows text taking the position of an image, but not with links: if a text entry contains a link, the whole entry is ignored; an image tag with square brackets is also ignored.

<gallery>
A-L
Image:SAGAlogo.png|[[w:Drenthe|Drenthe]], the least crowded province
Image:SAGAlogo.png
Image:SAGAlogo.png
[[Friesland]] is beautiful
Image:SAGAlogo.png
Image:SAGAlogo.png
Image:SAGAlogo.png
M-Z
Image:SAGAlogo.png 
Image:SAGAlogo.png
Image:SAGAlogo.png
Image:SAGAlogo.png|[[w:South Holland|South Holland]], the most crowded province
Image:SAGAlogo.png
Image:SAGAlogo.png
</gallery>

gives:

Note that, with the gallery tag, the images have a single fixed width.

Depending on the browser, a long caption may or may not widen a whole column of images:

  • even if it does, if necessary to fit the four columns on the screen, captions wrap automatically
  • alternatively, a long caption makes the whole row taller, because too long captions wrap to produce multiple lines in their container.

Using table syntax, with images in separate cells, and the image syntax explained elsewhere on this page, gives more control over size, layout, captions, etc. than each of these two methods. However, only a category automatically gives file sizes.

Example of an image table:

{|
|+'''Provinces of the Netherlands'''
|-
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|150px|[[w:Drenthe|]], the least crowded province]]
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|100px|]]
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|100px|]]
|-
|
|-
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|100px|]]
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|100px|[[w:South Holland|]], the most crowded province]]
| valign="top"|
[[Image:SAGAlogo.png|thumb|left|50px|]]
|}

gives:

Provinces of the Netherlands
Drenthe, the least crowded province
SAGAlogo.png
SAGAlogo.png
SAGAlogo.png
South Holland, the most crowded province
SAGAlogo.png

Note that, with this method, each image has a width specified by the size option, if any, and a height depending on whether there is caption or not, and how long the caption is. The width of a column is determined by the widest image in it, and the height of the row is determined by the tallest image in it.

Embedding external images

NOTE THAT EXTERNAL IMAGES WILL NOT WORK FOR STELLENBOSCH UNIVERSITY VIEWERS OF THE WIKI, AND MAY CAUSE LONG DELAYS IN PAGE LOADS FOR THEM. UNTIL THIS IS ADDRESSED, INLINE LINKING OF EXTERNAL IMAGES IS STRONGLY DISCOURAGED.

The wiki markup text used for external images is simply the raw url of the image, e.g. http://en.wikipedia.org/upload/b/bc/Wiki.png. It can be shown in actual size only.

For inline images, put the url, preceded and followed by a space, in the text: a http://upload.wikimedia.org/wikipedia/commons/2/27/SAGAlogo.png b gives a http://upload.wikimedia.org/wikipedia/commons/2/27/SAGAlogo.png b

Without special formatting, inline images are positioned like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text http://en.wikipedia.org/upload/b/bc/Wiki.png text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

A table may be used to position the image(s) as desired. E.g.

{| 
| http://en.wikipedia.org/upload/b/bc/Wiki.png
| 
| http://en.wikipedia.org/upload/b/bc/Wiki.png
|-
|
| http://en.wikipedia.org/upload/b/bc/Wiki.png
|
|}

gives

http://en.wikipedia.org/upload/b/bc/Wiki.png http://en.wikipedia.org/upload/b/bc/Wiki.png
http://en.wikipedia.org/upload/b/bc/Wiki.png

WikiTeX

WikiTeX ([1]) is a MediaWiki extension that can produce graphs of functions, various diagrams, etc. It is operational at http://wikisophia.org/ , but not yet at Wikimedia projects. Note that one can anyway produce an image on Wikisophia, and subsequently upload it on any MediaWiki project.

External links