Template:DynamicGifDisplay

Documentation Edit this documentation at Template:DynamicGifDisplay/doc.

(edit • history • purge)

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