Difference between revisions of "Images"
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
The following will only work if you first '''upload an image file''' to Spydiewiki.com or if it '''already exists''' | The following will only work if you first '''upload an image file''' to Spydiewiki.com or if it '''already exists''' | ||
== Basics of displaying images == | == Basics of displaying images and linking to them == | ||
{|{{Articletable}} | {|{{Articletable}} | ||
|- | |- | ||
{{Tableheading}}''' | {{Tableheading}}'''Code and purpose''' | ||
{{Tableheading}}'''You get''' | {{Tableheading}}'''You get''' | ||
|- | |- | ||
| | |<tt><nowiki>[[Image:Testpicture_small.jpg|Mountains]]</nowiki></tt><br><small>Embed image (with alt text)</small> | ||
|[[Image:Testpicture_small.jpg|Mountains]] | |||
<tt><nowiki>[[Image:Testpicture_small.jpg|Mountains]]</nowiki></tt> | |||
| | |||
[[Image:Testpicture_small.jpg|Mountains]] | |||
|- | |- | ||
| | |<tt><nowiki>[[:Image:Testpicture_small.jpg]]</nowiki></tt><br><tt><nowiki>[[:Image:Testpicture_small.jpg|Mountains]]</nowiki></tt><br><small>Link to description page</small> | ||
|valign="top" |[[:Image:Testpicture_small.jpg]]<br>[[:Image:Testpicture_small.jpg|Mountains]] | |||
<tt><nowiki>[[:Image:Testpicture_small.jpg]]</nowiki>< | |||
<tt><nowiki>[[:Image:Testpicture_small.jpg|Mountains]]</nowiki></tt> | |||
| | |||
[[:Image:Testpicture_small.jpg]]<br | |||
[[:Image:Testpicture_small.jpg|Mountains]] | |||
|- | |- | ||
| | |<tt><nowiki>[[Media:Testpicture_small.jpg]]</nowiki></tt><br><tt><nowiki>[[Media:Testpicture_small.jpg|Mountains]]</nowiki></tt><br><small>Link directly to file</small> | ||
|valign="top" |[[Media:Testpicture_small.jpg]]<br>[[Media:Testpicture_small.jpg|Mountains]] | |||
<tt><nowiki>[[Media:Testpicture_small.jpg]]</nowiki></tt><br | |||
<tt><nowiki>[[Media:Testpicture_small.jpg|Mountains]]</nowiki></tt> | |||
| | |||
[[Media:Testpicture_small.jpg]]<br | |||
[[Media:Testpicture_small.jpg|Mountains]] | |||
|- | |- | ||
| | |<tt><nowiki>[[Image:Testpicture_small.jpg|left|thumb|100px|Mountains]]</nowiki></tt><br><small>Thumbnail (aligned left, 100px wide, with caption)</small> | ||
|[[Image:Testpicture_small.jpg|left|thumb|100px|Mountains]] | |||
<tt><nowiki>[[Image:Testpicture_small.jpg|left|thumb|100px|Mountains]]</nowiki></tt> | |||
| | |||
[[Image:Testpicture_small.jpg|left|thumb|100px|Mountains]] | |||
|- | |- | ||
|<small><tt>border</tt> results in a very small gray border< | |<tt><nowiki>[[Image:Testpicture_small.jpg|border|100px]]</nowiki></tt><br><small><tt>border</tt> results in a very small gray border.<br>Sometimes the fine gray border cannot be seen whith certain images.</small> | ||
| | |[[Image:Testpicture_small.jpg|border|100px]] | ||
[[Image:Testpicture_small.jpg|border|100px]] | |||
|} | |} | ||
== Syntax == | == Syntax for displaying an image == | ||
The full syntax for displaying an image is: | The full syntax for displaying an image is: | ||
<tt><nowiki>[[Image: | <tt><nowiki>[[Image:Filename.jpg|options]]</nowiki></tt> | ||
Where options can be zero or more of the following, separated by pipes: | Where options can be zero or more of the following, separated by pipes: | ||
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 | {|{{Articletable}} | ||
{{Tableheading}}'''option''' | |||
{{Tableheading}}'''effect''' | |||
|- | |||
|<tt>thumb</tt>, <tt>thumbnail</tt>, or <tt>frame</tt> | |||
|Controls how the image is formatted | |||
|- | |||
|<tt>left</tt>, <tt>right</tt>, <tt>center</tt>, <tt>none</tt> | |||
|Controls the alignment of the image on the page | |||
|- | |||
|<tt>width</tt> | |||
|Resizes the image to the given width in pixels (e.g. <tt>100px</tt>) | |||
|- | |||
|<tt>caption text</tt> | |||
|Adds a caption to your image | |||
|} | |||
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 [[Formatting text|formatting]] and [[Links|links]]. | |||
== Linking to external files == | |||
You can link to an external file using the same syntax used for linking to an external web page. | You can link to an external file using the same syntax used for linking to an external web page. | ||
*<tt><nowiki>[http://url.for/some/image.png]</nowiki></tt> | *<tt><nowiki>[http://url.for/some/image.png]</nowiki></tt> | ||
Line 64: | Line 55: | ||
== Image galleries == | == Image galleries == | ||
It's easy to make a gallery of thumbnails with the <tt><nowiki><gallery></nowiki></tt> tag. | It's easy to make a gallery of thumbnails with the <tt><nowiki><gallery></nowiki></tt> tag. This is how us use it: | ||
<pre> | <pre> | ||
<gallery> | <gallery> | ||
Line 92: | Line 83: | ||
== Related articles == | == Related articles == | ||
* [[]] | *[[Links|Help: Links]] | ||
*[[Formatting text|Help: Formatting text]] | |||
*[[How to write an article|Help: How to write an article]] | |||
[[Category:Help| | [[Category:Help|{{PAGENAME}}]] |
Latest revision as of 01:35, 3 March 2008
The following will only work if you first upload an image file to Spydiewiki.com or if it already exists
Basics of displaying images and linking to them
Code and purpose | You get |
[[Image:Testpicture_small.jpg|Mountains]] Embed image (with alt text) |
![]() |
[[:Image:Testpicture_small.jpg]] [[:Image:Testpicture_small.jpg|Mountains]] Link to description page |
Image:Testpicture_small.jpg Mountains |
[[Media:Testpicture_small.jpg]] [[Media:Testpicture_small.jpg|Mountains]] Link directly to file |
Media:Testpicture_small.jpg Mountains |
[[Image:Testpicture_small.jpg|left|thumb|100px|Mountains]] Thumbnail (aligned left, 100px wide, with caption) |
|
[[Image:Testpicture_small.jpg|border|100px]] border results in a very small gray border. Sometimes the fine gray border cannot be seen whith certain images. |
![]() |
Syntax for displaying an image
The full syntax for displaying an image is:
[[Image:Filename.jpg|options]]
Where options can be zero or more of the following, separated by pipes:
option | effect |
thumb, thumbnail, or frame | Controls how the image is formatted |
left, right, center, none | Controls the alignment of the image on the page |
width | Resizes the image to the given width in pixels (e.g. 100px) |
caption text | Adds a caption to your image |
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 formatting and links.
Linking to external files
You can link to an external file using the same syntax used for linking to an external web page.
- [http://url.for/some/image.png]
Or with different text:
- [http://url.for/some/image.png link text here]
Image galleries
It's easy to make a gallery of thumbnails with the <gallery> tag. This is how us use it:
<gallery> Image:Filename.jpg|Caption 1 Image:Filename.jpg|Caption 2 etc. </gallery>
Captions are optional but strongly recommended, and may contain other formatting like links.
Example:
<gallery> Image:Testpicture_small.jpg|Item 1 Image:Testpicture_small.jpg|Item 2 Image:Testpicture_small.jpg|a link to the [[Main Page]] Image:Testpicture_small.jpg|''italic caption'' </gallery>
Results in:
a link to the Main Page