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 |
||
| 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 26: | Line 28: | ||
; 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 | ||
: 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> | ||
| Line 148: | Line 158: | ||
[[Category:MediaWiki templates]] | [[Category:MediaWiki templates]] | ||
[[Category:Interactive content]] | [[Category:Interactive content]] | ||
</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:{{{ | </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:{{{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:{{{mouseimage|}}}| data-mouseimage="{{{mouseimage}}}"}}{{#if:{{{ellipsis_invert|}}}| data-ellipsis-invert="{{{ellipsis_invert}}}"}}> | ||
</div></includeonly> | </div></includeonly> | ||