Template:ImageStack

Usage

The ImageStack template creates interactive image stack widgets that can display background images with clickable overlay sequences. Multiple consecutive ImageStack templates automatically line up horizontally when there's enough space.

Basic Syntax

{{ImageStack
|background=File:BackgroundImage.jpg
|overlay1=File:Overlay1.png
|overlay2=File:Overlay2.png
|width=400
|height=300
|title0=Background description
|title1=First overlay description
|title2=Second overlay description
|align=center
|mouseimage=File:CustomCursor.png
|ellipsis_invert=false
}}

Parameters

background (required)

The main background image file

overlay1, overlay2, overlay3, overlay4, overlay5, overlay6, overlay7, overlay8, overlay9, overlay10

Optional overlay images that appear when clicking/tapping

width, height (recommended)

Dimensions in pixels - used for responsive calculations and optimal display

title0, title1, title2, title3, title4, title5, title6, title7, title8, title9, title10

Optional alt text and tooltip for individual files (title0=background, title1=first overlay, etc.)

align

Alignment for single widgets: left, center, right

size

Size hint for optimal spacing: small (widgets <300px), large (widgets >800px)

mouseimage

Optional custom cursor image file (32x32px or 64x64px recommended, square, black and white)

ellipsis_invert

Boolean to invert ellipsis symbol for contrast against background (default: false)

Examples

Single Widget with Overlays

{{ImageStack
|background=File:WorldMap.jpg
|overlay1=File:PopulationData.png
|overlay2=File:ClimateData.png
|overlay3=File:EconomicData.png
|width=600
|height=400
|title0=World map base layer
|title1=Population density overlay
|title2=Climate zones overlay
|title3=Economic development overlay
|mouseimage=File:ZoomCursor.png
}}

Horizontal Gallery

{{ImageStack|background=File:Photo1.jpg|overlay1=File:Info1.png|width=200|height=150|size=small|title0=Photo 1|title1=Photo 1 information}}
{{ImageStack|background=File:Photo2.jpg|overlay1=File:Info2.png|width=200|height=150|size=small|title0=Photo 2|title1=Photo 2 information}}
{{ImageStack|background=File:Photo3.jpg|overlay1=File:Info3.png|width=200|height=150|size=small|title0=Photo 3|title1=Photo 3 information}}

Centered Single Widget

{{ImageStack
|background=File:LargeImage.jpg
|overlay1=File:Annotation.png
|width=800
|height=600
|align=center
|title0=Large detailed image
|title1=Annotated version
|ellipsis_invert=true
}}

Mixed Size Layout

{{ImageStack|background=File:MainChart.jpg|width=500|height=300|title0=Main chart view}}
{{ImageStack|background=File:DetailView.jpg|width=300|height=300|title0=Detail view}}

Horizontal Layout Behavior

Automatic Horizontal Alignment:

• Multiple consecutive Template:Tl calls automatically line up horizontally
• Left-aligned by default with 10px spacing between widgets
• Widgets wrap to new lines when container width is insufficient
• Breakpoints are automatically derived from widget widths

Size-Based Spacing:

• Default: 10px gap between widgets
• size=small: 8px gap (optimal for widgets < 300px)
• size=large: 15px gap (optimal for widgets > 800px)

Visual Indicators:

• Ellipsis (⋯) appears in bottom-right corner when overlays are available
• Automatically hidden when overlays are active for clean playback
• Zoom-in cursor indicates interactive content

Responsive Behavior

Mobile Devices:

• On screens < 600px: All widgets stack vertically and center-align
• On very narrow screens < 400px: Widgets use maximum available width
• Touch gestures: Horizontal swipes advance overlays, vertical swipes scroll page

Print Mode:

• Widgets stack vertically with proper page break handling
• Maintains accessibility and readability in print format

Technical Notes

Interaction:

• Click or tap to cycle through overlays
• Horizontal swipes on touch devices advance overlays
• After showing all overlays, returns to background image
• Each widget operates independently
• Device rotation preserves widget state
• Custom cursor follows mouse movements at 60fps with light easing (~100ms)
• Ellipsis symbol indicates available overlays (can be inverted for contrast)

Browser Compatibility:

• Uses inline-block display for wide browser support
• ECMAScript 5 compatible JavaScript
• Works with MediaWiki 1.41, Minerva Neue, and Vector 2022 skins
• Responsive design adapts to container width
• Custom cursor requires MouseHandler module (graceful fallback to standard cursor)

Migration from Previous Versions

Title parameter changes: The single "title" parameter has been replaced with individual title parameters:

• Old: title=Widget description
• New: title0=Background description|title1=First overlay description

Existing single widgets: Replace title= with title0= for background image descriptions.

To create horizontal layouts: Simply place multiple ImageStack templates consecutively without blank lines between them:

Before (single titles):

{{ImageStack|background=File:Image1.jpg|width=300|height=200|title=Image 1}}

{{ImageStack|background=File:Image2.jpg|width=300|height=200|title=Image 2}}

After (individual titles):

{{ImageStack|background=File:Image1.jpg|width=300|height=200|title0=Image 1 background}}
{{ImageStack|background=File:Image2.jpg|width=300|height=200|title0=Image 2 background}}