How To Use Images - Revision history

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

2010-10-24T15:06:31Z

← Older revision	Revision as of 15:06, 24 October 2010
(No difference)

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 18:42, 30 July 2009
(No difference)

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

2009-07-30T18:42:59Z

← Older revision		Revision as of 18: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 18:04, 20 May 2009
(No difference)

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

2009-05-20T18:04:48Z

Format and Quality

← Older revision		Revision as of 18: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 18:03, 20 May 2009
(No difference)

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

2009-05-20T18:03:39Z

Format and Quality

← Older revision		Revision as of 18: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 16:36, 20 May 2009
(No difference)

imported>Tlosk at 16:36, 20 May 2009

2009-05-20T16:36:11Z

← Older revision		Revision as of 16: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>