Help:Images

From PZwiki
Revision as of 16:11, 24 June 2018 by Vaileasys (talk | contribs) (added dedicated navbar)
ContentsEditing for beginnersNavigationCreating a new pageHow to helpImagesTablesStyle guideTranslations

This page explains how to upload an image to the PZwiki as well as the image syntax when editing the PZwiki.

Images that are stored on the PZwiki server have the File: namespace prefix as the target of a link.

Suppоrted media types for images

The following file formats are suppоrted on the PZwiki:

  • .png : image in the Portable Network Graphics format.
  • .gif : image in the legacy Graphics Interchange Format.
  • .jpg or .jpeg : image compressed in the standard JPEG format (this lossy format is most suitable for photographs).
  • .webp : alternative to the standard JPEG format (uses both lossy and lossless compression, reducing file size).

Uploading a file

Uploading a new file can be done using the "Upload file" link in the sidebar under "tools". Alternatively, by following a red broken link or typing the link directly into the URL address bar, will present the upload file page with the destination filename already filled out.

Before uploading any file, the images category should be checked first in case the desired image has already been uploaded by another user.

Upload file page

On the upload file page, there are 2 fields that must be filled out, while the others may be left as they are.

Source file

Clicking the "Browse" button, next to the "Source filename:" will allow you to locate the file on your computer, which will be uploaded to the wiki (The "browse" button may have a different label depending on your web browser).

Be sure that the file type is one of the suppоrted media types and doesn't exceed the file size limit of 32 MB.

File description

The "destination filename" field is the link to reach the file and its file description page, excluding the File: prefix. This will already be filled out if a link has been followed directly. This should be changed to something descriptive and unique to the file itself. The current standard is for it to be its icon name as used in the game files, however many objects, such as furniture, don't have a very descriptive filename and therefore should be given a different name.

A few example filenames are below:

Image Destination Filename
PlushSpiffo.png PlushSpiffo.png
Container Oven.png Container_Oven.png
Poster.jpg Poster.jpg
IndustrialFridge Large.gif IndustrialFridge_Large.gif

The "summary" is an optional field, which as the title suggests, should be used to give a summary of the file being uploaded. Anything written in the summary field will also be displayed on the file description page, therefore including a category in the summary, will include the image/page in that category. Adding the new file to a category may help other users to find and use your image.

The "licensing" field is left blank, however if any special licensing is applicable to an uploaded file, then any details should be included within the file description page or in the summary field.

Upload options

The "Watch this file" checkbox is ticked by default, leaving this will add the file to the user's watchlist, in which will notify them via email whenever the file or page has been updated by another user.

Ticking the "Ignore any warnings" checkbox will skip any warnings from being displayed upon uploading the file. This is rarely used and should be left unchecked.

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 and/or frameless, frame, thumb (or thumbnail);
    • Controls how the rendered image is formatted and embedded in the rest of the page.
  • Resizing option: one of
    • {width}px — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
    • 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;
    • upright — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).
Note that the image will always retain its aspect ratio, and can only be reduced (not increased) in size unless it's in a scalable media type (bitmap images cannot be scaled up).
The default maximum size depends on the format and the internal image dimensions (according to its media type).
  • Horizontal alignment option: one of left, right, center, none;
    • Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
  • Vertical alignment option: one of baseline, sub, super, top, text-top, middle, bottom, text-bottom;
    • Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (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, activatable on the rendered image surface; e.g. [[File:Example.png|20px|link=http://www.wikipedia.org]] renders as File:Example.png (external link), or [[File:Example.png|20px|link=Main_Page]] renders as File:Example.png (internal link).
    • link= (with an empty value) — Displays an image without any activatable link; e.g. [[File:Example.png|20px|link=]] renders as File:Example.png.
      • If you set |link=| (empty), then no title will be rendered.

Format

The most common formats used within the PZwiki are the frame and thumb or thumbnail formats, as these are rendered as floating blocks, allowing text to wrap around them, along with the possibility of a caption.

Description You type You get
frame
Rendered as a floating block: yes
Rendered inline: no
Rendered caption: yes 
... text text text
[[File:Example.png|frame|caption]]
text text text ...
 ... text text text
File:Example.png
caption

text text text ...

thumb or thumbnail
Rendered as a floating block: yes
Rendered inline: no
Rendered caption: yes 
... text text text
[[File:Example.png|thumb|caption]]
text text text ...
 ... text text text
File:Example.png
caption

text text text ...

When the height of an image in thumbnail is bigger than its width (i.e. in portrait orientation rather than landscape) and you find it too large, you may try the option upright=N, where N is the image's aspect ratio (its width divided by its height, defaulting to 0.75). The alternative is to specify the desired maximum height (in pixels) explicitly.

Note that by writing thumb={filename}, you can use a different image for the thumbnail.

Row of images that will wrap to browser width

One way that works for a row of images with varying widths is not to use "thumb" or "left" or "none". If "thumb" is not used (and thus no captions) a row of images will wrap to the browser width. If necessary, narrow the browser window to see the images wrap to the next row. 

[[File:Example.png|220px]]
[[File:Example.png|100px]]
[[File:Example.png|150px]]
[[File:Example.png|250px]]
[[File:Example.png|200px]]
[[File:Example.png|50px]]
[[File:Example.png|220px]]
[[File:Example.png|175px]]

File:Example.png File:Example.png File:Example.png File:Example.png File:Example.png File:Example.png File:Example.png File:Example.png

To wrap images of varying widths with captions it is necessary to use div HTML for an unordered list. Along with style="display: inline-block;". 

<div><ul> 
<li style="display: inline-block;"> [[File:Example.png|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.png|thumb|none|175px|Caption 8]] </li>
</ul></div>

Link behaviour

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 Help:Links.

Display image, link it to another page or website

Use "link=" option to link image to another page or website:

Clicking on the below image will take you to the PZwiki: 

[[File:Pzwlogo.png|50px|link=Main Page]]

Pzwlogo.png

Clicking on the below image will take you to example.com: 

[[File:Pzwlogo.png|50px|link=http://example.com]]

Pzwlogo.png

Display image, turn off link

Use "link=" option with no value assigned to turn link off entirely; the below image is not a link: 

[[File:Pzwlogo.png|50px|link=]]

Pzwlogo.png

Link to an image

Add : as a prefix to the link you need to create. 

[[:File:Pzwlogo.png]]

File:Pzwlogo.png 

[[:File:Pzwlogo.png|Wiki logo]]

Wiki logo

List of files in the wiki

See Also

External Links

Retrieved from "https://pzwiki.net/w/index.php?title=Help:Images&oldid=37324"