Vorlage:ImageStack: Unterschied zwischen den Versionen

Aktuelle Version vom 13. Januar 2026, 18:34 Uhr

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 Vorlage: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}}