Template:Superimpose - Revision history

Edwardcd: /* Usage */ updated example numbers

2024-03-17T21:24:13Z

Usage: updated example numbers

← Older revision		Revision as of 21:24, 17 March 2024
Line 19:		Line 19:
	\| base_width = width_of_base_image (i.e. 32px)		\| base_width = width_of_base_image (i.e. 32px)
	\| float = Float_image.png		\| float = Float_image.png
	\| float_width = width_of_float_image (i.e. ~~28px~~)		\| float_width = width_of_float_image (i.e. 26px)
	\| x = horizontal_position (optional, defaults to 0)		\| x = horizontal_position (optional, defaults to 0)
	\| y = vertical_position (optional, defaults to 0)		\| y = vertical_position (optional, defaults to 0)

Edwardcd: /* Parameters */ updated example numbers

2024-03-17T21:23:49Z

Parameters: updated example numbers

← Older revision		Revision as of 21:23, 17 March 2024
Line 28:		Line 28:

	* `base`: The filename or file path of the base image that you want to display.		* `base`: The filename or file path of the base image that you want to display.
	* `base_width`: The width of the base image in pixels (e.g., "~~200px~~").		* `base_width`: The width of the base image in pixels (e.g., "32px").
	* `float`: The filename or file path of the image that you want to float on top of the base image.		* `float`: The filename or file path of the image that you want to float on top of the base image.
	* `float_width`: The width of the float image in pixels (e.g., "~~100px~~").		* `float_width`: The width of the float image in pixels (e.g., "26px").
	* `x`: The horizontal position of the float image relative to the top-left corner of the base image (optional, defaults to 0).		* `x`: The horizontal position of the float image relative to the top-left corner of the base image (optional, defaults to 0).
	* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).		* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).




	===Examples===		===Examples===

Edwardcd: updated formatting, added more to example, cleaned up others stuff.

2024-03-17T21:22:40Z

updated formatting, added more to example, cleaned up others stuff.

← Older revision		Revision as of 21:22, 17 March 2024
Line 33:		Line 33:
	* `x`: The horizontal position of the float image relative to the top-left corner of the base image (optional, defaults to 0).		* `x`: The horizontal position of the float image relative to the top-left corner of the base image (optional, defaults to 0).
	* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).		* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).
	* `align`: The alignment of the entire superimposed image block (optional, defaults to center). Choose from "left," "right," or "center."
	* `base_link`: The optional link for the '''base image''' (e.g., "https://horizonffxi.wiki/w/images/4/41/Icon_background.png").
	* `float_link`: The optional link for the '''float image''' (e.g., " {{changes}} ").
	* `base_alt`: The optional alternative text for the base image (used for accessibility).
	* `float_alt`: The optional alternative text for the float image (used for accessibility).
	* `base_caption`: The optional caption for the base image.
	* `float_caption`: The optional caption for the float image.

	===Examples===		===Examples===
	{\|border="1"		{\|border="1"
	\|- BGCOLOR="e3e3e3"		\|- BGCOLOR="e3e3e3"
	! Code !! Result		! Code !! Images \|\| Result
	\|-		\|-
	\|<pre style="white-space:pre-line">		\|<pre style="white-space:pre-line">
Line 56:		Line 52:
	}}		}}
	</pre>		</pre>
	\|		\| <div style = "padding: 0px 30px 0px 10px;">
			* '''base image''' https://horizonffxi.wiki/w/images/4/41/Icon_background.png
			* '''float image''' {{changes}} </div>
			\| <div style = "padding: 0px 60px 0px 30px;">
	{{Superimpose		{{Superimpose
	\| base = Icon_background.png		\| base = Icon_background.png
Line 64:		Line 63:
	\| x = 4		\| x = 4
	\| y = 4		\| y = 4
	}}		}} </div>
	</noinclude>		</noinclude>
	__NOTOC__		__NOTOC__

Edwardcd: Fixed code to make superimpose work. reduced number of variables to make adding easier.

2024-03-17T21:13:07Z

Fixed code to make superimpose work. reduced number of variables to make adding easier.

← Older revision		Revision as of 21:13, 17 March 2024
Line 1:		Line 1:
	<includeonly><div style="position: ~~relative~~; width: {{{base_width}}};~~{{#switch:{{{align\|}}}\|~~left=float:left; clear:left;\|right=float:right; clear:right;\|center=margin-left:auto; margin-right:auto;\|~~#default=~~}}">{{		<includeonly>{{#if: {{{base}}} \|
	#if: {{{x\|}}}		<div style="position: absolute; width: {{{base_width}}}; left=float:left; clear:left; right=float:right; clear:right; center=margin-left:auto; margin-right:auto;"><!--
	\| <div style="position: absolute; left: {{{x\|0}}}px; top: {{{y\|0}}}px; padding: 0;"><!--		-->[[Image:{{{base}}}\|{{{base_width}}}]]}}
	-->[[Image:{{{float}}}\|{{{float_width}}}~~{{#ifeq:{{{float_link\|}~~}}~~\|file:\|\|{{!}}link={{{float_link\|}}}}}\|alt={{{float_alt\|}}}\|class=stack-fix\|{{{float_caption\|}}}]]~~</div>~~}}[[Image:{{{base}}}\|{{{base_width}}}{{#ifeq:{{{base_link\|file:}}}\|file:\|\|{{!}}link={{{base_link\|file:}}}}}\|alt={{{base_alt\|}}}\|{{{base_caption\|}}}]]~~</div>		{{#if: {{{float}}}\|
			<center><div style="position: absolute; left: {{{x\|0}}}px; top: {{{y\|0}}}px; padding: 0; width:{{{float_width}}}"><!--
			-->[[Image:{{{float}}}\|{{{float_width}}}]]}}</div></center></div>
	</includeonly>		</includeonly>

	<noinclude>		<noinclude>
	== Superimpose Template ==		== Superimpose Template ==
	~~'''documentation by chatgpts interpretation of the template code, trust at your own risk'''~~		The "Superimpose" template allows you to overlay an image (called "float") on top of another image (called "base") using absolute positioning. Primary use is to display an image (like a weapon graphic) over it's background border.

	The "Superimpose" template allows you to overlay an image (called "float") on top of another image (called "base") using absolute positioning. ~~This can be useful when you want to combine images or add annotations~~ to an ~~existing~~ image.

	=== Usage ===		=== Usage ===

	To use the "Superimpose" template, follow this syntax:		To use the "Superimpose" template, follow this syntax:
			<pre>
	<nowiki>{{</nowiki>Superimpose~~<br>~~		<nowiki>{{</nowiki>Superimpose
	\| base = Base_image.~~jpg<br>~~		\| base = Base_image.png
	\| base_width = width_of_base_image~~<br>~~		\| base_width = width_of_base_image (i.e. 32px)
	\| float = Float_image.png~~<br>~~		\| float = Float_image.png
	\| float_width = width_of_float_image~~<br>~~		\| float_width = width_of_float_image (i.e. 28px)
	\| x = horizontal_position (optional, defaults to 0)~~<br>~~		\| x = horizontal_position (optional, defaults to 0)
	\| y = vertical_position (optional, defaults to 0)~~<br>~~		\| y = vertical_position (optional, defaults to 0)
	~~\| align = [left, right, center] (optional, defaults to center)<br>~~
	~~\| base_link = link_to_base_image (optional)<br>~~
	~~\| float_link = link_to_float_image (optional)<br>~~
	~~\| base_alt = alt_text_for_base_image (optional)<br>~~
	~~\| float_alt = alt_text_for_float_image (optional)<br>~~
	~~\| base_caption = caption_for_base_image (optional)<br>~~
	~~\| float_caption = caption_for_float_image (optional)<br>~~
	<nowiki>}}</nowiki>		<nowiki>}}</nowiki>
			</pre>

	=== Parameters ===		=== Parameters ===
Line 41:		Line 34:
	* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).		* `y`: The vertical position of the float image relative to the top-left corner of the base image (optional, defaults to 0).
	* `align`: The alignment of the entire superimposed image block (optional, defaults to center). Choose from "left," "right," or "center."		* `align`: The alignment of the entire superimposed image block (optional, defaults to center). Choose from "left," "right," or "center."
	* `base_link`: The optional link for the base image (e.g., "https://~~example~~.~~com~~/~~base_image~~.~~jpg~~").		* `base_link`: The optional link for the '''base image''' (e.g., "https://horizonffxi.wiki/w/images/4/41/Icon_background.png").
	* `float_link`: The optional link for the float image (e.g., "~~https://example.com/float_image.png~~").		* `float_link`: The optional link for the '''float image''' (e.g., " {{changes}} ").
	* `base_alt`: The optional alternative text for the base image (used for accessibility).		* `base_alt`: The optional alternative text for the base image (used for accessibility).
	* `float_alt`: The optional alternative text for the float image (used for accessibility).		* `float_alt`: The optional alternative text for the float image (used for accessibility).
Line 48:		Line 41:
	* `float_caption`: The optional caption for the float image.		* `float_caption`: The optional caption for the float image.

			===Examples===
			{\|border="1"
			\|- BGCOLOR="e3e3e3"
			! Code !! Result
			\|-
			\|<pre style="white-space:pre-line">
			{{Superimpose
			\| base = Icon_background.png
			\| base_width = 32px
			\| float = Changes.png
			\| float_width = 26px
			\| x = 4
			\| y = 4
			}}
			</pre>
			\|
			{{Superimpose
			\| base = Icon_background.png
			\| base_width = 32px
			\| float = Changes.png
			\| float_width = 26px
			\| x = 4
			\| y = 4
			}}
	</noinclude>		</noinclude>
			__NOTOC__

Aramachus: added chatgpt interpreted documentation on template behavior

2023-07-28T15:44:23Z

added chatgpt interpreted documentation on template behavior

@@ Line 1: / Line 1: @@
-<div style="position: relative; width: {{{base_width}}};{{#switch:{{{align|}}}|left=float:left; clear:left;|right=float:right; clear:right;|center=margin-left:auto; margin-right:auto;|#default=}}">{{
+<includeonly><div style="position: relative; width: {{{base_width}}};{{#switch:{{{align|}}}|left=float:left; clear:left;|right=float:right; clear:right;|center=margin-left:auto; margin-right:auto;|#default=}}">{{
 #if: {{{x|}}}
    | <div style="position: absolute; left: {{{x|0}}}px; top: {{{y|0}}}px; padding: 0;"><!--
         -->[[Image:{{{float}}}|{{{float_width}}}{{#ifeq:{{{float_link|}}}|file:||{{!}}link={{{float_link|}}}}}|alt={{{float_alt|}}}|class=stack-fix|{{{float_caption|}}}]]</div>}}[[Image:{{{base}}}|{{{base_width}}}{{#ifeq:{{{base_link|file:}}}|file:||{{!}}link={{{base_link|file:}}}}}|alt={{{base_alt|}}}|{{{base_caption|}}}]]</div>

Hugin at 14:22, 19 May 2023

2023-05-19T14:22:10Z

← Older revision		Revision as of 14:22, 19 May 2023
Line 2:		Line 2:
	#if: {{{x\|}}}		#if: {{{x\|}}}
	\| <div style="position: absolute; left: {{{x\|0}}}px; top: {{{y\|0}}}px; padding: 0;"><!--		\| <div style="position: absolute; left: {{{x\|0}}}px; top: {{{y\|0}}}px; padding: 0;"><!--
	-->[[Image:{{{float}}}\|{{{float_width}}}{{#ifeq:{{{float_link\|}}}\|file:\|\|{{!}}link={{{float_link\|}}}}}\|alt={{{float_alt\|}}}\|{{{float_caption\|}}}]]</div>}}[[Image:{{{base}}}\|{{{base_width}}}{{#ifeq:{{{base_link\|file:}}}\|file:\|\|{{!}}link={{{base_link\|file:}}}}}\|alt={{{base_alt\|}}}\|{{{base_caption\|}}}]]</div>		-->[[Image:{{{float}}}\|{{{float_width}}}{{#ifeq:{{{float_link\|}}}\|file:\|\|{{!}}link={{{float_link\|}}}}}\|alt={{{float_alt\|}}}\|class=stack-fix\|{{{float_caption\|}}}]]</div>}}[[Image:{{{base}}}\|{{{base_width}}}{{#ifeq:{{{base_link\|file:}}}\|file:\|\|{{!}}link={{{base_link\|file:}}}}}\|alt={{{base_alt\|}}}\|{{{base_caption\|}}}]]</div>

Garnet-HorizonXI (Fandom): Created page with "
{{ #if: {{{x|}}} |
}}}
}}Image:..."

2023-02-07T22:36:22Z

Created page with "<div style="position: relative; width: {{{base_width}}};{{#switch:{{{align|}}}|left=float:left; clear:left;|right=float:right; clear:right;|center=margin-left:auto; margin-right:auto;|#default=}}">{{ #if: {{{x|}}} | <div style="position: absolute; left: {{{x|0}}}px; top: {{{y|0}}}px; padding: 0;">[[Image:{{{float}}}|{{{float_width}}}{{#ifeq:{{{float_link|}}}|file:||{{!}}link={{{float_link|}}}}}|alt={{{float_alt|}}}|{{{float_caption|}}}]]</div>}}Image:..."

New page

<div style="position: relative; width: {{{base_width}}};{{#switch:{{{align|}}}|left=float:left; clear:left;|right=float:right; clear:right;|center=margin-left:auto; margin-right:auto;|#default=}}">{{
#if: {{{x|}}}
| <div style="position: absolute; left: {{{x|0}}}px; top: {{{y|0}}}px; padding: 0;">[[Image:{{{float}}}|{{{float_width}}}{{#ifeq:{{{float_link|}}}|file:||{{!}}link={{{float_link|}}}}}|alt={{{float_alt|}}}|{{{float_caption|}}}]]</div>}}[[Image:{{{base}}}|{{{base_width}}}{{#ifeq:{{{base_link|file:}}}|file:||{{!}}link={{{base_link|file:}}}}}|alt={{{base_alt|}}}|{{{base_caption|}}}]]</div>