Template:ImageText: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
HiddenDragon (talk | contribs) (Use template demo) |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><div class="bg3wiki-imagetext" style="display: inline-table; margin: 5px;"> | <includeonly><div class="bg3wiki-imagetext" style="display: inline-table; margin: 5px;"> | ||
<div class="bg3wiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w|100}}}px; height: {{{h|100}}}px;" | <div class="bg3wiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w|100}}}px; height: {{{h|100}}}px;" | ||
>[[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{2}}}|link={{{link|}}}]]</div> | >[[File:{{trim|{{{1}}}}}|{{{w|100}}}x{{{h|100}}}px|{{trim|{{{2}}}}}|link={{{link|}}}]]</div> | ||
<div class="bg3wiki-imagetext-text" style="width: {{{w|100}}}px; text-align: center; {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}" | <div class="bg3wiki-imagetext-text" style="width: {{{w|100}}}px; text-align: center; {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}" | ||
>{{{2}}}</div> | >{{#if: {{{link|}}} | [[{{{link}}}|{{trim|{{{2}}}}}]] | {{trim|{{{2}}}}} }}</div> | ||
</div></includeonly><noinclude> | </div></includeonly><noinclude>{{Documentation|content= | ||
This template allows you to add images on top of a piece of text. | This template allows you to add images on top of a piece of text. | ||
The element will be an inline block, meaning several can appear in one line. You can give them all a specific width and height to get a nice consistent layout. | The element will be an inline block, meaning several can appear in one line. You can give them all a specific width and height to get a nice consistent layout. | ||
== Examples == | |||
Standard width/height is 100: | Standard width/height is 100: | ||
{{Template demo | |||
< | | style = table | ||
{{ImageText | Frenzy Icon.png | Origins}} | | <nowiki>{{ImageText | Frenzy Icon.png | Origins }}</nowiki> | ||
{{ImageText | Defensive Duellist Icon.png | Backgrounds }} | | <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds }}</nowiki> | ||
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }} | | <nowiki>{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }}</nowiki> | ||
</ | }} | ||
Limiting width only; note this may cause the text to overflow as seen here: | Limiting width only; note this may cause the text to overflow as seen here: | ||
{{Template demo | |||
{{ | | style = table | ||
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | w = 50 }}</nowiki> | |||
< | | <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}</nowiki> | ||
}} | |||
{{ImageText | Frenzy Icon.png | Origins | w = 50 }} | |||
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }} | |||
Limiting height only: | Limiting height only: | ||
{{Template demo | |||
{{ | | style = table | ||
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | h = 50 }}</nowiki> | |||
< | | <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }}</nowiki> | ||
}} | |||
{{ImageText | Frenzy Icon.png | Origins | h = 50 }} | |||
{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }} | |||
Limiting width and height: | Limiting width and height: | ||
{{Template demo | |||
{{ | | style = table | ||
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }}</nowiki> | |||
< | | <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }}</nowiki> | ||
}} | |||
{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }} | |||
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }} | |||
You might have noticed the text is often too wide for the icon... You can specify a font size: | You might have noticed the text is often too wide for the icon... You can specify a font size: | ||
< | {{Template demo | ||
{{ImageText | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }} | | style = table | ||
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }} | | <nowiki>{{ImageText | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }}</nowiki> | ||
</ | | <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }}</nowiki> | ||
}} | |||
}} | |||
[[Category:Templates]] | |||
</noinclude> | </noinclude> | ||
Latest revision as of 12:27, 19 January 2025
Template documentation
This template allows you to add images on top of a piece of text.
The element will be an inline block, meaning several can appear in one line. You can give them all a specific width and height to get a nice consistent layout.
Examples
Standard width/height is 100:
| Markup | Renders as |
|---|---|
{{ImageText | Frenzy Icon.png | Origins }} |  Origins
|
{{ImageText | Defensive Duellist Icon.png | Backgrounds }} |  Backgrounds
|
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }} |  Just a test with very very long text
|
Limiting width only; note this may cause the text to overflow as seen here:
| Markup | Renders as |
|---|---|
{{ImageText | Frenzy Icon.png | Origins | w = 50 }} |  Origins
|
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }} |  Backgrounds
|
Limiting height only:
| Markup | Renders as |
|---|---|
{{ImageText | Frenzy Icon.png | Origins | h = 50 }} | Origins
|
{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }} | Backgrounds
|
Limiting width and height:
| Markup | Renders as |
|---|---|
{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }} | Origins
|
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }} | Backgrounds
|
You might have noticed the text is often too wide for the icon... You can specify a font size:
| Markup | Renders as |
|---|---|
{{ImageText | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }} |  Origins
|
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }} |  Backgrounds
|