Difference between revisions of "Template:ImageText"
m (removed indents) |
m (Added Category) |
||
| (2 intermediate revisions by the same user not shown) | |||
| 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;"> | + | [[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{2}}}|link={{{link|}}}]] |
| − | <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|}}} | ||
| − | ]] | ||
</div> | </div> | ||
<div | <div | ||
| Line 22: | Line 8: | ||
style="width: {{{w|100}}}px; text-align: center; | style="width: {{{w|100}}}px; text-align: center; | ||
{{#if: {{{font size|}}} | font-size: {{{font size}}}; }}"> | {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}"> | ||
| − | {{#if: | + | {{#if: {{{link|}}} | [[{{{link}}}|{{{2}}}]] | {{{2}}} }} |
| − | {{{link|}}} | ||
| − | | [[{{{link}}} | ||
| − | |||
| − | }} | ||
</div> | </div> | ||
</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% }} | ||
| + | [[Category: Templates]] | ||
</noinclude> | </noinclude> | ||
Latest revision as of 20:20, 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
