Ad placeholder

Template:Icon: Difference between revisions

Jump to navigation Jump to search
Template demo
No edit summary
(Template demo)
 
Line 1: Line 1:
<includeonly>[[File:{{trim | {{{1}}} }}|link={{{link|}}}|{{#if: {{{w|}}}{{{h|}}} | {{{w|}}}x{{{h|}}}px | x{{trim | {{{2|40}}} }}px }}|alt={{{caption|{{{link|{{{1}}} }}}}}}|class=bg3wiki-icon {{{class|}}}]]<span class="bg3wiki-after-icon"></span></includeonly><noinclude>
<includeonly>[[File:{{trim | {{{1}}} }}|link={{{link|}}}|{{#if: {{{w|}}}{{{h|}}} | {{{w|}}}x{{{h|}}}px | x{{trim | {{{2|40}}} }}px }}|alt={{{caption|{{{link|{{{1}}} }}}}}}|class=bg3wiki-icon {{{class|}}}]]<span class="bg3wiki-after-icon"></span></includeonly><noinclude>
{{documentation|content=
{{documentation|content=
Usage: <pre>{{icon | Flourish Icon.png }}</pre>
Displays an icon.


Result: {{icon | Flourish Icon.png }}
{{Template demo
| list = table
| <nowiki>{{icon | Flourish Icon.png }}</nowiki>
}}


The default size is {{code|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.
The default size is {{code|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:
An alternative value for the height can be provided like so:
 
{{Template demo
Usage: <pre>{{icon | Flourish Icon.png | 30 }}</pre>
| list = table
 
| <nowiki>{{icon | Flourish Icon.png | 30 }}</nowiki>
Result: {{icon | Flourish Icon.png | 30 }}
| <nowiki>{{icon | Flourish Icon.png | 50 }}</nowiki>
 
}}
Usage: <pre>{{icon | Flourish Icon.png | 50 }}</pre>
 
Result: {{icon | Flourish Icon.png | 50 }}


Alternatively you can use the named parameters {{code|w}} and {{code|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.)
Alternatively you can use the named parameters {{code|w}} and {{code|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: <pre>{{icon | Flourish Icon.png | w = 20 | h = 50 }}</pre>
{{Template demo
 
| list = table
Result: {{icon | Flourish Icon.png | w = 20 | h = 50 }}
| caption 1 = Width and height
 
| <nowiki>{{icon | Flourish Icon.png | w = 20 | h = 50 }}</nowiki>
You can also provide a link:
| caption 2 = With a link
 
| <nowiki>{{icon | Flourish Icon.png | link = Flourish }}</nowiki>
Usage: <pre>{{icon | Flourish Icon.png | link = Flourish }}</pre>
| caption 3 = With alt text
 
| <nowiki>{{icon | Flourish Icon.png | link = Flourish | caption = Blah }}</nowiki>
Result: {{icon | Flourish Icon.png | link = Flourish }}
| caption 4 = Missing icon
 
| <nowiki>{{icon | Missing Filename 123.png | link = Flourish }}</nowiki>
Caption (alt text) will be the link by default but can be changed:
| caption 5 = Drop shadow
 
| <nowiki>{{icon | Flourish Icon.png | class = bg3wiki-lightmode-drop-shadow }}</nowiki>
Usage: <pre>{{icon | Flourish Icon.png | link = Flourish | caption = Blah }}</pre>
}}
 
Result: {{icon | Flourish Icon.png | link = Flourish | caption = Blah }}
 
Behavior when icon is missing:
 
Usage: <pre>{{icon | Missing Filename 123.png | link = Flourish }}</pre>
 
Result: {{icon | Missing Filename 123.png | link = Flourish }}
 
Drop shadow:
<pre>
{{icon | Flourish Icon.png | class = bg3wiki-lightmode-drop-shadow }}
</pre>


{{icon | Flourish Icon.png | class = bg3wiki-lightmode-drop-shadow }}
}}
}}
[[Category:Templates]]
[[Category:Icon templates]]
[[Category:Icon templates]]
</noinclude>
</noinclude>

Navigation menu