Template:ImageLink: Difference between revisions

Latest revision as of 05:03, 14 February 2024

This template allows you to add images on top of links.

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

{{ImageLink | Frenzy Icon.png | Origins}}
{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds }}
{{ImageLink | Passive Feature Generic Icon.png | Feats | Just a test with very very long text }}

Result:

Origins

Backgrounds

Just a test with very very long text

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

{{ImageLink | Frenzy Icon.png | Origins | w = 50 }}
{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 }}

Result:

Origins

Backgrounds

Limiting height only:

{{ImageLink | Frenzy Icon.png | Origins | h = 50 }}
{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | h = 50 }}

Result:

Origins

Backgrounds

Limiting width and height:

{{ImageLink | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 | h = 50 }}

Result:

Origins

Backgrounds

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

{{ImageLink | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }}
{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 80 | h = 80 | font size = 80% }}

Result:

Origins

Backgrounds

@@ Line 1: / Line 1: @@
-<includeonly><div style="display: inline-block;">
+<includeonly>{{ImageText | {{{1}}} | {{{3|{{{2}}}}}} | link = {{{2|}}} | w = {{{w|50}}} | h = {{{h|50}}} | font size = {{{font size|}}}
-<div style="display: flex; justify-content: center; align-items: center; width: {{{w|100}}}px; height: {{{h|100}}}px;"
+}}</includeonly><noinclude>
->[[File:{{{1}}}|{{{w|100}}}x{{{h|100}}}px|{{{3|{{{2}}}}}}|link={{{2}}}]]</div>
-<div style="width: {{{w|100}}}px; text-align: center; overflow: hidden;"
->[[{{{2}}}|{{{3|{{{2}}}}}}]]</div>
-</div></includeonly><noinclude>
 This template allows you to add images on top of links.
@@ Line 11: / Line 7: @@
 ----
-Standard width/height is 100:
+Standard width/height is 150:
- <nowiki>{{ImageLink|Frenzy Icon.png|Origins}}</nowiki>
+<pre>
- <nowiki>{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds}}</nowiki>
+{{ImageLink | Frenzy Icon.png | Origins}}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds }}
+{{ImageLink | Passive Feature Generic Icon.png | Feats | Just a test with very very long text }}
+</pre>
 Result:
-{{ImageLink|Frenzy Icon.png|Origins}}
+{{ImageLink | Frenzy Icon.png | Origins}}
-{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds}}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds }}
+{{ImageLink | Passive Feature Generic Icon.png | Feats | Just a test with very very long text }}
 ----
@@ Line 25: / Line 25: @@
 Limiting width only; note this may cause the text to clip as seen here:
- <nowiki>{{ImageLink|Frenzy Icon.png|Origins|w=50}}</nowiki>
+<pre>
- <nowiki>{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|w=50}}</nowiki>
+{{ImageLink | Frenzy Icon.png | Origins | w = 50 }}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 }}
+</pre>
 Result:
-{{ImageLink|Frenzy Icon.png|Origins|w=50}}
+{{ImageLink | Frenzy Icon.png | Origins | w = 50 }}
-{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|w=50}}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 }}
 ----
@@ Line 37: / Line 39: @@
 Limiting height only:
- <nowiki>{{ImageLink|Frenzy Icon.png|Origins|h=50}}</nowiki>
+<pre>
- <nowiki>{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|h=50}}</nowiki>
+{{ImageLink | Frenzy Icon.png | Origins | h = 50 }}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | h = 50 }}
+</pre>
 Result:
-{{ImageLink|Frenzy Icon.png|Origins|h=50}}
+{{ImageLink | Frenzy Icon.png | Origins | h = 50 }}
-{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|h=50}}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | h = 50 }}
 ----
@@ Line 49: / Line 53: @@
 Limiting width and height:
- <nowiki>{{ImageLink|Frenzy Icon.png|Origins|w=50|h=50}}</nowiki>
+<pre>
- <nowiki>{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|w=50|h=50}}</nowiki>
+{{ImageLink | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 | h = 50 }}
+</pre>
 Result:
-{{ImageLink|Frenzy Icon.png|Origins|w=50|h=50}}
+{{ImageLink | Frenzy Icon.png | Origins | w = 50 | h = 50 }}
-{{ImageLink|Defensive Duellist Icon.png|Character Creation#Backgrounds|Backgrounds|w=50|h=50}}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 50 | h = 50 }}
+----
+You might have noticed the text is often too wide for the icon...  You can specify a font size:
+<pre>
+{{ImageLink | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 80 | h = 80 | font size = 80% }}
+</pre>
+Result:
+{{ImageLink | Frenzy Icon.png | Origins | w = 80 | h = 80 | font size = 80% }}
+{{ImageLink | Defensive Duellist Icon.png | Character Creation#Backgrounds | Backgrounds | w = 80 | h = 80 | font size = 80% }}
 </noinclude>