Help:Images

This page explains how to display and format images on the wiki. For information on uploading images, see Help:Managing files.

For what type of images are acceptable to include on Fanlore, see Fanlore:What Fanlore is not.

Images and other files can be uploaded via the Special:Upload page. Uploaded images can be accessed on the Special:ListFiles page.

Note: In an earlier version of mediawiki, the "File" namespace was called "Image". Therefore, a lot of images that display on Fanlore articles will have wiki markup like [[Image:Name_of_file]] instead of [[File:Name_of_file]]. Either syntax should still display correctly.

How to display an image on a wiki article

Using the Visual Editor

When inserting an image or media file in the Visual Editor, you can either use the Upload file page to upload the file separately (refer to Upload a file for how to do this), or upload and insert it following these steps:

1. In the toolbar, select "Insert" and then "Images and media"
2. Select the "Upload" tab to upload a new file from your device
3. Select the "Select a file" button
4. Choose the file you would like to upload
5. If this is your own work or you are uploading the file according to Fanlore's Image Policies, check the box labelled "This is my own work / I confirm that I am uploading this file following the terms of service and licensing policies on Fanlore."
6. Select "Upload" in the top right corner of the window
7. In the window that follows, you can give the file a more descriptive name, and a description (this is required). If the image is not your own work, some important details to include here are: creator, source, and copyright status (such as Fair Use, public domain, or own work)
8. Hit "Save", which will load a preview of your image and its metadata
9. Select "Use this image", which will take you to a window where you can add a caption and alt text. We recommend using the caption to credit the creator of the work, and link back to the source where applicable
   • You can also select "Advanced settings" to adjust Advanced settings for the image, such as the text wrapping, image type (thumbnail, frameless, frame or basic), and image size (selecting "custom" will allow you to manually adjust the image size in pixels). Note that only thumbnails can have captions - if you select another image type, any caption you have set will not display.
10. Once you're finished, select "Apply changes". The image or media file will now be inserted on your page.

If you're inserting an image that you've previously uploaded, you can follow these steps to insert it:

1. In the toolbar, select "Insert" and then "Images and media"
2. The window that appears will display a grid of your most recently-uploaded media. If you can't locate the file here, type its name into the search bar at the top to find it
3. Select the image from the recently-uploaded files or the search results, and select "Use this image". This will take you to a window where you can add a caption and alt text
   • You can also select "Advanced settings" to adjust Advanced settings for the image, such as the text wrapping, image type (thumbnail, frameless, frame or basic), and image size (selecting "custom" will allow you to manually adjust the image size in pixels). Note that only thumbnails can have captions - if you select another image type, any caption you have set will not display.
4. Once you're finished, select "Apply changes". The image or media file will now be inserted on your page.

Using the Source Editor

Before inserting an image using the Source Editor, ensure that you've uploaded your image following these steps: Using the Upload file page. Check out the Image Formatting Cheatsheet lower down for examples of image markup in action.

The full syntax for displaying an image in an article is:

[[File:{name}|{options}]]

Where options can be zero or more of the following, separated by pipes:

• thumb, thumbnail, or frame: Controls how the image is formatted
• left, right, center, none: Controls the alignment of the image on the page
• {width}px: Resizes the image to the given width in pixels
• {caption text}
• Special cases:
  • page=1: displays the specified page when showing a djvu file.

The options can be given in any order. If a given option does not match any of the other possibilities, it is assumed to be the caption text. Caption text can contain wiki links or other formatting.

Linking to image files hosted elsewhere

If you prefer not to embed an image directly but want to link to it, such as in a list of example fanworks, you can do this in the same way that you would another external webpage. Refer to Help:Links - External links to learn more about how to insert an external link on Fanlore.

Note: Images that are not hosted on Fanlore will not display on Fanlore pages.

How to create an image gallery

A gallery of multiple images can only be created once you've uploaded the image files to Fanlore, so first make sure you've done this following the steps at Upload a file.

To insert a new gallery using the Visual Editor:

1. In the toolbar, select "Insert" and then "More" to display the full list, and select "Gallery"
2. Select the Options tab at the top to make changes to your gallery configuration, such as changing how the images are laid out ("Gallery mode"), adding a caption, or changing the image width, height, or number of images per row
3. In the Images tab, select the first image you want to add to your gallery from your recently-uploaded files, or search for the filename using the search bar.
4. After selecting the image, you have the option to add a caption and alt text
5. To add another image, select "Add new image" in the bottom left corner. If you change your mind about including an image, you can select "Remove image" to get rid of it
6. Repeat until you have all the images for your gallery. Once you're finished, select "Apply changes" to exit the gallery editing window
7. To make changes to any existing gallery, you can select it and then select the "Edit" button.

To insert a new gallery using the Source Editor, use the following markup:

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

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''
</gallery>

is formatted as:

• 

  Item 1

• 

  a link to Help:Contents

• 
• 
• 

  italic caption

Formatting images in articles

If you want an image to appear directly below the infobox, switch to the Source Editor mode, then place the image thumb immediately after the template in the edit window with this code:

<div style="float: right; clear: right">[[Image:Your image here.jpg|thumb]]</div>

Substitute Your image here.jpg with the actual file name. Here is an example.

The FixBunching template also lines up images vertically down the side of a page. However, it does not clear the infobox.

For more ideas on how to arrange images on the page, refer to Doro's image guide.

Image Formatting Cheatsheet

Description	You type	You get
Embed image (with alt text) Refer to Help:Accessibility for more information on writing alt text. You can also use the alt= parameter to add alt text to any image, e.g.:	[[File:Example.jpg|Sunflowers]] [[File:Example.jpg|alt="Sunflowers"]]
Link to description page	[[:File:Example.jpg]] [[:File:Example.jpg|Sunflowers]]	File:Example.jpg Sunflowers
Link directly to file	[[Media:Example.jpg]] [[Media:Example.jpg|Sunflowers]]	Media:Example.jpg Sunflowers
Thumbnail (centered, 100 pixels wide, with caption)	[[File:Example.jpg|center|thumb|100px|Sunflowers]]	Sunflowers
Border (100 pixels) Results in a very small gray border	[[File:Example.jpg|border|100px]]
Frameless Like thumbnail, respect user preferences for image width but without border and no right float.	[[File:Example.jpg|frameless]]

Related help pages

• Help:Image templates for templates to add to image pages.
• Help:Managing files for uploading files, etc.
• Help:Filtering images for configuring your browser to not see images on Fanlore.
• Help:Linked images for advanced technical information.
• Fanlore:Images for the image policy.
• Fanlore:What Fanlore is not for the scope of what type of images Fanlore includes.
• Help:Accessibility for information on writing alt text.

• More image syntax from Wikipedia

For any other questions, you can use the Talk page or contact the Fanlore Committee.