Difference between revisions of "Template:ImageText"
m (removed not working trim template) |
m (Formatted page. Dependent on the Template:Icon which seems to not work 100%) |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
| − | <div | + | <div class="imagetext" style="display: inline-table; margin: 5px;"> |
| − | class="imagetext" | + | <div class="imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w|100}}}px; height: {{{h|100}}}px;"> |
| − | style="display: inline-table; margin: 5px;"> | ||
| − | <div | ||
| − | class="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|}}}]] | [[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{2}}}|link={{{link|}}}]] | ||
</div> | </div> | ||
| Line 17: | Line 12: | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
| − | |||
<noinclude> | <noinclude> | ||
| + | ==Description== | ||
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 | + | ==Usage== |
| − | + | The standard width and height is 100. | |
| − | |||
| − | |||
| − | |||
<pre> | <pre> | ||
| − | {{ ImageText | file:Nesting_MAINPAGE.png | Nesting }} | + | <nowiki>{{ ImageText | file:Nesting_MAINPAGE.png | Nesting }} |
{{ ImageText | Enhanced Growth.png | Enhanced Growth }} | {{ ImageText | Enhanced Growth.png | Enhanced Growth }} | ||
| − | {{ ImageText | The Elements.png | Just a test with very very long text }} | + | {{ ImageText | The Elements.png | Just a test with very very long text }}</nowiki> |
</pre> | </pre> | ||
| − | + | Results: | |
| − | |||
{{ImageText | Nesting_MAINPAGE.png | Nesting }} | {{ImageText | Nesting_MAINPAGE.png | Nesting }} | ||
{{ImageText | Enhanced Growth.png | Enhanced Growth }} | {{ImageText | Enhanced Growth.png | Enhanced Growth }} | ||
{{ImageText | The Elements.png | Just a test with very very long text }} | {{ImageText | The Elements.png | Just a test with very very long text }} | ||
| − | + | ==Limiting Width== | |
| − | + | This may cause the text to overflow as seen here: | |
| − | |||
<pre> | <pre> | ||
| − | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }} | + | <nowiki>{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }} |
| − | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }} | + | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }}</nowiki> |
</pre> | </pre> | ||
Result: | Result: | ||
| − | |||
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }} | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }} | ||
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }} | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }} | ||
| − | + | ==Limiting Height== | |
| − | |||
Limiting height only: | Limiting height only: | ||
<pre> | <pre> | ||
| − | {{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }} | + | <nowiki>{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }} |
| − | {{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }} | + | {{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}</nowiki> |
</pre> | </pre> | ||
Result: | Result: | ||
| − | |||
{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }} | {{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }} | ||
{{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }} | {{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }} | ||
| − | + | ==Limiting Width and Height== | |
| − | |||
| − | Limiting | ||
| − | |||
<pre> | <pre> | ||
| − | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }} | + | <nowiki>{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }} |
| − | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }} | + | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }}</nowiki> |
</pre> | </pre> | ||
Result: | Result: | ||
| − | |||
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }} | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }} | ||
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }} | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }} | ||
| − | + | ==Font Size== | |
| − | |||
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> | <pre> | ||
| − | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 80 | h = 80 | font size = 80% }} | + | <nowiki>{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 80 | h = 80 | font size = 80% }} |
| − | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 80 | h = 80 | font size = 80% }} | + | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 80 | h = 80 | font size = 80% }}</nowiki> |
</pre> | </pre> | ||
Result: | Result: | ||
| − | |||
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 80 | h = 80 | font size = 80% }} | {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 80 | h = 80 | font size = 80% }} | ||
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 80 | h = 80 | font size = 80% }} | {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 80 | h = 80 | font size = 80% }} | ||
</noinclude> | </noinclude> | ||
Revision as of 20:19, 24 November 2024
Contents
Description
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.
Usage
The standard width and height is 100.
{{ ImageText | file:Nesting_MAINPAGE.png | Nesting }}
{{ ImageText | Enhanced Growth.png | Enhanced Growth }}
{{ ImageText | The Elements.png | Just a test with very very long text }}
Results:
Nesting
Enhanced Growth
Just a test with very very long text
Limiting Width
This may cause the text to overflow as seen here:
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }}
Result:
Nesting
Enhanced Growth
Limiting Height
Limiting height only:
{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}
Result:
Nesting
Enhanced Growth
Limiting Width and Height
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }}
Result:
Nesting
Enhanced Growth
Font Size
You might have noticed the text is often too wide for the icon... You can specify a font size:
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 80 | h = 80 | font size = 80% }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 80 | h = 80 | font size = 80% }}
Result:
Nesting
Enhanced Growth
