Template:IconText: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
Undo revision 83908 by Sky (talk) (causes issues in tables)
Tag: Undo
mNo edit summary
 
(9 intermediate revisions by 4 users not shown)
Line 7: Line 7:
{{#lvardef: max-h | {{#if: {{{h|}}} | {{{h}}} | {{#if: {{{size|}}} | {{{size}}} | 40 }} }} }}
{{#lvardef: max-h | {{#if: {{{h|}}} | {{{h}}} | {{#if: {{{size|}}} | {{{size}}} | 40 }} }} }}
}}{{#if: {{{block|}}}
}}{{#if: {{{block|}}}
| <span style="{{#if: {{{gap|}}} | gap: {{{gap}}}px; }}">
| <span class="bg3wiki-icontext-block" style="display: inline-flex; align-items: center; {{#if: {{{gap|}}} | gap: {{{gap}}}px; }}">
}}<span style="
| {{#if:{{{nowrap|}}}|<span style="white-space: nowrap">}}
}}<span class="bg3wiki-icontext-icon-wrapper" style="
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
Line 14: Line 15:
   min-width: {{#lvar:min-w}}px;
   min-width: {{#lvar:min-w}}px;
   height: {{#lvar:max-h}}px;
   height: {{#lvar:max-h}}px;
"><span style="vertical-align: middle;">{{icon
"><span class="bg3wiki-icontext-icon" style="vertical-align: middle;">{{icon
| {{#lvar:icon}}
| {{#lvar:icon}}
| link = {{#lvar:link}}
| link = {{#lvar:link}}
Line 20: Line 21:
| w = {{#lvar:max-w}}
| w = {{#lvar:max-w}}
| h = {{#lvar:max-h}}
| h = {{#lvar:max-h}}
}}</span></span>&nbsp;<span>{{#if: {{#lvar:link}}
| class = {{{class|}}}
}}</span></span>&nbsp;<span class="bg3wiki-icontext-text">{{#if: {{#lvar:link}}
| [[{{#lvar:link}}|{{#lvar:text}}]]
| [[{{#lvar:link}}|{{#lvar:text}}]]
| {{#lvar:text}}
| {{#lvar:text}}
}}</span>{{#if: {{{block|}}}
}}</span>{{#if: {{{block|}}}
| </span>
| </span>
}}</includeonly><noinclude>
| {{#if: {{{nowrap|}}}|</span>}}
Usage: {{code|<nowiki>{{IconText | Flourish Icon.png | Flourish }}</nowiki>}}
}}</includeonly><noinclude>{{Documentation|content=
 
Displays an icon with text.
Result: {{IconText | Flourish Icon.png | Flourish }}
 
The icon and text can be made into a link:
 
Usage: {{code|<nowiki>{{IconText | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>}}
 
Result: {{IconText | Flourish Icon.png | Custom Text | link = Flourish }}


== Usage ==
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 via the {{code|size}} or {{code|h}} parameters, which are synonyms:
=== Icon Size ===
 
The width can be set via the {{code|w}} parameter.  This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation.  This also uses the {{code|block}} and {{code|gap}} parameters. (View the source of this page for usage.)
Usage: {{code|<nowiki>{{IconText | size = 25 | Flourish Icon.png | Flourish }}</nowiki>}}
 
Result: {{IconText | size = 25 | Flourish Icon.png | Flourish }}
 
Usage: {{code|<nowiki>{{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>}}
 
Result: {{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}
 
Behavior on missing icon:
 
{{IconText | Missing Icon 123.png | Flourish | size = 30 }}


The width can be set via the {{code|w}} parameter.  This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation.  This also uses the {{code|block}} and {{code|gap}} parameters.  View the source of this page for usage.
=== Blocks ===
Setting {{code|block}} to yes ensures that if the text part has to break into multiple lines, the second line doesn't flow under the icon and instead the text is constrained into a rectangular block.  The {{code|gap}} parameter can only be provided if block is set to yes, and determines the gap (in px) between the icon and the aforementioned rectangular text block.


{| class="wikitable" style="width: 50%;"
== Examples ==
! colspan="2" | Rolls
{{Template demo
|-
| style = table
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | D20.png | Attack Roll }}
| caption 1 = Default
| The roll you make to determine whether an attack hits an enemy at all.
| <nowiki>{{IconText | Flourish Icon.png | Flourish }}</nowiki>
|-
| caption 2 = With link
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | D6 Thunder.png | Damage Roll }}
| <nowiki>{{IconText | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>
| The roll you make to determine the amount of damage done by a successful attack.
| caption 3 = Adjusting size
|-
| <nowiki>{{IconText | size = 25 | Flourish Icon.png | Flourish }}</nowiki>
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | Saving Throw Icon.png | Saving Throw }}
| caption 4 = With size and link
| The roll you make to attempt avoiding various threats other than direct attacks.
| <nowiki>{{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>
|-
| caption 5 = Missing icon
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | D20.png | Ability Check }}
| <nowiki>{{IconText | Missing Icon 123.png | Flourish | size = 30 }}</nowiki>
| The roll you make when attempting anything else that requires a roll to succeed.
}}
|-
! colspan="2" | Modifiers
|-
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | Advantage_Icon.png | Advantage }}
| Roll the die twice, and use the higher result. [[Disadvantage]] is the exact opposite.
|-
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | Charisma Ability Icon.png | Ability Score Modifier }}
| The number you add to your rolls based on your [[Ability Scores]].
|-
| {{IconText | block = yes | w = 22 | h = 22 | gap = 2 | Proficiency Icon.png | Proficiency Bonus }}
| The number you add to your rolls based on whether you have [[Proficiency]].
|}


[[Category:Icon Templates]]
}}
[[Category:Templates]]
[[Category:Icon templates]]
</noinclude>
</noinclude>

Latest revision as of 12:23, 19 January 2025

Template documentation

Displays an icon with text.

Usage

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.

Icon Size

The width can be set via the w parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation. This also uses the block and gap parameters. (View the source of this page for usage.)

Blocks

Setting block to yes ensures that if the text part has to break into multiple lines, the second line doesn't flow under the icon and instead the text is constrained into a rectangular block. The gap parameter can only be provided if block is set to yes, and determines the gap (in px) between the icon and the aforementioned rectangular text block.

Examples

Example Markup Renders as
Default 
{{IconText | Flourish Icon.png | Flourish }}
 Flourish Flourish
With link 
{{IconText | Flourish Icon.png | Custom Text | link = Flourish }}
 Custom Text Custom Text
Adjusting size 
{{IconText | size = 25 | Flourish Icon.png | Flourish }}
 Flourish Flourish
With size and link 
{{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}
 Custom Text Custom Text
Missing icon 
{{IconText | Missing Icon 123.png | Flourish | size = 30 }}
 Flourish Flourish
Subpages of this template.
Retrieved from "https://new.bg3.wiki/w/index.php?title=Template:IconText&oldid=264922"