Help:Images

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, including animated PNGs. That is the preferred format for all the Project Zomboid graphics, including screenshots.
• .gif: image in the legacy Graphics Interchange Format, mainly used for older animations that was not converted to animated PNG
• .jpg or .jpeg: image compressed in the standard JPEG format (this lossy format is most suitable for photographs).
• .webp: alternative image format supported by modern browsers (uses both lossy and lossless compression, reducing file size), currently with limited support and not used for anything.

Uploading other file formats, including audio, video, or others is disabled and not possible currently.

Uploading a file

Uploading a new file can be done using the "Upload file" link in the sidebar under "Tools". Alternatively, 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 "Choose file"/"Browse…" button, next to the "Source file" will allow you to locate the file on your computer, which will be uploaded to the wiki.

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.

Refer to the style guide for the most up-to-date wiki standards when it comes to the right name.

A few example filenames are below:

Image	Destination Filename
	PlushSpiffo.png
	Container_Oven.png
	Poster.jpg
	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 images to a proper category may help other users to find and use your image.

The "Licensing:" field is currently 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.

Ticking the "Ignore any warnings" checkbox will skip any warnings from being displayed upon uploading the file. This is rarely used by regular users 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:Image.png|20px|link=https://projectzomboid.com/]] renders as (external link), or [[File:Image.png|20px|link=Main Page]] renders as (internal link).
  • link= (with an empty value) — displays an image without any activatable link; e.g., [[File:Image.png|20px|link=]] renders as .
    • If you set |link=| (empty), then no title will be rendered.

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.

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:Image.png|frame|caption]] text text text ...	... text text text caption text text text ...
thumb or thumbnail Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:Image.png|thumb|caption]] text text text ...	... text text text 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.

Link to an image

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

[[:File:Image.png]]

File:Image.png

[[:File:Image.png|Description]]

Description

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:Image.png|220px]]
[[File:Image.png|100px]]
[[File:Image.png|150px]]
[[File:Image.png|250px]]
[[File:Image.png|200px]]
[[File:Image.png|50px]]
[[File:Image.png|220px]]
[[File:Image.png|175px]]

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

• 

  Caption 1
• 

  Caption 2
• 

  Caption 3
• 

  Caption 4
• 

  Caption 5
• 

  Caption 6
• 

  Caption 7
• 

  Caption 8

List of files in the wiki

• Images category
• File list
• Images by MIME type
• Gallery of new files
• Unused files

External links

• MediaWiki Help:Images
• MediaWiki Help:Linking to files