Images Style Guide

Placing Images

To implement an image onto a page, first determine:

1. The kind of image (screenshot, character sheet, promotional image, etc.).
2. If there is already a version of the image uploaded to the Wiki.
3. Where it will be positioned in relation to what is being said in the text.
4. The size of the image.
5. If it will be to the left or right of the text.

[[File:Screenshot Name.jpg|200px|thumb|left|Brief description of what is in the screenshot.]]

The above code will put an image with a width of 200 pixels (its height scaled accordingly) in a box (thumbnail) to the left of an article's text, with the exact text of the caption.

Placement in Text

Do not place the code for an image in the middle of a sentence. Always place it at the start of a paragraph to ensure the text wraps around it properly.

Correct Placement

[[File:Image.png|300px|thumb|left|This is a thumbnail.]]
Here is an example paragraph. Note how the image is on the line before it, with no line break after.

Alternative Correct Placement

[[File:Image.png|300px|thumb|left|This is a thumbnail.]]Here is another example paragraph. Note how the image is on the same line as it, with no space after. This will be visually the same as the first example.

Incorrect Placement

Here is yet another example paragraph. Note how the image is interrupting a sentence[[File:Image.png|300px|thumb|left|This is a thumbnail.]], with no spaces. Placing an image within a sentence will break up the text's flow in strange ways. In this example, it would lead to the comma after the image being at the start of a line, and the spacing of the sentence would be incorrect.

Size

Screenshots on episode pages should be 200 pixels wide. Screenshots on character pages should be 300 pixels wide. Any other images should have a width within this range, but can go up to 400 pixels.

Alignment

To make it appear to the right of the text, simply change "left" to "right" and keep the order of everything else the same.

[[File:Image.png|300px|thumb|right|This thumbnail will appear on the right.]]

Caption

An image caption should be a simple description of what's in the image. Since there are descriptions of the characters on the Wiki, the characters do not need to be described unless there is a significant change in their appearances:

[[File:Image.png|200px|thumb|right|Character A and Character B sitting next to each other.]]

Linking to Images

To link an image on the page instead of embedding it, take note of the colon after the opening brackets:

This example will show [[:File:Image.png|whatever text is here]] as the link text to click.

Image Galleries

To use an image gallery, use the gallery tags. Create a gallery only when a page template specifies an area for a gallery.
Gallery tags are not included in page templates, so they must always be specified.
Captions are not required for the gallery to work, but they are encouraged for consistency. They can be formatted like any other text, as well as link to other pages.
Take note that the square brackets are not used when listing images.

<gallery>
File:Image 1.jpg|This is where you specify the caption.
File:Image 2.png
</gallery>