Difference between revisions of "Template:Multiple image"

Latest revision as of 15:12, 3 February 2009

Template documentation

This documentation is transcluded from Template:Multiple image/doc. (edit | history)

This template creates a box with two to five images arranged vertically or horizontally with captions for the entire box and/or for each images.

Usage

align defaults to "center"
direction defaults to "horizontal"
header_align defaults to "center"
footer_align defaults to "left"
width will overrides width1, width2, width3, width4, and width5. If you want each image to be different sizes, do not provide the width parameter.
header, footer, and captions are optional.

{{multiple image
 | align     = left/right/center
 | direction = horizontal/vertical
 | header    = 
 | header_align = left/right/center
 | header_background = 
 | footer    = 
 | footer_align = left/right/center
 | footer_background = 
 | width     = 
 | image1    = 
 | width1    = 
 | caption1  = 
 | image2    = 
 | width2    = 
 | caption2  = 
 | image3    = 
 | width3    = 
 | caption3  = 
 | image4    = 
 | width4    = 
 | caption4  = 
 | image5    = 
 | width5    = 
 | caption5  = 
}}

Examples

${{{box_caption}}}$

Players are cautioned with a yellow card, and sent off with a red card, which is sometimes round.

{{multiple image
 | footer    = Players are cautioned...
 | width     = 60
 | image1    = Yellow card.svg
 | image2    = Red card.svg
}}

PNG transparency demonstration

A PNG image with an 8-bit transparency layer...

...here overlaid onto a checkered background.

{{multiple image
 | align     = left
 | direction = vertical
 | header    = [[PNG]] transparency demonstration
 | width     = 200
 | image1    = PNG transparency demonstration 1.png
 | caption1  = A PNG image...
 | image2    = PNG transparency demonstration 2.png
 | caption2  = ...here overlaid...
}}

Number 2

Number 3

Number 4

When a user has many of one type of barnstar, they can represent them with ribbons and these numerals to indicate the count.

{{multiple image
 | footer   = When a user has...
 | width    = 60
 | image1   = Ribbon numeral 2.png
 | caption1 = Number 2
 | image2   = Ribbon numeral 3.png
 | caption2 = Number 3
 | image3   = Ribbon numeral 4.png
 | caption3 = Number 4
}}

@@ Line 1: / Line 1: @@
-<includeonly>
+<includeonly><div class="thumb {{#switch: {{{align|}}} | left = tleft | center | centre = tnone | tright}}" style="width:{{#ifeq: {{{direction|horizontal}}} | vertical | {{#expr: {{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }} + 12}} | {{#if: {{{width|}}} | {{#expr: 8 + ({{{width|0}}} + 4) * {{#if: {{{image5|}}} | 5 | {{#if: {{{image4|}}} | 4 | {{#if: {{{image3|}}} | 3 | 2 }} }} }} }} | {{#expr: 16 + {{{width1}}} + {{{width2}}} + {{{width3|0}}} + {{{width4|0}}} + {{{width5|0}}} + {{#if: {{{image5|}}} | 12 | {{#if: {{{image4|}}} | 8 | {{#if: {{{image3|}}} | 4 | 0 }} }} }} }} }} }}px;{{#switch: {{{align|}}} | center | centre = margin: 0 auto;}}">
-__NEWSECTIONLINK__
+<div class="thumbinner">
-</includeonly>
+{{#if: {{{header|}}} | <div style="clear:both;font-weight:bold;text-align:{{{header_align|center}}};background:{{{header_background|transparent}}};">{{{header}}}</div> }}
-<noinclude>
+<div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }} }}px;"><div class="thumbimage">[[Image:{{{image1}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }}px|{{{caption1|{{{box_caption}}}}}}]]</div>{{#if: {{{caption1|}}} | <div class="thumbcaption" style="clear:left;">{{{caption1}}}</div>}}</div>
-{{Documentation}}
+<div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }} }}px;"><div class="thumbimage">[[Image:{{{image2}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }}px|{{{caption2|{{{box_caption}}}}}}]]</div>{{#if: {{{caption2|}}} | <div class="thumbcaption" style="clear:left;">{{{caption2}}}</div>}}</div>
+{{#if: {{{image3|}}} | <div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width3}}} }} }}px;"><div class="thumbimage">[[Image:{{{image3}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width3}}} }}px|{{{caption3|{{{box_caption}}}}}}]]</div>{{#if: {{{caption3|}}} | <div class="thumbcaption" style="clear:left;">{{{caption3}}}</div>}}</div>
+{{#if: {{{image4|}}} | <div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width4}}} }} }}px;"><div class="thumbimage">[[Image:{{{image4}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width4}}} }}px|{{{caption4|{{{box_caption}}}}}}]]</div>{{#if: {{{caption4|}}} | <div class="thumbcaption" style="clear:left;">{{{caption4}}}</div>}}</div>
+{{#if: {{{image5|}}} | <div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }} }}px;"><div class="thumbimage">[[Image:{{{image5}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }}px|{{{caption5|{{{box_caption}}}}}}]]</div>{{#if: {{{caption5|}}} | <div class="thumbcaption" style="clear:left;">{{{caption5}}}</div>}}</div>}}}}}}
+{{#if: {{{footer|}}} | <div class="thumbcaption" style="clear:left;text-align:{{{footer_align|left}}};background:{{{footer_background|transparent}}};">{{{footer}}}</div> }}</div></div></includeonly><noinclude>
+{{documentation}}
+<!-- PLEASE ADD CATEGORIES AND INTERWIKIS TO THE /doc SUBPAGE, THANKS -->
 </noinclude>

Difference between revisions of "Template:Multiple image"

Latest revision as of 15:12, 3 February 2009

Usage

Examples

See also

Navigation menu

Search