Template:DynamicGifDisplay/doc: Difference between revisions

Latest revision as of 11:55, 20 June 2026

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

Overview

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 ({{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

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

How to use

1. Build the list as SkillName:GifFile;NextSkill:NextGif;.... Each entry is Name, a colon, then the GIF file name (with .gif); 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 list must match the node titles used by your {{ImageTooltip}} skill nodes so the hover can find the right GIF. 3. Set title for the header text (optional). 4. If you place more than one of these on a page, give each a unique id so their containers don't collide. 5. Leave size alone unless you need a different display size; 400 is the default. 6. A node with no animation yet can be pointed at blank instead of a file (e.g. Surprise Attack!:blank).

Copy this

{{DynamicGifDisplay
|title=
|id=
|size=
|list=Name1:Gif-Name1.gif;
Name2:Gif-Name2.gif
}}

Example

Skill Tree Showcase

Hover over a skill node to see its demonstration

{{DynamicGifDisplay
|title=Skill Tree Showcase
|list=Unyielding Bastion:Gif-UnyieldingBastion.gif;
Rampage:Gif-Rampage.gif;
Warcry:Gif-Warcry.gif
}}

Tips & notes

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

@@ 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 skill tree 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 ==
+. 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.
+. 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.
+. Set <code>title</code> for the header text (optional).
+. If you place more than one of these on a page, give each a unique <code>id</code> so their containers don't collide.
+. Leave <code>size</code> alone unless you need a different display size; <code>400</code> is the default.
+. 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
-|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>
-* '''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".
+{{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
-|title=
+|title=Skill Tree Showcase
-|list=
+|list=Unyielding Bastion:Gif-UnyieldingBastion.gif;
-|id=
+Rampage:Gif-Rampage.gif;
-|size=
+Warcry:Gif-Warcry.gif
 }}
 </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-&lt;SkillName&gt;.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).