Template:ImageText

From bg3.wiki
Revision as of 15:11, 17 September 2023 by Taylan (talk | contribs) (Created page with "<includeonly><div class="bg3wiki-image-link" style="display: inline-table; margin: 5px;"> <div 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=]]</div> <div style="width: {{{w|100}}}px; text-align: center; {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}" >{{{2}}}</div> </div></includeonly><noinclude> This template allows you to add images on t...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.


Standard width/height is 100:

{{ImageText | Frenzy Icon.png | Origins}}
{{ImageText | Defensive Duellist Icon.png | Backgrounds }}
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }}

Result:


Limiting width only; note this may cause the text to overflow as seen here:

{{ImageText | Frenzy Icon.png | Origins | w = 50 }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}

Result:


Limiting height only:

{{ImageText | Frenzy Icon.png | Origins | h = 50 }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }}

Result:


Limiting width and height:

{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }}

Result:


You might have noticed the text is often too wide for the icon... You can specify a font size:

{{ImageText | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }}

Result: