imported>Dawning
Im Wiking It
 
the mass documenting
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
<includeonly>{{#vardefine:displayId|{{{id|gif-tab-{{#time:U}}}}}}}{{#vardefine:safeSize|{{#if:{{{size|}}}|{{{size}}}|400}}}}{{#vardefine:safeList|{{{list|}}}}}{{#vardefine:safeTitle|{{{title|GIF Showcase}}}}}<div class="tab-gif-container" id="{{#var:displayId}}" data-gif-list="{{#var:safeList}}" data-gif-size="{{#var:safeSize}}" style="display: block;">
<includeonly><div class="tab-gif-container" id="gif-tab-{{#if:{{{id|}}}|{{{id}}}|{{#time:U}}}}" data-gif-list="{{{list|}}}" data-gif-size="{{#if:{{{size|}}}|{{{size}}}|400}}">
  <div class="tab-gif-header">
<div class="tab-gif-header">
    <h3 class="tab-gif-title">{{#var:safeTitle}}</h3>
<h3 class="tab-gif-title">{{{title|GIF Showcase}}}</h3>
    <button class="tab-gif-toggle-btn" onclick="toggleTabGifDisplay('{{#var:displayId}}')">Hide</button>
</div>
  </div>
<div class="tab-gif-tabs"></div>
  <div class="tab-gif-tabs"></div>
<div class="tab-gif-display-area">
  <div class="tab-gif-display-area">
<div class="gif-image-container">
    <div class="gif-image-container">
<div class="gif-placeholder">Initializing tabs...</div>
      <div class="gif-placeholder">Select a tab to view</div>
</div>
    </div>
<div class="gif-caption" style="display:none;"></div>
    <div class="gif-caption"></div>
</div>
  </div>
</div></includeonly><noinclude>
</div></includeonly>
{{Documentation}}
</noinclude>

Latest revision as of 11:55, 20 June 2026

Documentation Edit this documentation at Template:TabGifDisplay/doc.
(edithistorypurge)

TabGifDisplay builds a tabbed GIF gallery: a header, a row of tabs generated from a name→GIF list, and a display area that shows the selected tab's GIF.

Overview

This template renders a GIF showcase with clickable tabs. Like {{DynamicGifDisplay}} it carries a master list of Name:Filename.gif pairs, but instead of being driven by hovering external nodes it generates its own tab strip (one tab per list entry) and shows the chosen GIF in the display area. Until the JavaScript initializes it shows the placeholder "Initializing tabs...". Note: this template is not currently used on any live page — it is documented here for completeness.

Parameters

Parameter Required? What it does Example
list Required Semicolon-separated list of Name:Filename.gif pairs. Each pair becomes a tab whose GIF shows when selected. Rampage:Gif-Rampage.gif;Warcry:Gif-Warcry.gif
title Optional Heading shown above the tabs. Defaults to GIF Showcase. Knight Skills
id Optional Unique id for this gallery's container. If omitted, the template auto-generates one from the current timestamp (1782117489), so each render is unique. knightgifs
size Optional GIF display size passed to the script (number, pixels). Defaults to 400. 400

How to use

1. Build list exactly as for {{DynamicGifDisplay}}: Name:GifFile;Name:GifFile;... — colon between a name and its GIF, semicolons between pairs. Each pair produces one tab. 2. Optionally set title for the header. 3. You usually do not need id — if omitted it auto-generates a unique id from the timestamp. Set it explicitly only if your scripts need a stable, known id. 4. Leave size at the default 400 unless a different display size is needed. 5. The tab strip and image swapping are produced by JavaScript; the static wikitext only lays out the empty shell and the "Initializing tabs..." placeholder.

Copy this

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

Example

Knight Skills

Initializing tabs...
{{TabGifDisplay
|title=Knight Skills
|list=Unyielding Bastion:Gif-UnyieldingBastion.gif;
Rampage:Gif-Rampage.gif;
Warcry:Gif-Warcry.gif
}}

Tips & notes

  • Currently unused on live pages — there are no real-page examples; the example above is illustrative.
  • Same list grammar as {{DynamicGifDisplay}}: colon between name and file, semicolons between entries. A colon inside a name breaks that entry.
  • GIF file naming convention: Gif-<SkillName>.gif.
  • The auto-generated timestamp id means two of these on the same page won't collide even if you give neither an id; pass an explicit id only if you need to target it.
  • Unlike {{DynamicGifDisplay}}, the template source has no <noinclude>Template loop detected: Template:Documentation</noinclude>, so this /doc may need to be transcluded manually if added to the wiki.
  • Related: {{DynamicGifDisplay}} (hover-driven sibling) and {{ImageTooltip}}.