Template:ImageText - Revision history

KosmicAes: picture now links

2024-02-23T05:46:24Z

picture now links

← Older revision		Revision as of 07:46, 23 February 2024
Line 1:		Line 1:
	<includeonly><div class="lodwiki-imagetext" style="display: inline-table; margin: 5px;">		<includeonly><div class="lodwiki-imagetext" style="display: inline-table; margin: 5px;">
	<div class="lodwiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w\|120}}}px; height: {{{h\|150}}}px;"		<div class="lodwiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w\|120}}}px; height: {{{h\|150}}}px;"
	>[[File:{{{1}}}\|{{{w\|120}}}x{{{h\|150}}}px\|{{{2}}}\|link={{{~~link\|~~}}}]]</div>		>[[File:{{{1}}}\|{{{w\|120}}}x{{{h\|150}}}px\|{{{2}}}\|link={{{2}}}]]</div>
	<div class="lodwiki-imagetext-text" style="width: {{{w\|120}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"		<div class="lodwiki-imagetext-text" style="width: {{{w\|120}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"
	>[[{{{2}}}]]</div>		>[[{{{2}}}]]</div>

KosmicAes: mostly working

2024-02-23T02:27:35Z

mostly working

← Older revision		Revision as of 04:27, 23 February 2024
Line 3:		Line 3:
	>[[File:{{{1}}}\|{{{w\|120}}}x{{{h\|150}}}px\|{{{2}}}\|link={{{link\|}}}]]</div>		>[[File:{{{1}}}\|{{{w\|120}}}x{{{h\|150}}}px\|{{{2}}}\|link={{{link\|}}}]]</div>
	<div class="lodwiki-imagetext-text" style="width: {{{w\|120}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"		<div class="lodwiki-imagetext-text" style="width: {{{w\|120}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"
	>~~{{#if: {{{link\|}}} \|~~ [[~~{{{link}}}\|~~{{{2}}}]] ~~\| {{{2}}} }}~~</div>		>[[{{{2}}}]]</div>
	</div></includeonly><noinclude>		</div></includeonly><noinclude>

Line 9:		Line 9:

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

			Code I had to take out >{{#if: {{{link\|}}} \| [[{{{link}}}\|{{{2}}}]] \| {{{2}}} }}</div>

	----		----
Line 15:		Line 17:

	<pre>		<pre>
	{{ImageText \| ~~Frenzy Icon~~.~~png~~ \| Dart}}		{{ImageText \| DartFeld120x150.jpg \| Dart }}
	{{ImageText \| ~~Defensive Duellist Icon~~.~~png~~ \| Villians}}		{{ImageText \| Meru120x150.jpg \| Villians }}
	{{ImageText \| Passive Feature Generic Icon.png \| ~~Just a test with very very long text~~ }}		{{ImageText \| Passive Feature Generic Icon.png \| Allies}}
	</pre>		</pre>

	Result:		Result:

	{{ImageText \| DartFeld120x150.jpg \| Dart \| }}		{{ImageText \| DartFeld120x150.jpg \| Dart }}
	{{ImageText \| Meru120x150.jpg \| Villians }}		{{ImageText \| Meru120x150.jpg \| Villians }}
	{{ImageText \| Passive Feature Generic Icon.png \| ~~Just a test with very very long text~~ }}		{{ImageText \| Passive Feature Generic Icon.png \| Allies}}

KosmicAes: need to save progress

2024-02-23T02:03:36Z

need to save progress

← Older revision		Revision as of 04:03, 23 February 2024
Line 1:		Line 1:
	<includeonly><div class="lodwiki-imagetext" style="display: inline-table; margin: 5px;">		<includeonly><div class="lodwiki-imagetext" style="display: inline-table; margin: 5px;">
	<div class="lodwiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w\|~~100~~}}}px; height: {{{h\|~~100~~}}}px;"		<div class="lodwiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w\|120}}}px; height: {{{h\|150}}}px;"
	>[[File:{{{1}}} \|{{{2}}}\|link={{{link\|}}}]]</div>		>[[File:{{{1}}}\|{{{w\|120}}}x{{{h\|150}}}px\|{{{2}}}\|link={{{link\|}}}]]</div>
	<div class="lodwiki-imagetext-text" style="width: {{{w\|~~100~~}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"		<div class="lodwiki-imagetext-text" style="width: {{{w\|120}}}px; text-align: center; {{#if: {{{font size\|}}} \| font-size: {{{font size}}}; }}"
	>{{#if: {{{link\|}}} \| [[{{{link}}}\|{{{2}}}]] \| {{{2}}} }}</div>		>{{#if: {{{link\|}}} \| [[{{{link}}}\|{{{2}}}]] \| {{{2}}} }}</div>
	</div></includeonly><noinclude>		</div></includeonly><noinclude>
Line 15:		Line 15:

	<pre>		<pre>
	{{ImageText \| ~~DartFeld120x150~~.~~jpg~~ \| Dart}}		{{ImageText \| Frenzy Icon.png \| Dart}}
	{{ImageText \| Defensive Duellist Icon.png \| ~~Backgrounds~~ }}		{{ImageText \| Defensive Duellist Icon.png \| Villians}}
	{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}		{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}
	</pre>		</pre>
Line 22:		Line 22:
	Result:		Result:

	{{ImageText \| ~~Frenzy Icon~~.~~png~~ \| ~~Origins~~ }}		{{ImageText \| DartFeld120x150.jpg \| Dart \| }}
	{{ImageText \| ~~Defensive Duellist Icon~~.~~png~~ \| ~~Backgrounds~~ }}		{{ImageText \| Meru120x150.jpg \| Villians }}
	{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}		{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}

KosmicAes at 01:35, 23 February 2024

2024-02-23T01:35:59Z

← Older revision		Revision as of 03:35, 23 February 2024
Line 15:		Line 15:

	<pre>		<pre>
	{{ImageText \| ~~Frenzy Icon~~.~~png~~ \| ~~Origins~~ }}		{{ImageText \| DartFeld120x150.jpg \| Dart}}
	{{ImageText \| Defensive Duellist Icon.png \| Backgrounds }}		{{ImageText \| Defensive Duellist Icon.png \| Backgrounds }}
	{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}		{{ImageText \| Passive Feature Generic Icon.png \| Just a test with very very long text }}

KosmicAes: attempting to make a template

2024-02-23T01:34:41Z

attempting to make a template

New page

<includeonly><div class="lodwiki-imagetext" style="display: inline-table; margin: 5px;">
<div class="lodwiki-imagetext-image" style="display: flex; justify-content: center; align-items: center; width: {{{w|100}}}px; height: {{{h|100}}}px;"
>[[File:{{{1}}} |{{{2}}}|link={{{link|}}}]]</div>
<div class="lodwiki-imagetext-text" style="width: {{{w|100}}}px; text-align: center; {{#if: {{{font size|}}} | font-size: {{{font size}}}; }}"
>{{#if: {{{link|}}} | [[{{{link}}}|{{{2}}}]] | {{{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 | Frenzy Icon.png | Origins }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds }}
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }}
</pre>

Result:

{{ImageText | Frenzy Icon.png | Origins }}
{{ImageText | Defensive Duellist Icon.png | Backgrounds }}
{{ImageText | Passive Feature Generic Icon.png | Just a test with very very long text }}