Template:ImageStack: Difference between revisions
OlafLangmack (talk | contribs) Created page with "<noinclude> == 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 === <pre> {{ImageStack |background=File:BackgroundImage.jpg |overlay1=File:Overlay1.png |overlay2=File:Overlay2.png |width=400 |height=300 |title=Interactive diagram |align=center |mouseima..." |
OlafLangmack (talk | contribs) No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
|width=400 | |width=400 | ||
|height=300 | |height=300 | ||
| | |title0=Background description | ||
|title1=First overlay description | |||
|title2=Second overlay description | |||
|align=center | |align=center | ||
|mouseimage=File:CustomCursor.png | |mouseimage=File:CustomCursor.png | ||
| Line 22: | Line 24: | ||
; background (required) | ; background (required) | ||
: The main background image file | : The main background image file | ||
; overlay1, overlay2, overlay3, overlay4, overlay5 | ; overlay1, overlay2, overlay3, overlay4, overlay5, overlay6, overlay7, overlay8, overlay9, overlay10 | ||
: Optional overlay images that appear when clicking/tapping | : Optional overlay images that appear when clicking/tapping | ||
; width, height (recommended) | ; width, height (recommended) | ||
: Dimensions in pixels - used for responsive calculations and optimal display | : 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 | : Optional alt text and tooltip for individual files (title0=background, title1=first overlay, etc.) | ||
; align | ; align | ||
: Alignment for single widgets: left, center, right | : Alignment for single widgets: left, center, right | ||
| Line 48: | Line 50: | ||
|width=600 | |width=600 | ||
|height=400 | |height=400 | ||
| | |title0=World map base layer | ||
|title1=Population density overlay | |||
|title2=Climate zones overlay | |||
|title3=Economic development overlay | |||
|mouseimage=File:ZoomCursor.png | |mouseimage=File:ZoomCursor.png | ||
}} | }} | ||
| Line 55: | Line 60: | ||
==== Horizontal Gallery ==== | ==== Horizontal Gallery ==== | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Photo1.jpg|overlay1=File:Info1.png|width=200|height=150|size=small}} | {{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}} | {{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}} | {{ImageStack|background=File:Photo3.jpg|overlay1=File:Info3.png|width=200|height=150|size=small|title0=Photo 3|title1=Photo 3 information}} | ||
</pre> | </pre> | ||
| Line 68: | Line 73: | ||
|height=600 | |height=600 | ||
|align=center | |align=center | ||
| | |title0=Large detailed image | ||
|title1=Annotated version | |||
|ellipsis_invert=true | |ellipsis_invert=true | ||
}} | }} | ||
| Line 75: | Line 81: | ||
==== Mixed Size Layout ==== | ==== Mixed Size Layout ==== | ||
<pre> | <pre> | ||
{{ImageStack|background=File:MainChart.jpg|width=500|height=300}} | {{ImageStack|background=File:MainChart.jpg|width=500|height=300|title0=Main chart view}} | ||
{{ImageStack|background=File:DetailView.jpg|width=300|height=300}} | {{ImageStack|background=File:DetailView.jpg|width=300|height=300|title0=Detail view}} | ||
</pre> | </pre> | ||
| Line 128: | Line 134: | ||
=== Migration from Previous Versions === | === Migration from Previous Versions === | ||
'''Existing single widgets:''' | '''Title parameter changes:''' The single "title" parameter has been replaced with individual title parameters: | ||
* Old: <code>title=Widget description</code> | |||
* New: <code>title0=Background description|title1=First overlay description</code> | |||
'''Existing single widgets:''' Replace <code>title=</code> with <code>title0=</code> for background image descriptions. | |||
'''To create horizontal layouts:''' Simply place multiple ImageStack templates consecutively without blank lines between them: | '''To create horizontal layouts:''' Simply place multiple ImageStack templates consecutively without blank lines between them: | ||
'''Before (single | '''Before (single titles):''' | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Image1.jpg|width=300|height=200}} | {{ImageStack|background=File:Image1.jpg|width=300|height=200|title=Image 1}} | ||
{{ImageStack|background=File:Image2.jpg|width=300|height=200}} | {{ImageStack|background=File:Image2.jpg|width=300|height=200|title=Image 2}} | ||
</pre> | </pre> | ||
'''After ( | '''After (individual titles):''' | ||
<pre> | <pre> | ||
{{ImageStack|background=File:Image1.jpg|width=300|height=200}} | {{ImageStack|background=File:Image1.jpg|width=300|height=200|title0=Image 1 background}} | ||
{{ImageStack|background=File:Image2.jpg|width=300|height=200}} | {{ImageStack|background=File:Image2.jpg|width=300|height=200|title0=Image 2 background}} | ||
</pre> | </pre> | ||
</noinclude><includeonly><div class="imagestack-widget imagestack-initialized{{#if:{{{align|}}}| imagestack-align-{{{align}}}}}{{#if:{{{size|}}}| imagestack-{{{size}}}}}" data-background="{{{background}}}"{{#if:{{{overlay1|}}}| data-overlay1="{{{overlay1}}}"}}{{#if:{{{overlay2|}}}| data-overlay2="{{{overlay2}}}"}}{{#if:{{{overlay3|}}}| data-overlay3="{{{overlay3}}}"}}{{#if:{{{overlay4|}}}| data-overlay4="{{{overlay4}}}"}}{{#if:{{{overlay5|}}}| data-overlay5="{{{overlay5}}}"}}{{#if:{{{overlay6|}}}| data-overlay6="{{{overlay6}}}"}}{{#if:{{{overlay7|}}}| data-overlay7="{{{overlay7}}}"}}{{#if:{{{overlay8|}}}| data-overlay8="{{{overlay8}}}"}}{{#if:{{{overlay9|}}}| data-overlay9="{{{overlay9}}}"}}{{#if:{{{overlay10|}}}| data-overlay10="{{{overlay10}}}"}}{{#if:{{{width|}}}| data-width="{{{width}}}"}}{{#if:{{{height|}}}| data-height="{{{height}}}"}}{{#if:{{{title0|}}}| data-title0="{{{title0}}}"}}{{#if:{{{title1|}}}| data-title1="{{{title1}}}"}}{{#if:{{{title2|}}}| data-title2="{{{title2}}}"}}{{#if:{{{title3|}}}| data-title3="{{{title3}}}"}}{{#if:{{{title4|}}}| data-title4="{{{title4}}}"}}{{#if:{{{title5|}}}| data-title5="{{{title5}}}"}}{{#if:{{{title6|}}}| data-title6="{{{title6}}}"}}{{#if:{{{title7|}}}| data-title7="{{{title7}}}"}}{{#if:{{{title8|}}}| data-title8="{{{title8}}}"}}{{#if:{{{title9|}}}| data-title9="{{{title9}}}"}}{{#if:{{{title10|}}}| data-title10="{{{title10}}}"}}{{#if:{{{mouseimage|}}}| data-mouseimage="{{{mouseimage}}}"}}{{#if:{{{ellipsis_invert|}}}| data-ellipsis-invert="{{{ellipsis_invert}}}"}}> | |||
</noinclude><includeonly><div class="imagestack-widget imagestack-initialized{{#if:{{{align|}}}| imagestack-align-{{{align}}}}}{{#if:{{{size|}}}| imagestack-{{{size}}}}}" data-background="{{{background}}}"{{#if:{{{overlay1|}}}| data-overlay1="{{{overlay1}}}"}}{{#if:{{{overlay2|}}}| data-overlay2="{{{overlay2}}}"}}{{#if:{{{overlay3|}}}| data-overlay3="{{{overlay3}}}"}}{{#if:{{{overlay4|}}}| data-overlay4="{{{overlay4}}}"}}{{#if:{{{overlay5|}}}| data-overlay5="{{{overlay5}}}"}}{{#if:{{{width|}}}| data-width="{{{width}}}"}}{{#if:{{{height|}}}| data-height="{{{height}}}"}}{{#if:{{{ | |||
</div></includeonly> | </div></includeonly> | ||