How To Use Images

See also also MetaWiki Help:Images

Naming

• Like pages, the names of images are important and semi-permanent. Ideally when naming the images, name them as they are in game (with spaces). This allows them to be uniformly referenced, and it is easier to avoid duplicating image uploads. The wiki will automatically add underscores to replace the spaces, however when referencing the image, you can still use spaces. For example, "Image Small.jpg" will automatically be made into "Image_Small.jpg" by the wiki, but can still be referenced as "Image Small.jpg" in your pages.
  • Live images - screenshots of creatures and NPCs in the game world or an item being wielded should be named: <Exact In-Game Name> Live.

Examples:

Drudge Skulker Live.jpg

Sanamar Collector Live.jpg

Sword of Lost Light Live.jpg

• Stat Panel/ID Panel images - these are to be uploaded and inserted in the talk page of the particular entry for future reference. These should be named: <Exact In-Game Name>.

Examples:

Drudge Skulker.jpg

Sanamar Collector.jpg

Sword of Lost Light.jpg

• Icons - Being icons, these are only going to be used for items. These should be named: <Exact In-Game Name> Icon.

Example:

Sword of Lost Light Icon.png

Format and Quality

• Any web format is fine: .jpg, .gif, .png (since files are case sensitive on the wiki, please use lower case extensions to avoid duplicates).
• Keep file sizes 75K or smaller. Icons of items are 32x32 pixels. ID panels are 300 pixels in width.
• AC uses a high compression/low quality setting for its JPG encoder which is why screenshots have lots of artifacts around text or in small images like icons. One way to get around this is to use the PRT SCR button, then use Paste to get the image directly into your editing program. If you play in windowed mode, holding the ALT key while you press PRT SCR will capture just the active window instead of the entire desktop. Saving icons as png files uses lossless compression and avoids artifacts, color washout, and loss of detail. (Wiki Swiss Tool can crop icons automatically for you.)

Uploading and Linking

• To use an image in a page, first upload the image by clicking the Upload File link in the toolbox panel on the left. Acceptable image formats are jpg, gif, and png. An image link that has no file uploaded by that name will appear in red.
• The simplest way to display an image is [[File:Image Small.jpg]]. This displays the image with no text wrapping and aligned on the left.

• Link directly to an image (bypassing the image's page) by using [[Media:Image Small.jpg | Image Small]]. For example, Image Small.
• Link directly to an image's file page by using [[:File:Image Small.jpg]]. For example, File:Image Small.jpg.

Parameters

• There are a few parameters that can be added to adjust how the image is displayed. Separate parameters with a pipe ( | ), anything that is not a qualifier will be assumed to be caption text (only displayed if the "frame" qualifier is present):
  • Adding an alignment parameter allows text and other images to wrap alongside the File: left, center, or right

([[File:Image Small.jpg|left]]) ([[File:Image Small.jpg|center]]) ([[File:Image Small.jpg|right]])

Frame Caption.

• Add a frame with "frame" and include a caption by including the caption text in another piped segment (just include frame for a captionless frame). For example, [[File:Image Small.jpg|frame|Frame Caption.]]. A framed image will by default align on the right (add center or left to change this). By default they will also "float" or allow text wrapping. You can center text by adding <center>Caption text.</center>.

Centered text.

• Frames have some limitations though, such as being unable to resize an image. One way around this is to construct your own frame using a table.

• Alignment issues and text wrapping can cause headaches and not appear how you wish it to. One way of controlling where things appear is to use borderless tables and display the images in the table cells. This isn't perfect either, but does let you define where text appears, where images appear, and is especially useful if displaying lots of images together. See [[ | here]] for more information on using tables, but here is a simple example:

Pixel Size

• You can adjust the size of the image that is displayed by adding pixel maximums. Give the width before "px" and if both width and height use the format WidthxHeightpx. These will not cause an image to be larger than it is, but if the image is larger than the pixels specified, the image will be scaled down (keeping proportions the same. For example:

[[File:Image Small.jpg|50px]]

[[File:Image Small.jpg|30x40px]]

• To use an image (such as an icon) as a hotlink to another page that isn't the image's own page, use the link parameter.

[[File:Viamontian Knight Icon.png|link=Viamontian Knight]]

Image Gallery

It's easy to make a gallery of thumbnails only, not other images, with the <gallery> tag. The syntax is:

<gallery>
File:filename|caption
File:filename|caption
</gallery>

Note that the image code is not enclosed in brackets when enclosed in gallery tags. Captions are optional, and may contain wiki links or other formatting.

for example:

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg
File:Example.jpg|''italic caption''
File:Example.jpg|on page "{{PAGENAME}}"
</gallery>

The gallery tag itself takes several additional parameters:

• caption=?? : sets a caption on the gallery.
• widths=??px : sets the widths of the images.
• heights=??px : sets the (max) heights of the images.
• perrow=?? : sets the number of images per row.

for example:

<gallery caption="Gallery of Images" widths=150px heights=150px perrow=4>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
</gallery>

Animated GIFs

• Some images are vastly improved in conveying information using a simple animation. There are many commercial graphics programs that do this, however directions using free software can be found here.

Shadowbox images

Create a soft shadow box around an image using the following code:

<div class="shadow" style="width:auto; padding:0px; background:none; display:inline-block;">[[File:Img olthoi.jpg]]</div>

Without	With