Template:Superimpose: Difference between revisions

From HorizonXI Wiki
(added chatgpt interpreted documentation on template behavior)
(Fixed code to make superimpose work. reduced number of variables to make adding easier.)
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__

Revision as of 21:13, 17 March 2024


Superimpose Template

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.

Usage

To use the "Superimpose" template, follow this syntax: 

{{Superimpose
| base = Base_image.png
| base_width = width_of_base_image (i.e. 32px)
| float = Float_image.png
| float_width = width_of_float_image (i.e. 28px)
| x = horizontal_position (optional, defaults to 0)
| y = vertical_position (optional, defaults to 0)
}}

Parameters

  • `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").
  • `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").
  • `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).
  • `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., "Icon_background.png").
  • `float_link`: The optional link for the float image (e.g., " HorizonXI specific 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

Code Result 
{{Superimpose
| base = Icon_background.png
| base_width = 32px
| float = Changes.png
| float_width = 26px
| x = 4
| y = 4
}}
Icon background.png
Changes.png
Retrieved from "https://horizonffxi.wiki/w/index.php?title=Template:Superimpose&oldid=37643"