Template:ImageText: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
No edit summary
(Use template demo)
 
(One intermediate revision 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}}}; }}"
>{{#if: {{{link|}}} | [[{{{link}}}|{{{2}}}]] | {{{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
<pre>
| 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>
</pre>
}}
 
Result:
 
{{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 }}
 
----


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:


<pre>
{{Template demo
{{ImageText | Frenzy Icon.png | Origins | w = 50 }}
| style = table
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | w = 50 }}</nowiki>
</pre>
| <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}</nowiki>
 
}}
Result:
 
{{ImageText | Frenzy Icon.png | Origins | w = 50 }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}
 
----


Limiting height only:
Limiting height only:


<pre>
{{Template demo
{{ImageText | Frenzy Icon.png | Origins | h = 50 }}
| style = table
{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }}
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | h = 50 }}</nowiki>
</pre>
| <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }}</nowiki>
 
}}
Result:
 
{{ImageText | Frenzy Icon.png | Origins | h = 50 }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds | h = 50 }}
 
----


Limiting width and height:
Limiting width and height:


<pre>
{{Template demo
{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
| style = table
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }}
| <nowiki>{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }}</nowiki>
</pre>
| <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }}</nowiki>
 
}}
Result:
 
{{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:


<pre>
{{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>
</pre>
| <nowiki>{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }}</nowiki>
 
}}
Result:
 
{{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% }}


}}
[[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
Origins
{{ImageText | Defensive Duellist Icon.png | Backgrounds }}
Backgrounds
Backgrounds
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }}
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
Origins
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 }}
Backgrounds
Backgrounds

Limiting height only:

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

Limiting width and height:

Markup Renders as
{{ImageText | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
Origins
Origins
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 50 | h = 50 }}
Backgrounds
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
Origins
{{ImageText | Defensive Duellist Icon.png | Backgrounds | w = 80 | h = 80 | font size = 80% }}
Backgrounds
Backgrounds