How To Use Images: Difference between revisions

From Drunkapedia
Jump to: navigation, search
imported>Tlosk
No edit summary
imported>Tlosk
No edit summary
Line 31: Line 31:


*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:
*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:
* 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]].
*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>
[[Image:Image Small.jpg|50px]]
<nowiki>[[Image:Image Small.jpg|30x40px]]</nowiki>
[[Image: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>.
[[Image:Viamontian_Knight_icon.png]]
[[Category:Help]]
[[Category:Help]]

Revision as of 05:40, 11 May 2008

  • To use an image in a page, first upload the image by clicking the Upload File link in the toolbox panel on the left. Acceptible image formats are jpg, gif, and png. An image link that has no file uploaded by that name will appear in red.
  • 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.
  • Please keep uploaded images under 75K in size, the smaller the better.
  • The simplest way to display an image is [[Image:Image Small.jpg]]. This displays the image with no text wrapping and aligned on the left.

  • 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):
    • Adding an alignment qualifer allows text and other images to wrap alongside the image: left, center, or right

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





  • 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, [[Image:Image Small.jpg|frame|An example image in a frame.]]. 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.
An example image in a frame.




  • 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:



  • Link directly to an image (bypassing the image's page) can be accomplished by using [[Media:Image Small.jpg | Image Small]]. For example, Image Small.
  • 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:

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

[[Image: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 (http://asheron.info/~asheron/index.php?title=Image:Viamontian_Knight_icon.png) has been edited with #Redirect [[Viamontian Knight]]. Now clicking on the icon takes you directly to [[Viamontian Knight]].

File:Viamontian Knight icon.png