We have begun migration of most wikis to our new host, Amazon Web Services. All but the top 100 wikis are in read-only mode until the migration is complete. Estimated completion: End of Week.


From Diablo Wiki
Jump to: navigation, search
Help Topics
{{{Header1}}} Contents
{{{Header2}}} Style Guide
{{{Header3}}} Content Guide
Editing {{{Cell4}}}
{{{Header5}}} Categories
{{{Header6}}} Images
{{{Header7}}} Redirects
{{{Header8}}} Templates
General Information {{{Cell9}}}
{{{Header10}}} To-Do List
{{{Header11}}} Administrators
{{{Header12}}} About DiabloWiki

Images are an important aspect of every wiki. They can show what an item looks like, where to find a quest item or something else of an informative nature, but they can also help break up a page of text to make it easier on the eyes and more enjoyable to read.

Unlike forum software, the wiki provides many formatting options for images that can be applied instantly to an image on the page where it is displayed. This makes displaying images very flexible, but it uses a syntax that is unique to mediawiki. This help article will explain how to properly use images in the wiki.

Uploading Images[edit source]

This is how the upload screen looks

Before an image can actually be displayed on the wiki, it has to be uploaded to this very site. In the left sidebar there's a link to Upload file. This is where you upload images. When uploading an image, you need to specify where on the computer it is stored (it has to be saved on your computer) and what its destination filename will be in the wiki.

Images need to be categorized like all other pages in the wiki, so when uploading a new image, please take a moment to browse Category:Images and see where it should be placed. To categorize the image, simply include [[Category:Category Name]] in the Summary field.

Note: While the Upload screen says that .mp3 and .wav files can be uploaded to the wiki, there's no way at present for the wiki to actually play them. So only upload image files.

Using images[edit source]

Images are linked to just like any page in the wiki. The name of the image page is wrapped in [[ ]] brackets. Since images are automatically placed in the namespace File:, this needs to be placed in front of whatever name the image was given, otherwise the wiki will try to link to an article with that name. Image: can also be used to this effect, and there's no difference between the two.

[[Image:Diablo III concept 48.jpg]]

Diablo III concept 48.jpg

This basic link can be customized to present the image as you wish. Unmodified, the image will interrupt text and appear as large as the original uploaded file (so very large images, like Image:Inner Cloister Cathedral (Diablo II).jpg will stretch outside of the page). To change the appearance or behavior of the image, simply add a pipe (|) after the file name, and then add one or more of many options:

  • [[Image:File Name|Option1|Option2|...|Caption]]

Any number of options can be specified:

  • Format options: one of border and/or frameless, frame or thumb
    Controls how the rendered image is formatted and embedded in the rest of the page. Thumb is the most common one and creates the typical design one often sees in a wiki, with a border and the accompaning text underneath it.
  • Resizing options: 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 in size. This isn'y commonly a problem, as these commands are often used to reduce large images in order for it to be possible to display them in an article.
  • Horizontal alignment option: one of left, right or center
    Controls the horizontal alignment (and inline/block or floating styles) of the image within a text. Applying this will not only reposition the image, but will also cause it to float, meaning text and other media can be placed next to it instead of being forced above and beneath the image.
  • Vertical alignment: one of baseline, sub, super, top, text-top, middle, bottom or 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 options: one of
    • link={target} — Normally an image will link to itself when clicked on. This can be changed to it directs a player to another article instead.

These options can be combined in a myriad of ways:

[[Image:Diablo III concept 48.jpg|thumb|This is a caption]]
This is a caption

Creates a thumb of the picture, makes it float to the right and adds a caption text to it.

[[Image:Diablo III concept 48.jpg|right|300px]]
Diablo III concept 48.jpg

Aligns the image to the right, and reduces it's width to 300px

[[Image:Diablo III concept 48.jpg|left|x200px|link=Tyrael]]
Diablo III concept 48.jpg

Aligns the image to the left, reduces it's height to 200px and clicking on the image sends the viewer to Tyrael instead of the image page.

Galleries[edit source]

Sometimes many images are relevant to an article, but either there are very many of them or placing them here and there in the article doesn't make any sense. If that is the case, it may be best to create a gallery of images for easier viewing.


A gallery such as this supports four pictures in a row, and will automatically scale down pictures to the appripriate size. You can't format images like previously explained when they're in a gallery however.

Galleries should be placed near the end of an article most of the time, like on the Demon Hunter for example.

Wikipedia Help[edit source]

  • Help:Images at MediaWiki. Provides a more in-depth description of how use images, and many more format examples.