Difference between revisions of "Template:ImageText"
(Added Page (not functioning)) |
m (removed indents) |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
| − | + | <div | |
| − | + | class="imagetext" | |
| − | + | 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: | |
| − | + | {{trim| | |
| − | + | {{{1}}} | |
| − | + | }} | |
| − | + | |{{{w|100}}}x{{{h|100}}}px | |
| − | + | |{{trim| | |
| − | + | {{{2}}} | |
| − | + | }} | |
| − | + | |link={{{link|}}} | |
| − | + | ]] | |
| − | + | </div> | |
| − | + | <div | |
| − | + | class="imagetext-text" | |
| − | + | style="width: {{{w|100}}}px; text-align: center; | |
| − | + | {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}"> | |
| − | + | {{#if: | |
| − | + | {{{link|}}} | |
| − | + | | [[{{{link}}}|{{trim|{{{2}}}}}]] | |
| − | + | | {{trim|{{{2}}}}} | |
| − | + | }} | |
| − | + | </div> | |
| − | + | </div> | |
</includeonly> | </includeonly> | ||
Revision as of 19:49, 24 November 2024
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 | file:Nesting_MAINPAGE.png | Nesting }}
{{ ImageText | Enhanced Growth.png | Enhanced Growth }}
{{ ImageText | The Elements.png | Just a test with very very long text }}
Result:
[[File:
Nesting_MAINPAGE.png
|100x100px
|
Nesting
|link=
]]
Nesting
[[File:
Enhanced Growth.png
|100x100px
|
Enhanced Growth
|link=
]]
Enhanced Growth
[[File:
The Elements.png
|100x100px
|
Just a test with very very long text
|link=
]]
Just a test with very very long text
Limiting width only; note 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:
[[File:
Nesting_MAINPAGE.png
|50x100px
|
Nesting
|link=
]]
Nesting
[[File:
Enhanced Growth.png
|50x100px
|
Enhanced Growth
|link=
]]
Enhanced Growth
Limiting height only:
{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}
Result:
[[File:
Nesting_MAINPAGE.png
|100x50px
|
Nesting
|link=
]]
Nesting
[[File:
Enhanced Growth.png
|100x50px
|
Enhanced Growth
|link=
]]
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:
[[File:
Nesting_MAINPAGE.png
|50x50px
|
Nesting
|link=
]]
Nesting
[[File:
Enhanced Growth.png
|50x50px
|
Enhanced Growth
|link=
]]
Enhanced Growth
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:
[[File:
Nesting_MAINPAGE.png
|80x80px
|
Nesting
|link=
]]
Nesting
[[File:
Enhanced Growth.png
|80x80px
|
Enhanced Growth
|link=
]]
Enhanced Growth
