Help:Images: Difference between revisions
From the Kingdom Hearts Wiki, the Kingdom Hearts encyclopedia
Jump to navigationJump to search
No edit summary |
m (Text replacement - "\bthe the\b" to "the") |
||
| (12 intermediate revisions by 8 users not shown) | |||
| Line 1: | Line 1: | ||
This page has instructions on how to use images in articles. If you see something that could be improved, feel free to edit this page. | This page has instructions on how to use images in articles. If you see something that could be improved, feel free to edit this page. | ||
==General | ==General information== | ||
All image setups follow the same basic syntax, however they do not ''have'' to be used. The basic syntax is:<br> | All image setups follow the same basic syntax, however they do not ''have'' to be used. The basic syntax is:<br> | ||
<nowiki>[[ | <nowiki>[[File:</nowiki><font color=red>name</font>|<font color=blue>type</font>|<font color=green>location</font>|<font color=purple>size</font>|<font color=gray>caption</font><nowiki>]]</nowiki><br> | ||
However, everything after ''name'' can come in whatever order the user wants it to. | However, everything after ''name'' can come in whatever order the user wants it to. | ||
==In depth | ==In-depth information== | ||
=== | ===Name=== | ||
The name is the only thing that isn't optional when adding an image to an article (naturally). An important thing to remember is that the name of the image is '''semi-caps-sensitive''' in the same way the search-function is, which means that if an image is called ''FFWiki.jpg'', then writing ''FFWiKi.jpg'' or ''FFWiki.JPG'' will '''not''' | The name is the only thing that isn't optional when adding an image to an article (naturally). An important thing to remember is that the name of the image is '''semi-caps-sensitive''' in the same way the search-function is, which means that if an image is called ''FFWiki.jpg'', then writing ''FFWiKi.jpg'' or ''FFWiki.JPG'' will '''not''' retrieve the image. | ||
===Type=== | ===Type=== | ||
| Line 19: | Line 19: | ||
:When not specifying the type as one of the above, no frame will appear. Size can be changed in both direction, i.e. "inflation" is possible. If caption is written, it will only appear if the mouse is hovering over the image. | :When not specifying the type as one of the above, no frame will appear. Size can be changed in both direction, i.e. "inflation" is possible. If caption is written, it will only appear if the mouse is hovering over the image. | ||
=== | ===Location=== | ||
By default, images float to the left, unless otherwise specified or when using the type | By default, images float to the left, unless otherwise specified or when using the type ''thumb''. | ||
*''left'' | *''left'' | ||
:Image floats to the left and text will flow to the right of the image | :Image floats to the left and text will flow to the right of the image | ||
| Line 31: | Line 31: | ||
*If more than one location is given, only the last one will take effect. If no location is given, it will use its default. | *If more than one location is given, only the last one will take effect. If no location is given, it will use its default. | ||
=== | ===Size=== | ||
Size is always measured by the size of the width of the image in pixels (''px''). The height will automatically be computed, so that the image will keep its aspect ratio. If using thumb, the size cannot be "inflated" to a width higher than the one the uploaded has. | Size is always measured by the size of the width of the image in pixels (''px''). The height will automatically be computed, so that the image will keep its aspect ratio. If using thumb, the size cannot be "inflated" to a width higher than the one the uploaded has. | ||
*''100px'' | *''100px'' | ||
:Will resize the width to be 100 pixels (100 can be replaced by whatever number you wish). Height will automatically be computed to fit the image's aspect ratio. | :Will resize the width to be 100 pixels (100 can be replaced by whatever number you wish). Height will automatically be computed to fit the image's aspect ratio. | ||
*''100x150px'' | *''100x150px'' | ||
:Using this method is a way of limiting the image to whatever limit it hits first. This corresponds to saying | :Using this method is a way of limiting the image to whatever limit it hits first. This corresponds to saying the width must not exceed 100 pixels and the height must not exceed 150 pixels. Once the image hits one of these limits, the opposite will be scaled to keep aspect ratio. | ||
=== | ===Caption=== | ||
Any text entered, that is not recognized as one of the above pre-set commands will be assumed to be caption text. If several captions are entered, only the last will take effect. | Any text entered, that is not recognized as one of the above pre-set commands will be assumed to be caption text. If several captions are entered, only the last will take effect. | ||
==Examples== | ==Examples== | ||
=== | ===Name=== | ||
Example on the cap-sensitivity. | Example on the cap-sensitivity. | ||
{|border="solid" style="text-align:center" | {|border="solid" style="text-align:center" | ||
| Line 51: | Line 51: | ||
|- | |- | ||
|'''Result''' | |'''Result''' | ||
|[[ | |[[File:Example.png|100px]] | ||
|[[ | |[[File:ExamPle.png|100px]] | ||
|[[ | |[[File:Example.PNG|100px]] | ||
|} | |} | ||
=== | ===Type=== | ||
*''thumb'' | *''thumb'' | ||
:First is the default, seen on the far right. The syntax for it is simply <nowiki>[[ | :First is the default, seen on the far right. The syntax for it is simply <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=blue>thumb</font>|<font color=gray>placement of text</font><nowiki>]]</nowiki> | ||
[[ | [[File:Example.png|thumb|placement of text]] | ||
{{-}} | {{-}} | ||
:The following example will be shown with a user-specified location and size. The syntax is <nowiki>[[ | :The following example will be shown with a user-specified location and size. The syntax is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=blue>thumb</font>|<font color=green>left</font>|<font color=purple>100px</font>|<font color=gray>placement of text</font><nowiki>]]</nowiki><br> | ||
[[ | [[File:Example.png|thumb|left|100px|placement of text]] | ||
{{-}} | {{-}} | ||
:The following example is to show that an image cannot be inflated when using ''thumb''. The width of the uploaded image is 481px. The syntax will however be written with the width being set to 1000px. The syntax is <nowiki>[[ | :The following example is to show that an image cannot be inflated when using ''thumb''. The width of the uploaded image is 481px. The syntax will however be written with the width being set to 1000px. The syntax is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=blue>thumb</font>|<font color=green>left</font>|<font color=purple>1000px</font><nowiki>]]</nowiki>. It will be set above the same image with the width set to 481px so that one can see that there is no difference in size<br> | ||
[[Example.png|thumb|left|1000px|width set to 1000 pixels]] | [[File:Example.png|thumb|left|1000px|width set to 1000 pixels]]<br> | ||
[[Example.png|thumb|left|481px|width set to 481 pixels]] | [[File:Example.png|thumb|left|481px|width set to 481 pixels]] | ||
{{-}} | {{-}} | ||
*''frame'' | *''frame'' | ||
:First, the default. Syntax is <nowiki>[[ | :First, the default. Syntax is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=blue>frame</font>]]<br> | ||
[[ | [[File:Example.png|frame]] | ||
{{-}} | {{-}} | ||
:Now, to show that setting a with has no effect. Width will be set to 150 pixels. Additionally, caption will be added and location will be moved to center. Syntax is <nowiki>[[ | :Now, to show that setting a with has no effect. Width will be set to 150 pixels. Additionally, caption will be added and location will be moved to center. Syntax is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=blue>frame</font>|<font color=green>center</font>|<font color=purple>150px</font>|<font color=gray>Setting width makes no difference</font><nowiki>]]</nowiki> | ||
[[ | [[File:Example.png|frame|center|150px|Setting width makes no difference]] | ||
{{-}} | {{-}} | ||
*No specified type | *No specified type | ||
:The following will show that inflation is possible, and that caption only appears when the mouse hovers above the image. The image from the ''thumb'' example will be used. Syntax will be <nowiki>[[ | :The following will show that inflation is possible, and that caption only appears when the mouse hovers above the image. The image from the ''thumb'' example will be used. Syntax will be <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=purple>600px</font>|<font color=gray>Only readable if you hover over the image</font><nowiki>]]</nowiki><br> | ||
[[ | [[File:Example.png|600px|Only readable if you hover over the image]] | ||
=== | ===Location=== | ||
:Syntax will be <nowiki>[[ | :Syntax will be <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>''location''</font>|<font color=purple>150px</font><nowiki>]]</nowiki> (with ''location'' being switched with whatever the example is about) accompanied by a sequence of randomly pressed letters, before and after the image, to symbolize text. | ||
*''left'' (<nowiki>[[ | *''left'' (<nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>left</font>|<font color=purple>150px</font><nowiki>]]</nowiki>)<br> | ||
<font color=red>asidjoiajsd ads asdpoi alhdas paos<br> | <font color=red>asidjoiajsd ads asdpoi alhdas paos<br> | ||
soiajs aishd oasd ljakbsd9ia d<br> | soiajs aishd oasd ljakbsd9ia d<br> | ||
[[ | [[File:Example.png|left|150px]] | ||
aduh aspodi asdjk earjbh asdiu ad<br> | aduh aspodi asdjk earjbh asdiu ad<br> | ||
asdad sdiofj jrg sdifu werosdyfusijdf<br> | asdad sdiofj jrg sdifu werosdyfusijdf<br> | ||
| Line 93: | Line 93: | ||
{{-}} | {{-}} | ||
<br><br><br> | <br><br><br> | ||
*''right'' (<nowiki>[[ | *''right'' (<nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>right</font>|<font color=purple>150px</font><nowiki>]]</nowiki>)<br> | ||
<font color=blue>asidjoiajsd ads asdpoi alhdas paos<br> | <font color=blue>asidjoiajsd ads asdpoi alhdas paos<br> | ||
soiajs aishd oasd ljakbsd9ia d<br> | soiajs aishd oasd ljakbsd9ia d<br> | ||
[[ | [[File:Example.png|right|150px]] | ||
aduh aspodi asdjk earjbh asdiu ad<br> | aduh aspodi asdjk earjbh asdiu ad<br> | ||
asdad sdiofj jrg sdifu werosdyfusijdf<br> | asdad sdiofj jrg sdifu werosdyfusijdf<br> | ||
| Line 102: | Line 102: | ||
{{-}} | {{-}} | ||
<br><br><br> | <br><br><br> | ||
*''center'' (<nowiki>[[ | *''center'' (<nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>center</font>|<font color=purple>150px</font><nowiki>]]</nowiki>)<br> | ||
<font color=green>asidjoiajsd ads asdpoi alhdas paos<br> | <font color=green>asidjoiajsd ads asdpoi alhdas paos<br> | ||
soiajs aishd oasd ljakbsd9ia d<br> | soiajs aishd oasd ljakbsd9ia d<br> | ||
[[ | [[File:Example.png|center|150px]] | ||
aduh aspodi asdjk earjbh asdiu ad<br> | aduh aspodi asdjk earjbh asdiu ad<br> | ||
asdad sdiofj jrg sdifu werosdyfusijdf<br> | asdad sdiofj jrg sdifu werosdyfusijdf<br> | ||
| Line 111: | Line 111: | ||
{{-}} | {{-}} | ||
<br><br><br> | <br><br><br> | ||
*''none'' (<nowiki>[[ | *''none'' (<nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>none</font>|<font color=purple>150px</font><nowiki>]]</nowiki>)<br> | ||
<font color=purple>asidjoiajsd ads asdpoi alhdas paos<br> | <font color=purple>asidjoiajsd ads asdpoi alhdas paos<br> | ||
soiajs aishd oasd ljakbsd9ia d<br> | soiajs aishd oasd ljakbsd9ia d<br> | ||
[[ | [[File:Example.png|none|150px]] | ||
aduh aspodi asdjk earjbh asdiu ad<br> | aduh aspodi asdjk earjbh asdiu ad<br> | ||
asdad sdiofj jrg sdifu werosdyfusijdf<br> | asdad sdiofj jrg sdifu werosdyfusijdf<br> | ||
asdopuishf wierhsld sofudsjerha asdfaf</font><br> | asdopuishf wierhsld sofudsjerha asdfaf</font><br> | ||
{{-}} | {{-}} | ||
*Example of last location applying (<nowiki>[[ | *Example of last location applying (<nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=green>none</font>|<font color=green>right</font>|<font color=green>center</font>|<font color=green>left</font>|<font color=purple>150px</font><nowiki>]]</nowiki>)<br> | ||
<font color=gray>asidjoiajsd ads asdpoi alhdas paos<br> | <font color=gray>asidjoiajsd ads asdpoi alhdas paos<br> | ||
soiajs aishd oasd ljakbsd9ia d<br> | soiajs aishd oasd ljakbsd9ia d<br> | ||
[[ | [[File:Example.png|none|right|center|left|150px]] | ||
aduh aspodi asdjk earjbh asdiu ad<br> | aduh aspodi asdjk earjbh asdiu ad<br> | ||
asdad sdiofj jrg sdifu werosdyfusijdf<br> | asdad sdiofj jrg sdifu werosdyfusijdf<br> | ||
| Line 128: | Line 128: | ||
{{-}} | {{-}} | ||
=== | ===Size=== | ||
The next uses an image with a width of 481 pixels and a height of 331 pixels. Since regular sizing has already | The next uses an image with a width of 481 pixels and a height of 331 pixels. Since regular sizing has already | ||
been showed several times, we'll jump straight to limitations. | been showed several times, we'll jump straight to limitations. | ||
First, well set a limit where the width will be the deciding factor. Syntax will be <nowiki>[[ | First, well set a limit where the width will be the deciding factor. Syntax will be <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=purple>180x600px</font><nowiki>]]</nowiki><br> | ||
[[ | [[File:Example.png|180x600px]]<br> | ||
Width is a deciding factor because the image will always keep its aspect ratio and in this case, when the width reaches 180 pixels, the height will still be less than 600 pixels, but the image will not become any larger, since that would mean that the width would exceed 180 pixels, which it isn't allowed to do. | Width is a deciding factor because the image will always keep its aspect ratio and in this case, when the width reaches 180 pixels, the height will still be less than 600 pixels, but the image will not become any larger, since that would mean that the width would exceed 180 pixels, which it isn't allowed to do. | ||
Now the same image, but with height as the limiting factor. Syntax is <nowiki>[[ | Now the same image, but with height as the limiting factor. Syntax is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=purple>780x200px</font><nowiki>]]</nowiki><br> | ||
[[ | [[File:Example.png|780x200px]] | ||
===Caption=== | |||
Not much to say here. Like most of the other things, only the last caption is shown, if more than one is added. At the same time, this will show that any order after the ''name'' will still work as it is supposed to. Syntax for the following is <nowiki>[[File:</nowiki><font color=red>Example.png</font>|<font color=purple>170px</font>|<font color=gray>text 1</font>|<font color=gray>text 2</font>|<font color=gray>text 3</font>|<font color=green>left</font>|<font color=gray>text 4</font>|<font color=blue>thumb</font><nowiki>]]</nowiki><br> | |||
[[File:Example.png|170px|text 1|text 2|text 3|left|text 4|thumb]] | |||
[[Category:Help]] | |||
[[fr:Aide:Images]] | |||
[[ | |||
Latest revision as of 01:50, 7 June 2024
This page has instructions on how to use images in articles. If you see something that could be improved, feel free to edit this page.
General information
All image setups follow the same basic syntax, however they do not have to be used. The basic syntax is:
[[File:name|type|location|size|caption]]
However, everything after name can come in whatever order the user wants it to.
In-depth information
Name
The name is the only thing that isn't optional when adding an image to an article (naturally). An important thing to remember is that the name of the image is semi-caps-sensitive in the same way the search-function is, which means that if an image is called FFWiki.jpg, then writing FFWiKi.jpg or FFWiki.JPG will not retrieve the image.
Type
There are three types of images:
- thumb or thumbnail
- A frame appears around the image and the image itself is automatically scaled to 180px, or as close to 180px as possible if the image by default is smaller, unless otherwise specified with size. With thumb, it is not possible to "inflate" the image. This means, if the image when uploaded has a width of 80px, it cannot go above 80px no matter what is written in size, it can only go below or equal to the width the uploaded image has. It will by default be located to the right, unless otherwise specified in location. If caption is written, it will appear in a box between the image and the lower part of the frame. By default, it will float on the right side, unless otherwise specified in location
- frame
- When using frame, the image will be framed and always have it's default width, which cannot be changed no matter what is written in size. If caption is written, it will appear in a box between the image and the lower part of the frame.
- (No specification)
- When not specifying the type as one of the above, no frame will appear. Size can be changed in both direction, i.e. "inflation" is possible. If caption is written, it will only appear if the mouse is hovering over the image.
Location
By default, images float to the left, unless otherwise specified or when using the type thumb.
- left
- Image floats to the left and text will flow to the right of the image
- right
- Image floats to the right and text will flow to the left of the image
- center
- Image floats in the middle and breaks the text. Text that follow the image will appear below the image, but not to the sides.
- none
- Image floats to the left, but breaks the text in the same manner as center.
- If more than one location is given, only the last one will take effect. If no location is given, it will use its default.
Size
Size is always measured by the size of the width of the image in pixels (px). The height will automatically be computed, so that the image will keep its aspect ratio. If using thumb, the size cannot be "inflated" to a width higher than the one the uploaded has.
- 100px
- Will resize the width to be 100 pixels (100 can be replaced by whatever number you wish). Height will automatically be computed to fit the image's aspect ratio.
- 100x150px
- Using this method is a way of limiting the image to whatever limit it hits first. This corresponds to saying the width must not exceed 100 pixels and the height must not exceed 150 pixels. Once the image hits one of these limits, the opposite will be scaled to keep aspect ratio.
Caption
Any text entered, that is not recognized as one of the above pre-set commands will be assumed to be caption text. If several captions are entered, only the last will take effect.
Examples
Name
Example on the cap-sensitivity.
| Name | Example.png | ExamPle.png | Example.PNG |
| Result | 
|
File:ExamPle.png | File:Example.PNG |
Type
- thumb
- First is the default, seen on the far right. The syntax for it is simply [[File:Example.png|thumb|placement of text]]
- The following example will be shown with a user-specified location and size. The syntax is [[File:Example.png|thumb|left|100px|placement of text]]
- The following example is to show that an image cannot be inflated when using thumb. The width of the uploaded image is 481px. The syntax will however be written with the width being set to 1000px. The syntax is [[File:Example.png|thumb|left|1000px]]. It will be set above the same image with the width set to 481px so that one can see that there is no difference in size
- frame
- First, the default. Syntax is [[File:Example.png|frame]]
- Now, to show that setting a with has no effect. Width will be set to 150 pixels. Additionally, caption will be added and location will be moved to center. Syntax is [[File:Example.png|frame|center|150px|Setting width makes no difference]]
Setting width makes no difference
- No specified type
- The following will show that inflation is possible, and that caption only appears when the mouse hovers above the image. The image from the thumb example will be used. Syntax will be [[File:Example.png|600px|Only readable if you hover over the image]]
Location
- Syntax will be [[File:Example.png|location|150px]] (with location being switched with whatever the example is about) accompanied by a sequence of randomly pressed letters, before and after the image, to symbolize text.
- left ([[File:Example.png|left|150px]])
asidjoiajsd ads asdpoi alhdas paos
soiajs aishd oasd ljakbsd9ia d
aduh aspodi asdjk earjbh asdiu ad
asdad sdiofj jrg sdifu werosdyfusijdf
asdopuishf wierhsld sofudsjerha asdfaf
- right ([[File:Example.png|right|150px]])
asidjoiajsd ads asdpoi alhdas paos
soiajs aishd oasd ljakbsd9ia d
aduh aspodi asdjk earjbh asdiu ad
asdad sdiofj jrg sdifu werosdyfusijdf
asdopuishf wierhsld sofudsjerha asdfaf
- center ([[File:Example.png|center|150px]])
asidjoiajsd ads asdpoi alhdas paos
soiajs aishd oasd ljakbsd9ia d
aduh aspodi asdjk earjbh asdiu ad
asdad sdiofj jrg sdifu werosdyfusijdf
asdopuishf wierhsld sofudsjerha asdfaf
- none ([[File:Example.png|none|150px]])
asidjoiajsd ads asdpoi alhdas paos
soiajs aishd oasd ljakbsd9ia d
aduh aspodi asdjk earjbh asdiu ad
asdad sdiofj jrg sdifu werosdyfusijdf
asdopuishf wierhsld sofudsjerha asdfaf
- Example of last location applying ([[File:Example.png|none|right|center|left|150px]])
asidjoiajsd ads asdpoi alhdas paos
soiajs aishd oasd ljakbsd9ia d
aduh aspodi asdjk earjbh asdiu ad
asdad sdiofj jrg sdifu werosdyfusijdf
asdopuishf wierhsld sofudsjerha asdfaf
Size
The next uses an image with a width of 481 pixels and a height of 331 pixels. Since regular sizing has already been showed several times, we'll jump straight to limitations.
First, well set a limit where the width will be the deciding factor. Syntax will be [[File:Example.png|180x600px]]
Width is a deciding factor because the image will always keep its aspect ratio and in this case, when the width reaches 180 pixels, the height will still be less than 600 pixels, but the image will not become any larger, since that would mean that the width would exceed 180 pixels, which it isn't allowed to do.
Now the same image, but with height as the limiting factor. Syntax is [[File:Example.png|780x200px]]
Caption
Not much to say here. Like most of the other things, only the last caption is shown, if more than one is added. At the same time, this will show that any order after the name will still work as it is supposed to. Syntax for the following is [[File:Example.png|170px|text 1|text 2|text 3|left|text 4|thumb]]
