Template:DynamicGifDisplay/doc - Revision history

Willow: the mass documenting

2026-06-20T11:55:07Z

the mass documenting

← Older revision		Revision as of 11:55, 20 June 2026
Line 1:		Line 1:
	<~~noinclude~~>		'''<code>DynamicGifDisplay</code> builds an interactive GIF panel that shows a placeholder until the reader hovers a linked skill node, then displays that node's demonstration GIF — used on the [[Skill Tree]] page.'''
	~~This template creates a dynamic~~ GIF ~~display area~~ that shows ~~different GIFs based~~ on ~~which tooltip is being hovered~~.		__TOC__

	==~~Usage~~==		== Overview ==
	<syntaxhighlight lang="wikitext" style="overflow: auto;">		This template renders a single display box (title bar, image area, caption) that is driven by JavaScript: it holds a master list of "name → GIF file" pairs, and when the reader hovers a matching skill-tree node ({{tl\|ImageTooltip}}) the panel swaps in that skill's GIF. Until something is hovered it shows the placeholder text "Hover over a skill node to see its demonstration." It is used on the [[Skill Tree]] page to preview every node's animation from one shared viewer.

			== Parameters ==
			{\| class="wikitable"
			! Parameter !! Required? !! What it does !! Example
			\|-
			\| <code>list</code> \|\| Required \|\| Semicolon-separated list of <code>Name:Filename.gif</code> pairs that maps each skill name to its GIF. This is the data the panel pulls from. \|\| <code>Rampage:Gif-Rampage.gif;Warcry:Gif-Warcry.gif</code>
			\|-
			\| <code>title</code> \|\| Optional \|\| Heading shown in the panel's header. Defaults to <code>Skill Showcase</code>. \|\| <code>Skill Tree Showcase</code>
			\|-
			\| <code>id</code> \|\| Optional \|\| Unique id for this panel (used in the container's element id). Falls back to <code>title</code>, then to <code>default</code> if neither is set. \|\| <code>knighttree</code>
			\|-
			\| <code>size</code> \|\| Optional \|\| GIF display size passed to the script (number, pixels). Defaults to <code>400</code>. \|\| <code>400</code>
			\|}

			== How to use ==
			1. Build the <code>list</code> as <code>SkillName:GifFile;NextSkill:NextGif;...</code>. Each entry is <code>Name</code>, a colon, then the GIF file name (with <code>.gif</code>); entries are separated by semicolons. Spaces after the semicolons/line breaks are fine and used in the live page for readability.
			2. The names in <code>list</code> must match the node titles used by your {{tl\|ImageTooltip}} skill nodes so the hover can find the right GIF.
			3. Set <code>title</code> for the header text (optional).
			4. If you place more than one of these on a page, give each a unique <code>id</code> so their containers don't collide.
			5. Leave <code>size</code> alone unless you need a different display size; <code>400</code> is the default.
			6. A node with no animation yet can be pointed at <code>blank</code> instead of a file (e.g. <code>Surprise Attack!:blank</code>).

			== Copy this ==
			<syntaxhighlight lang="wikitext" style="overflow:auto;">
	{{DynamicGifDisplay		{{DynamicGifDisplay
	\|title=~~Display Title~~		\|title=
	\|list=~~TooltipName1~~:~~gif1~~.gif;~~TooltipName2~~:~~gif2~~.gif~~;TooltipName3:gif3.gif~~		\|id=
	~~\|id=unique-id (optional)~~		\|size=
	~~\|size=500~~		\|list=Name1:Gif-Name1.gif;
			Name2:Gif-Name2.gif
	}}		}}
	</syntaxhighlight>		</syntaxhighlight>

	* '''title~~''': The title displayed in the GIF display header.~~		== Example ==
	* '''list~~'''~~: ~~Semicolon~~-~~separated list of skill names and their corresponding GIF filenames in format "SkillName:filename~~.gif~~". '''Replace filename~~.gif ~~with "blank" if a gif would not be suitable for the skill or tooltip.'''~~		{{DynamicGifDisplay
	* '''id''': ~~Optional unique identifier (auto~~-~~generated if not provided)~~.		\|title=Skill Tree Showcase
	* '''size''': Size of display gifs. Automatically has px appended.		\|list=Unyielding Bastion:Gif-UnyieldingBastion.gif;
			Rampage:Gif-Rampage.gif;
			Warcry:Gif-Warcry.gif
			}}

	~~==Copy This==~~		<syntaxhighlight lang="wikitext" style="overflow:auto;">
	<syntaxhighlight lang="wikitext" style="overflow: auto;">
	{{DynamicGifDisplay		{{DynamicGifDisplay
	\|title=		\|title=Skill Tree Showcase
	\|list=		\|list=Unyielding Bastion:Gif-UnyieldingBastion.gif;
	~~\|id=~~		Rampage:Gif-Rampage.gif;
	~~\|size=~~		Warcry:Gif-Warcry.gif
	}}		}}
	</syntaxhighlight>		</syntaxhighlight>

	'~~''The skill~~ names in ~~the~~ list ~~parameter must EXACTLY match~~ the skill ~~titles in your tooltips~~ (~~case~~-~~sensitive~~).'''		== Tips & notes ==
			* The panel does nothing on its own — it needs the page's JavaScript and matching {{tl\|ImageTooltip}} hover nodes whose titles equal the names in <code>list</code>. With no hover, only the placeholder text shows.
			* List separators matter: pairs use a colon (<code>Name:File</code>), entries use a semicolon (<code>;</code>). A stray colon inside a skill name will break that entry.
			* GIF file naming convention on this wiki is <code>Gif-<SkillName>.gif</code> (e.g. <code>Gif-Rampage.gif</code>).
			* Use <code>blank</code> as the file for nodes whose GIF isn't available yet.
			* Give a unique <code>id</code> per panel if a page has several; otherwise the container ids can clash.
			* Related: {{tl\|TabGifDisplay}} (tabbed version of the same idea) and {{tl\|ImageTooltip}} (the hover nodes that drive this panel).

imported>Dawning at 06:23, 15 October 2025

2025-10-15T06:23:32Z

← Older revision		Revision as of 06:23, 15 October 2025
Line 13:		Line 13:

	* '''title''': The title displayed in the GIF display header.		* '''title''': The title displayed in the GIF display header.
	* '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif".		* '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif". '''Replace filename.gif with "blank" if a gif would not be suitable for the skill or tooltip.'''
	* '''id''': Optional unique identifier (auto-generated if not provided).		* '''id''': Optional unique identifier (auto-generated if not provided).
	* '''size''': Size of display gifs. Automatically has px appended.		* '''size''': Size of display gifs. Automatically has px appended.

imported>Dawning: (by SublimeText.Mediawiker)

2025-10-14T02:31:26Z

(by SublimeText.Mediawiker)

← Older revision		Revision as of 02:31, 14 October 2025
Line 1:		Line 1:
	<noinclude>		<noinclude>
	This template creates a dynamic GIF display area that shows different GIFs based on which ~~skill tree~~ tooltip is being hovered.		This template creates a dynamic GIF display area that shows different GIFs based on which tooltip is being hovered.

	==Usage==		==Usage==

imported>Dawning: (by SublimeText.Mediawiker)

2025-10-14T02:30:54Z

(by SublimeText.Mediawiker)

← Older revision		Revision as of 02:30, 14 October 2025
Line 15:		Line 15:
	* '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif".		* '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif".
	* '''id''': Optional unique identifier (auto-generated if not provided).		* '''id''': Optional unique identifier (auto-generated if not provided).
			* '''size''': Size of display gifs. Automatically has px appended.

	==Copy This==		==Copy This==

imported>Dawning: (by SublimeText.Mediawiker)

2025-10-14T02:30:19Z

(by SublimeText.Mediawiker)

New page

<noinclude>
This template creates a dynamic GIF display area that shows different GIFs based on which skill tree tooltip is being hovered.

==Usage==
<syntaxhighlight lang="wikitext" style="overflow: auto;">
{{DynamicGifDisplay
|title=Display Title
|list=TooltipName1:gif1.gif;TooltipName2:gif2.gif;TooltipName3:gif3.gif
|id=unique-id (optional)
|size=500
}}
</syntaxhighlight>

* '''title''': The title displayed in the GIF display header.
* '''list''': Semicolon-separated list of skill names and their corresponding GIF filenames in format "SkillName:filename.gif".
* '''id''': Optional unique identifier (auto-generated if not provided).

==Copy This==
<syntaxhighlight lang="wikitext" style="overflow: auto;">
{{DynamicGifDisplay
|title=
|list=
|id=
|size=
}}
</syntaxhighlight>

'''The skill names in the list parameter must EXACTLY match the skill titles in your tooltips (case-sensitive).'''