Difference between revisions of "Template:Icon"
m (Testing3) |
m (Testing4) |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
| − | [[ | + | [[ File:{{{1|error.png}}} |
| − | File:{{{1|error.png}}} | ||
|link={{{link|Main_Page}}} | |link={{{link|Main_Page}}} | ||
|{{#if: {{{w|}}} {{{h|}}} | {{{w|}}}x{{{h|}}}px | x40px }} | |{{#if: {{{w|}}} {{{h|}}} | {{{w|}}}x{{{h|}}}px | x40px }} | ||
|alt={{{caption|{{{link| {{{1}}} }}}}}} | |alt={{{caption|{{{link| {{{1}}} }}}}}} | ||
| − | |class=icon {{{class|}}} | + | |class=icon {{{class|}}} ]] |
| − | ]] | + | <span> class="after-icon"> </span> |
| − | <span> | ||
| − | class="after-icon"> | ||
| − | </span> | ||
</includeonly> | </includeonly> | ||
<noinclude> | <noinclude> | ||
Revision as of 12:59, 24 November 2024
Usage:
{{icon | Nesting_MAINPAGE.png }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Main_Page |x40px |alt= Nesting_MAINPAGE.png |class=icon ]] class="after-icon">
The default size is x40px meaning the icon is scaled until the height is 40 px.
It's usually important to limit the height since the icons are used inline, and a very high inline image makes for an unpleasant text layout.
An alternative value for the height can be provided like so:
Usage:
{{icon | Nesting_MAINPAGE.png | 30 }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Main_Page |x40px |alt= Nesting_MAINPAGE.png |class=icon ]] class="after-icon">
Usage:
{{icon | Nesting_MAINPAGE.png | 50 }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Main_Page |x40px |alt= Nesting_MAINPAGE.png |class=icon ]] class="after-icon">
Alternatively you can use the named parameters w and h.
Note that these are max values so the more limiting one applies.
In the following example, the height value is essentially ignored because the original image is a square so the width becomes the limiting factor. (Were the original image 200 by 500, the result would be 20 by 50.)
Usage:
{{icon | Nesting_MAINPAGE.png | w = 20 | h = 50 }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Main_Page |20x50px |alt= Nesting_MAINPAGE.png |class=icon ]] class="after-icon">
You can also provide a link:
Usage:
{{icon | Nesting_MAINPAGE.png | link = Nesting }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Nesting |x40px |alt=Nesting |class=icon ]] class="after-icon">
Caption (alt text) will be the link by default but can be changed:
Usage:
{{icon | Nesting_MAINPAGE.png | link = Nesting | caption = Blah }}
Result:
[[ File: Nesting_MAINPAGE.png |link=Nesting |x40px |alt=Blah |class=icon ]] class="after-icon">
Behavior when icon is missing:
Usage:
{{icon | Missing Filename 123.png | link = Nesting }}
Result:
[[ File: Missing Filename 123.png |link=Nesting |x40px |alt=Nesting |class=icon ]] class="after-icon">
Drop shadow:
{{icon | Nesting_MAINPAGE.png | class = lightmode-drop-shadow }}
[[ File: Nesting_MAINPAGE.png
|link=Main_Page
|x40px
|alt= Nesting_MAINPAGE.png
|class=icon lightmode-drop-shadow ]]
class="after-icon">
