Template:ImageText - Revision history

Vrana: Added Category

2024-11-24T20:20:18Z

Added Category

Vrana: Formatted page. Dependent on the Template:Icon which seems to not work 100%

2024-11-24T20:19:29Z

Formatted page. Dependent on the Template:Icon which seems to not work 100%

Vrana: removed not working trim template

2024-11-24T19:52:45Z

removed not working trim template

Vrana: removed indents

2024-11-24T19:49:44Z

removed indents

Vrana: Added Page (not functioning)

2024-11-23T14:49:01Z

Added Page (not functioning)

New page

<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>

<noinclude>
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:

<pre>
{{ ImageText | file:Nesting_MAINPAGE.png | Nesting }}
{{ ImageText | Enhanced Growth.png | Enhanced Growth }}
{{ ImageText | The Elements.png | Just a test with very very long text }}
</pre>

Result:

{{ImageText | Nesting_MAINPAGE.png | Nesting }}
{{ImageText | Enhanced Growth.png | Enhanced Growth }}
{{ImageText | The Elements.png | Just a test with very very long text }}

----

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

<pre>
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }}
</pre>

Result:

{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }}

----

Limiting height only:

<pre>
{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}
</pre>

Result:

{{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}

----

Limiting width and height:

<pre>
{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }}
</pre>

Result:

{{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 | h = 50 }}
{{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 | h = 50 }}

----

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

<pre>
{{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% }}
</pre>

Result:

{{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% }}

</noinclude>

← Older revision		Revision as of 20:20, 24 November 2024
Line 78:		Line 78:
	{{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>

@@ Line 1: / Line 1: @@
 <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;">
 [[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{2}}}|link={{{link|}}}]]
 </div>
@@ Line 17: / Line 12: @@
 </div>
 </includeonly>
 <noinclude>
 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.
 <pre>
-{{ ImageText | file:Nesting_MAINPAGE.png | Nesting }}
+<nowiki>{{ ImageText | file:Nesting_MAINPAGE.png | Nesting }}
 {{ 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>
-Result:
+Results:
 {{ImageText | Nesting_MAINPAGE.png | Nesting }}
 {{ImageText | Enhanced Growth.png | Enhanced Growth }}
 {{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>
-{{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>
 Result:
 {{ImageText | Nesting_MAINPAGE.png | Nesting | w = 50 }}
 {{ImageText | Enhanced Growth.png | Enhanced Growth | w = 50 }}
-----
+==Limiting Height==
 Limiting height only:
 <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>
 Result:
 {{ImageText | Nesting_MAINPAGE.png | Nesting | h = 50 }}
 {{ImageText | Enhanced Growth.png | Enhanced Growth | h = 50 }}
-----
+==Limiting Width and Height==
 <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>
 Result:
 {{ImageText | Nesting_MAINPAGE.png | Nesting | 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:
 <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>
 Result:
 {{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% }}
 </noinclude>

@@ Line 7: / Line 7: @@
 style="display: flex; justify-content: center; align-items: center;
 width: {{{w|100}}}px; height: {{{h|100}}}px;">
-[[File:
+[[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{2}}}|link={{{link|}}}]]
 </div>
 <div
@@ Line 22: / Line 13: @@
 style="width: {{{w|100}}}px; text-align: center;
 {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}">
-{{#if:
+{{#if: {{{link|}}} | [[{{{link}}}|{{{2}}}]] | {{{2}}} }}
 </div>
 </div>