Difference between revisions of "Help:Image"

Revision as of 21:07, 28 August 2008

Images are always nice to spice up content, and in many cases they are outright needed in order to describe information from a game. Luckily, they are easy enough to add in DiabloWiki.

Adding Images

Jay Wilson, the Lead Game Designer of Diablo 3.

To insert an image on any page, you use a small piece of wiki markup, that you can see is very similar to wiki links: [[Image:filename.jpg]]. Make sure you don't forget to write the file extension. The valid image files for DiabloWiki are:

.gif
.jpg
.png

Images will automatically be made into a large size, and justificated to the left side on a page, but it's easy to change these settings with simple variables in the code. In this case we will be using the Jay Wilson image that you can see "thumbnailed" to the right.

Image Code Variables

The following variables can be added by adding a pipe ("|") after the file name:

Type
- |frame - Creates a frame around the picture. If a caption is added, it is shown below. Picture retains original size, regardless of "size" attributes. Picture is normally floated right.
- |thumb - Resizes the picture to a thumbnail, adds a frame and room for a caption. Automatically aligns "right" unless overwritten with a "left" variable.
- |thumbnail - Same as "thumb".

Location
- |right - Aligns the image floating to the right. Text will align around the left hand side.
- |left - Aligns the image floating to the left. Text will align around the right hand side.
- |center - Centers the image on the page. Text aove and below only.

Size
- |150px - Sets the width of the image to 150 pixels. The image size ration is preserved.
- |150px100px - The image becomes no wider than 150 pixels and no higher than 100 pixels. The image size ration is preserved.
- If not used, it will use the standard size.

Caption - Any element that isn't identified as one of the above.
- |(any text) - This will create an alternative mouseover tooltip instead of the standard "Image:Jay_Wilson.jpg" on regular images. Will add a caption below the image for "frames" and "thumbs".

Examples:

[[Image:Jay_Wilson.jpg|left|frame|150px|Caption about [[Jay Wilson]].]]
[[Image:Jay_Wilson.jpg|right|150px]]
[[Image:Jay_Wilson.jpg|thumb|150px|Caption about [[Jay Wilson]].]]

Notice how the "150px" attribute on the "frame" image does not work.

Caption about Jay Wilson.

Linking to Images

Sometimes you might want to link directly to an image instead of embedding it on the page. If so there are two ways to do this:

Use a direct, external, link to the image url: Image
Use an internal wiki link to the image page: Image

The former way works exactly like any external link (read more about that later), for the link title, URL or a little bracketed link. The latter works just like Category Links, with a ":" in front, and with the possibility to change title with a pipe ("|").

Read more at the markup link syntax.

To insert an image, just add the following code, that you can see is very similar to other wiki links: [[Image:filename.jpg]]. Make sure you don't forget to write the file extension. The valid image files for DiabloWiki are:

.gif
.jpg
.png

Images will automatically be justificated to the left side on a page, but it's easy to change this with variables, to make boxes around images and to change their size. Read more about images on the Image Help page.

The example above shows a jpg, but it may use any valid file extension. Images inserted this way will be placed with left justification, and text will wrap around them.

To link to the GWO Wiki page for the image, type:

[[:Image:filename.jpg]]

Images automatically link to the full page for that image, where the image is displayed full size, along with any caption and copyright info included for it. Images may be set to link directly to other pages, though this is non-standard wiki practice, and its recommended that such links are provided in the image's caption, or are placed directly on the full image page. To link from an image:

{{clickpic|TARGET PAGE TITLE|FULL PATH OF IMAGE FILE}}

Where "FULL PATH OF IMAGE FILE" is the full path, for example http://www.imaginarywiki.com/wiki/index/image.jpg - so this works better with external images, but may be used with images you have uploaded with you use their full path instead of the usual shortcut.

(which must have been previously uploaded to the wiki)

Image Formatting

Images may be presented in various ways by adding commands within the brackets, after the image, separated by "pipes." For example, the image below this paragraph has the following code:

File:Mon-achmel1.jpg

Words about the image.

 [[Image:Mon-achmel1.jpg|center|thumb|125px|Words about the image.]]

The most common image formatting command is "frame" which simply adds a border around an image and (by default) right justifies it. Various other image formatting commands (such as thumb, or inserting a caption) will create a frame automatically, as seen in the above example.

Right/left/center are valid justifying commands.
Thumb will thumbnail an image, and should be used when the full image is so large it will affect a page's formatting. Default is 200 pixels wide. If a different display width is desired, simply type it in, immediately after the thumb command, separated by a pipe.
To caption an image, simply type whatever you wish the caption to be, after the other commands, immediately before the closing double brackets. Wiki formatting is to keep captions as short and to the point as possible. Long captions will stretch the image frame beyond the image, and look ugly.

Wiki Help Index [e]
• Help Contents • Community Portal • Markup - Create article - Sandbox • Help FAQ • Wiki Support • Category Structure • DiabloWiki Policies • Help Category • Link us	• Wiki Tools • Article History • Boilerplates • Deleting pages • Disambiguations • Moving Articles • Redirects • Stubs • Templates	• Glossary • Articles • Categories • Images • Linking • Tables • Talk Pages • Vandalism

@@ Line 1: / Line 1: @@
+'''Images''' are always nice to spice up content, and in many cases they are outright needed in order to describe information from a game. Luckily, they are easy enough to add in {{WikiTitle}}.
+==Adding Images==
+[[Image:Jay_Wilson.jpg|thumb|right|150px|[[Jay Wilson]], the Lead Game Designer of [[Diablo 3]].]]To insert an image on any page, you use a small piece of [[Help:Markup|wiki markup]], that you can see is very similar to [[Help:Markup#Creating Links|wiki links]]: <nowiki>[[Image:filename.jpg]]</nowiki>. Make sure you don't forget to write the file extension. The valid image files for {{WikiTitle}} are:
+* .gif
+* .jpg
+* .png
+Images will automatically be made into a large size, and justificated to the left side on a page, but it's easy to change these settings with simple variables in the code. In this case we will be using the [[:Image:Jay_Wilson.jpg|Jay Wilson image]] that you can see "thumbnailed" to the right.
+===Image Code Variables===
+The following variables can be added by adding a pipe ("|") after the file name:
+* '''Type'''
+** <span style="color:white;">|frame</span> - Creates a frame around the picture. If a caption is added, it is shown below. Picture retains original size, regardless of "size" attributes. Picture is normally floated right.
+** <span style="color:white;">|thumb</span> - Resizes the picture to a thumbnail, adds a frame and room for a caption. Automatically aligns "right" unless overwritten with a "left" variable.
+** <span style="color:white;">|thumbnail</span> - Same as "thumb".
+* '''Location'''
+** <span style="color:white;">|right</span> - Aligns the image floating to the right. Text will align around the left hand side.
+** <span style="color:white;">|left</span> - Aligns the image floating to the left. Text will align around the right hand side.
+** <span style="color:white;">|center</span> - Centers the image on the page. Text aove and below only.
+* '''Size'''
+** <span style="color:white;">|150px</span> - Sets the width of the image to 150 pixels. The image size ration is preserved.
+** <span style="color:white;">|150px100px</span> - The image becomes no wider than 150 pixels and no higher than 100 pixels. The image size ration is preserved.
+** If not used, it will use the standard size.
+* '''Caption''' - Any element that isn't identified as one of the above.
+** <span style="color:white;">|(any text)</span> - This will create an alternative mouseover tooltip instead of the standard "Image:Jay_Wilson.jpg" on regular images. Will add a caption below the image for "frames" and "thumbs".
+Examples:
+* <nowiki>[[Image:Jay_Wilson.jpg|left|frame|150px|Caption about [[Jay Wilson]].]]</nowiki>
+* <nowiki>[[Image:Jay_Wilson.jpg|right|150px]]</nowiki>
+* <nowiki>[[Image:Jay_Wilson.jpg|thumb|150px|Caption about [[Jay Wilson]].]]</nowiki>
+Notice how the "150px" attribute on the "frame" image does not work.
+[[Image:Jay_Wilson.jpg|left|frame|150px|Caption about [[Jay Wilson]].]][[Image:Jay_Wilson.jpg|right|150px]][[Image:Jay_Wilson.jpg|thumb|150px|Caption about [[Jay Wilson]].]]
+==Linking to Images==
+Sometimes you might want to link directly to an image instead of embedding it on the page. If so there are two ways to do this:
+* Use a direct, external, link to the image url: [http://www.diablowiki.net/images/2/24/Jay_Wilson.jpg Image]
+* Use an internal wiki link to the image page: [[:Image:Jay_Wilson.jpg| Image]]
+The former way works exactly like any external link (read more about that later), for the link title, URL or a little bracketed link. The latter works just like [[Help:Markup#Linking_to_Categories|Category Links]], with a ":" in front, and with the possibility to change title with a pipe ("|").
+Read more at the [[Help:Markup#Creating Links|markup link syntax]].
 To insert an image, just add the following code, that you can see is very similar to other wiki links: <nowiki>[[Image:filename.jpg]]</nowiki>. Make sure you don't forget to write the file extension. The valid image files for {{WikiTitle}} are:
 * .gif
@@ Line 4: / Line 74: @@
 * .png
 Images will automatically be justificated to the left side on a page, but it's easy to change this with variables, to make boxes around images and to change their size. Read more about images on the [[Help:Image|Image Help page]].
 The example above shows a jpg, but it may use any valid file extension. Images inserted this way will be placed with left justification, and text will wrap around them.