How To Use Images - Revision history

imported>Arkalor: moved How To Use Images to Help:How To Use Images: Moving to the Help namespace

2014-04-09T00:40:55Z

moved How To Use Images to Help:How To Use Images: Moving to the Help namespace

imported>Tlosk's Bot at 15:06, 24 October 2010

2010-10-24T15:06:31Z

@@ Line 133: / Line 133: @@
 == 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 [[Creating Animated GIFs | here]].
 [[Category:Help]]

imported>Tlosk's Bot at 18:42, 30 July 2009

2009-07-30T18:42:59Z

← Older revision		Revision as of 13:42, 30 July 2009
Line 84:		Line 84:
	[[File:Image Small.jpg\|30x40px]]		[[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, ~~edit~~ the image's page to redirect to the chosen page. For example, this image's page <nowiki>(http://asheron.info/~asheron/index.php?title=File:Viamontian_Knight_icon.png)</nowiki> has been edited with <nowiki>#Redirect [[Viamontian Knight]]</nowiki>. Now clicking on the icon takes you directly to <nowiki>[[Viamontian Knight]]</nowiki>.		*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]]		<nowiki>[[File:Viamontian Knight Icon.png\|link=Viamontian Knight]]</nowiki>

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

	== Image Gallery ==		== Image Gallery ==

imported>Tlosk's Bot: /* Format and Quality */

2009-05-20T18:04:48Z

Format and Quality

← Older revision		Revision as of 13:04, 20 May 2009
Line 21:		Line 21:
	* Any web format is fine: .jpg, .gif, .png (since files are case sensitive on the wiki, please use lower case extensions to avoid duplicates).		* 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.		* 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 ~~artifacting or~~ loss of detail. ([[Wiki Swiss Tool]] can crop icons automatically for you.)		* 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 ==		== Uploading and Linking ==

imported>Tlosk's Bot: /* Format and Quality */

2009-05-20T18:03:39Z

Format and Quality

← Older revision		Revision as of 13:03, 20 May 2009
Line 19:		Line 19:

	== Format and Quality ==		== Format and Quality ==
	* Any web format is fine: .jpg, .gif, .png.		* 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.		* 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 artifacting or loss of detail. ([[Wiki Swiss Tool]] can crop icons automatically for you.)		* 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 artifacting or loss of detail. ([[Wiki Swiss Tool]] can crop icons automatically for you.)

imported>Tlosk at 16:36, 20 May 2009

2009-05-20T16:36:11Z

← Older revision		Revision as of 11:36, 20 May 2009
Line 25:		Line 25:
	== Uploading and Linking ==		== Uploading and Linking ==
	* To use an image in a page, first upload the image by clicking the [[:Special:Upload \| 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.		* To use an image in a page, first upload the image by clicking the [[:Special:Upload \| 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 <nowiki>[[~~Image~~:Image Small.jpg]]</nowiki>. This displays the image with no text wrapping and aligned on the left.		* The simplest way to display an image is <nowiki>[[File:Image Small.jpg]]</nowiki>. This displays the image with no text wrapping and aligned on the left.
	[[~~Image~~:Image Small.jpg]]		[[File:Image Small.jpg]]
	* Link directly to an image (bypassing the image's page) ~~can be accomplished~~ by using <nowiki>[[Media:Image Small.jpg \| Image Small]]</nowiki>. For example, [[Media:Image Small.jpg \| Image Small]].		* Link directly to an image (bypassing the image's page) by using <nowiki>[[Media:Image Small.jpg \| Image Small]]</nowiki>. For example, [[Media:Image Small.jpg \| Image Small]].
			* Link directly to an image's file page by using <nowiki>[[:File:Image Small.jpg]]</nowiki>. For example, [[:File:Image Small.jpg]].

	== Parameters ==		== 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):		* 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 ~~image~~: left, center, or right		**Adding an alignment parameter allows text and other images to wrap alongside the File: left, center, or right
	(<nowiki>[[~~Image~~:Image Small.jpg\|left]]</nowiki>)		(<nowiki>[[File:Image Small.jpg\|left]]</nowiki>)
	(<nowiki>[[~~Image~~:Image Small.jpg\|center]]</nowiki>)		(<nowiki>[[File:Image Small.jpg\|center]]</nowiki>)
	(<nowiki>[[~~Image~~:Image Small.jpg\|right]]</nowiki>)		(<nowiki>[[File:Image Small.jpg\|right]]</nowiki>)

	[[~~Image~~:Image Small.jpg\|left]]		[[File:Image Small.jpg\|left]]
	[[~~Image~~:Image Small.jpg\|center]]		[[File:Image Small.jpg\|center]]
	[[~~Image~~:Image Small.jpg\|right]]		[[File:Image Small.jpg\|right]]


Line 46:		Line 47:


	[[~~Image~~:Image Small.jpg\|frame\|Frame Caption.]]		[[File:Image Small.jpg\|frame\|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, <nowiki>[[~~Image~~:Image Small.jpg\|frame\|Frame Caption.]]</nowiki>. 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 <nowiki><center>Caption text.</center>.</nowiki>		*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, <nowiki>[[File:Image Small.jpg\|frame\|Frame Caption.]]</nowiki>. 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 <nowiki><center>Caption text.</center>.</nowiki>


Line 58:		Line 59:

	{\|border=1 cellspacing=0 align=right		{\|border=1 cellspacing=0 align=right
	\|[[~~Image~~:Image Small.jpg\|125px]]		\|[[File:Image Small.jpg\|125px]]
	\|-		\|-
	\|align=center\|Centered text.		\|align=center\|Centered text.
Line 75:		Line 76:
	*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:		*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:

	<nowiki>[[~~Image~~:Image Small.jpg\|50px]]</nowiki>		<nowiki>[[File:Image Small.jpg\|50px]]</nowiki>

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

	<nowiki>[[~~Image~~:Image Small.jpg\|30x40px]]</nowiki>		<nowiki>[[File:Image Small.jpg\|30x40px]]</nowiki>

	[[~~Image~~:Image Small.jpg\|30x40px]]		[[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, edit the image's page to redirect to the chosen page. For example, this image's page <nowiki>(http://asheron.info/~asheron/index.php?title=~~Image~~:Viamontian_Knight_icon.png)</nowiki> has been edited with <nowiki>#Redirect [[Viamontian Knight]]</nowiki>. Now clicking on the icon takes you directly to <nowiki>[[Viamontian Knight]]</nowiki>.		*To use an image (such as an icon) as a hotlink to another page that isn't the image's own page, edit the image's page to redirect to the chosen page. For example, this image's page <nowiki>(http://asheron.info/~asheron/index.php?title=File:Viamontian_Knight_icon.png)</nowiki> has been edited with <nowiki>#Redirect [[Viamontian Knight]]</nowiki>. Now clicking on the icon takes you directly to <nowiki>[[Viamontian Knight]]</nowiki>.

	[[~~Image~~:Viamontian_Knight_icon.png]]		[[File:Viamontian_Knight_icon.png]]

	== Image Gallery ==		== Image Gallery ==
Line 92:		Line 93:
	<pre>		<pre>
	<gallery>		<gallery>
	~~Image~~:filename\|caption		File:filename\|caption
	~~Image~~:filename\|caption		File:filename\|caption
	</gallery>		</gallery>
	</pre>		</pre>
Line 104:		Line 105:
	<pre>		<pre>
	<gallery>		<gallery>
	~~Image~~:Example.jpg\|Item 1		File:Example.jpg\|Item 1
	~~Image~~:Example.jpg\|a link to [[Help:Contents]]		File:Example.jpg\|a link to [[Help:Contents]]
	~~Image~~:Example.jpg		File:Example.jpg
	~~Image~~:Example.jpg		File:Example.jpg
	~~Image~~:Example.jpg\|''italic caption''		File:Example.jpg\|''italic caption''
	~~Image~~:Example.jpg\|on page "{{PAGENAME}}"		File:Example.jpg\|on page "{{PAGENAME}}"
	</gallery>		</gallery>
	</pre>		</pre>
Line 123:		Line 124:
	<pre>		<pre>
	<gallery caption="Gallery of Images" widths=150px heights=150px perrow=4>		<gallery caption="Gallery of Images" widths=150px heights=150px perrow=4>
	~~Image~~:Example.jpg\|Item 1		File:Example.jpg\|Item 1
	~~Image~~:Example.jpg\|a link to [[Help:Contents]]		File:Example.jpg\|a link to [[Help:Contents]]
	</gallery>		</gallery>
	</pre>		</pre>

imported>Tlosk: /* Image Gallery */

2009-02-14T22:56:39Z

Image Gallery

← Older revision		Revision as of 17:56, 14 February 2009
Line 122:		Line 122:

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

imported>Tlosk: /* Image Gallery */

2009-02-09T13:05:47Z

Image Gallery

← Older revision		Revision as of 08:05, 9 February 2009
Line 122:		Line 122:

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

imported>Tlosk at 12:17, 9 February 2009

2009-02-09T12:17:17Z

@@ Line 1: / Line 1: @@
-See also [http://www.mediawiki.org/wiki/Help:Images MetaWiki Help:Images]
+{{RightToC}}
-*'''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.
+== Naming ==
 **'''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:
@@ Line 15: / Line 17: @@
 ::Example:
 ::Sword of Lost Light Icon.png
-* To use an image in a page, first upload the image by clicking the [[:Special:Upload | 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.
+== Uploading and Linking ==
 * To use an image in a page, first upload the image by clicking the [[:Special:Upload | 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 <nowiki>[[Image:Image Small.jpg]]</nowiki>. This displays the image with no text wrapping and aligned on the left.
 [[Image:Image Small.jpg]]
-* There are a few qualifiers that can be added to adjust how the image is displayed. Seperate qualifers with a pipe (|), anything that is not a qualifier will be assumed to be caption text (only displayed if the "frame" qualifier is present):
+* Link directly to an image (bypassing the image's page) can be accomplished by using <nowiki>[[Media:Image Small.jpg | Image Small]]</nowiki>. For example, [[Media:Image Small.jpg | Image Small]].
-**Adding an alignment qualifer allows text and other images to wrap alongside the image: left, center, or right
 (<nowiki>[[Image:Image Small.jpg|left]]</nowiki>)
 (<nowiki>[[Image:Image Small.jpg|center]]</nowiki>)
@@ Line 66: / Line 72: @@
+=== 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:
@@ Line 84: / Line 87: @@
 [[Image:Viamontian_Knight_icon.png]]
 *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 [[Creating Animated GIFs | here]].
 [[Category:Help]]

imported>Tlosk at 13:31, 8 September 2008

2008-09-08T13:31:28Z

← Older revision		Revision as of 08:31, 8 September 2008
Line 41:		Line 41:

	[[Image:Image Small.jpg\|frame\|Frame Caption.]]		[[Image:Image Small.jpg\|frame\|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, <nowiki>[[Image:Image Small.jpg\|frame\|Frame Caption.]]</nowiki>. 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 <nowiki><center>Caption text.</center>.		*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, <nowiki>[[Image:Image Small.jpg\|frame\|Frame Caption.]]</nowiki>. 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 <nowiki><center>Caption text.</center>.</nowiki>