Template:Multiple image: Difference between revisions

From Mariopedia, a wiki on Mario, Yoshi, Wario, Donkey Kong, Super Smash Bros., and more!
Jump to navigationJump to search
Content added Content deleted
(Created page with "<includeonly><div class="thumb {{#switch: {{{align|}}} | left = tleft | center | centre = tnone | tright}}" style="width:{{#ifeq: {{{direction|horizontal}}} | vertical | {{#ex...")
 
(fixed redlinks)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<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;}}{{#if:{{{background color|}}}|background-color:{{{background color}}};}}">
<includeonly><div class="thumb {{#switch: {{{align|}}} | left = tleft | center | centre = tnone | tright}}" style="max-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;}}">
<div class="thumbinner" {{#if:{{{background color|}}}|style="background-color:{{{background color}}};"}}>
<div class="thumbinner multiFloatContainer">
⚫
<div {{#ifeq: {{{direction|horizontal}}} | horizontal | class="multiFloat" | class="multiVert"}} style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }} }}px;"><div class="thumbimage">[[File:{{{image1}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }}px|{{{alt1|{{{footer|}}}}}}]]</div>{{#if: {{{caption1|}}} | <div class="thumbcaption" style="clear:left;">{{{caption1}}}</div>}}</div>
{{#if: {{{header|}}} | <div style="clear:both;font-weight:bold;text-align:{{{header_align|center}}};background:{{{header_background|transparent}}};">{{{header}}}</div> }}
<div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }} }}px;"><div class="thumbimage">[[File:{{{image1}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }}px|{{{caption1|{{{footer|}}}}}}]]</div>{{#if: {{{caption1|}}} | <div class="thumbcaption" style="clear:left;">{{{caption1}}}</div>}}</div>
<div {{#ifeq: {{{direction|horizontal}}} | horizontal | class="multiFloat" | class="multiVert"}} style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }} }}px;"><div class="thumbimage">[[File:{{{image2}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }}px||{{{alt2|{{{footer|}}}}}}]]</div>{{#if: {{{caption2|}}} | <div class="thumbcaption" style="clear:left;">{{{caption2}}}</div>}}</div>
<div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }} }}px;"><div class="thumbimage">[[File:{{{image2}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width2}}} }}px|{{{caption2|{{{footer|}}}}}}]]</div>{{#if: {{{caption2|}}} | <div class="thumbcaption" style="clear:left;">{{{caption2}}}</div>}}</div>
{{#if: {{{image3|}}} | <div {{#ifeq: {{{direction|horizontal}}} | horizontal | class="multiFloat" | class="multiVert"}} style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width3}}} }} }}px;"><div class="thumbimage">[[File:{{{image3}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width3}}} }}px|{{{alt3|{{{footer|}}}}}}]]</div>{{#if: {{{caption3|}}} | <div class="thumbcaption" style="clear:left;">{{{caption3}}}</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">[[File:{{{image3}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width3}}} }}px|{{{caption3|{{{footer|}}}}}}]]</div>{{#if: {{{caption3|}}} | <div class="thumbcaption" style="clear:left;">{{{caption3}}}</div>}}</div>
{{#if: {{{image4|}}} | <div {{#ifeq: {{{direction|horizontal}}} | horizontal | class="multiFloat" | class="multiVert"}} style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width4}}} }} }}px;"><div class="thumbimage">[[File:{{{image4}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width4}}} }}px|{{{alt4|{{{footer|}}}}}}]]</div>{{#if: {{{caption4|}}} | <div class="thumbcaption" style="clear:left;">{{{caption4}}}</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">[[File:{{{image4}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width4}}} }}px|{{{caption4|{{{footer|}}}}}}]]</div>{{#if: {{{caption4|}}} | <div class="thumbcaption" style="clear:left;">{{{caption4}}}</div>}}</div>
{{#if: {{{image5|}}} | <div {{#ifeq: {{{direction|horizontal}}} | horizontal | class="multiFloat" | class="multiVert"}} style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }} }}px;"><div class="thumbimage">[[File:{{{image5}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }}px|{{{alt5|{{{footer|}}}}}}]]</div>{{#if: {{{caption5|}}} | <div class="thumbcaption" style="clear:left;">{{{caption5}}}</div>}}</div>}}}}}}{{#if: {{{footer|}}} |
⚫
<div class="thumbcaption" style="clear:left;background:{{{footer_background|transparent}}};">{{{footer}}}</div> }}
⚫
{{#if: {{{image5|}}} | <div style="{{#ifeq: {{{direction|horizontal}}} | horizontal | float:left;}}margin:1px;width:{{#expr: 2 + {{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }} }}px;"><div class="thumbimage">[[File:{{{image5}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width5}}} }}px|{{{caption5|{{{footer|}}}}}}]]</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>
</div></includeonly><noinclude>
</div></includeonly><noinclude>
{| style="width:100%"
{| width=100% style="font-family: arial; border: 1px solid gray"
|- bgcolor=gainsboro
|- bgcolor=gainsboro
! colspan=2 | Basic Usage
! colspan=2 | Basic usage
|-
|-
| colspan=2 |
| colspan=2 |
The multiple image template allows to set two or more images at the same time in a image box, kinda similar to a gallery but without wasting space. You can use up to 10 pictures arranged in a row either horizontally or vertically. Combine the next features to create your own gallery this time! You can [http://en.wikipedia.org/wiki/Template:Multiple_image go here] to see more advanced results or to the {{tem|Multiframe}} template where the images share the same image frame.
The multiple image template allows you to set two or more images at the same time in a image box, similar to a gallery but without wasting space. You can use up to five pictures arranged in a row either horizontally or vertically. Combine the next features to create your own gallery this time! You can [[wikipedia:Template:Multiple image|go here]] to see more advanced results or to the {{tem|multiframe}} template where the images share the same image frame.


<pre style="width:60%">
<pre style="width:60%">
{{multiple image
{{multiple image
|align = left/center/right
|align=left/center/right (right by default)
|direction = vertical/horizontal
|direction=vertical/horizontal (horizontal by default)
|header = header for pictures
|width=size for all the pictures, use numbers only
|footer = A single footer for all the pics
|footer=A single footer for all the pics
⚫
|width = size for all the pictures, use numbers only


| image1 = set a pic
|image1=set a pic
⚫
|width1=size for an specific picture, use numbers only
⚫
| alt1 = alternate text for pic
| width1 = size for an specific picture, use numbers only
|caption1=caption for an specific picture
⚫
|alt1=alternate text for pic
|caption1 = caption for an specific picture


| image2 =
|image2=
| alt2 =
|width2=
⚫
|caption2=
⚫
| width2 =
⚫
|alt2=
⚫
|caption2 =
}}
}}
</pre>
</pre>
Line 45: Line 43:
<pre style="width:100%">
<pre style="width:100%">
{{multiple image
{{multiple image
|align = center
|align=center
⚫
|width=100
|direction = horizontal
|footer = Two Koopa Shells
|footer=Two Koopa shells
⚫
|width = 100


| image1 = Green Shell Artwork - Mario Kart Wii.png
|image1=MKW Green Shell Artwork.png
| alt1 = green shell
|alt1=Green shell


| image2 = Red Shell Artwork - Mario Kart Wii.png
|image2=MKwii Redshell.png
| alt2 = red shell
|alt2=Red shell
}}
}}
</pre>
</pre>
|
|
{{multiple image
{{multiple image
|align = center
|align=center
⚫
|width=100
|direction = horizontal
|footer = Two Koopa Shells
|footer=Two Koopa shells
⚫
|width = 100


| image1 = Green Shell Artwork - Mario Kart Wii.png
|image1=MKW Green Shell Artwork.png
| alt1 = green shell
|alt1=Green shell


| image2 = Red Shell Artwork - Mario Kart Wii.png
|image2=MKwii Redshell.png
| alt2 = red shell
|alt2=Red shell
}}
}}
|- bgcolor=gainsboro
|- bgcolor=gainsboro
Line 77: Line 73:
<pre style="width:100%">
<pre style="width:100%">
{{multiple image
{{multiple image
|align = center
|align=center
|direction =vertical
|direction=vertical
⚫
|width=100
|footer = The Mario Bros.
|footer=The Mario Bros.
⚫
|width = 100


| image1 = MarioNSMBWii.PNG
|image1=MarioNSMBWii.png
| alt1 = Mario
|alt1=Mario


| image2 = LuigiNSMBWii.PNG
|image2=LuigiNSMBWii.png
| alt2 = Luigi
|alt2=Luigi
}}
}}
</pre>
</pre>
|
|
{{multiple image
{{multiple image
|align = center
|align=center
|direction = vertical
|direction=vertical
⚫
|width=100
|footer = The Mario Bros.
|footer=The Mario Bros.
⚫
|width = 100


| image1 = MarioNSMBWii.PNG
|image1=MarioNSMBWii.png
| alt1 = Mario
|alt1=Mario


| image2 = LuigiNSMBWii.PNG
|image2=LuigiNSMBWii.png
| alt2 = Luigi
|alt2=Luigi
}}
}}
|- bgcolor=gainsboro
|- bgcolor=gainsboro
Line 109: Line 105:
<pre style="width:100%">
<pre style="width:100%">
{{multiple image
{{multiple image
|footer=''Super Mario'' characters
|align = right
|direction = horizontal
|footer_align=center
|footer = Marioverse Protagonists


| image1 = MarioNSMBWii.PNG
|image1=MarioNSMBWii.png
⚫
|width1=83
| alt1 = Mario
|caption1=Mario
⚫
| width1 = 80
|alt1=The plumber
⚫
|caption1 = Mario


| image2 = LuigiNSMBWii.PNG
|image2=LuigiNSMBWii.png
⚫
|width2=72
⚫
| alt2 = Luigi
⚫
|caption2=Luigi
⚫
| width2 = 70
|alt2=Mario's younger brother
⚫
|caption2 = Luigi


| image3 = NSMBWiiPeach.png
|image3=NSMBWiiPeach.png
⚫
|width3=72
| alt3 = Princess Peach
|caption3=Princess Peach
⚫
| width3 = 75
|alt3=Damsel in distress
⚫
|caption3 = Princess Peach


| image4 = BowserNSMBWii.png
|image4=NSMBW Bowser Artwork.png
⚫
|width4=97
| alt4 = Bowser
|caption4=Bowser
⚫
| width4 = 95
|alt4=King Koopa
⚫
|caption4 = Bowser
}}
}}
</pre>
</pre>
|
|
{{multiple image
{{multiple image
|footer=''Super Mario'' characters
|align = right
|direction = horizontal
|footer_align=center
|footer = Marioverse Protagonists


| image1 = MarioNSMBWii.PNG
|image1=MarioNSMBWii.png
⚫
|width1=83
| alt1 = Mario
⚫
|caption1=Mario
⚫
| width1 = 80
|alt1=The plumber
|caption1 = Mario


| image2 = LuigiNSMBWii.PNG
|image2=LuigiNSMBWii.png
⚫
|width2=72
| alt2 = Luigi
|caption2=Luigi
| width2 = 70
|alt2=Mario's younger brother
|caption2 = Luigi


| image3 = NSMBWiiPeach.png
|image3=NSMBWiiPeach.png
⚫
|width3=72
| alt3 = Princess Peach
⚫
|caption3=Princess Peach
⚫
| width3 = 75
|alt3=Damsel in distress
|caption3 = Princess Peach


| image4 = BowserNSMBWii.png
|image4=BowserNSMBWii.png
⚫
|width4=97
| alt4 = Bowser
⚫
|caption4=Bowser
⚫
| width4 = 95
|alt4=King Koopa
|caption4 = Bowser
}}
}}
|}
|}
[[Category:Media Templates|{{PAGENAME}}]]
[[Category:Media templates]]</noinclude>
</noinclude>

Latest revision as of 19:53, August 2, 2023

Basic usage

The multiple image template allows you to set two or more images at the same time in a image box, similar to a gallery but without wasting space. You can use up to five pictures arranged in a row either horizontally or vertically. Combine the next features to create your own gallery this time! You can go here to see more advanced results or to the {{multiframe}} template where the images share the same image frame. 

{{multiple image
|align=left/center/right (right by default)
|direction=vertical/horizontal (horizontal by default)
|width=size for all the pictures, use numbers only
|footer=A single footer for all the pics

|image1=set a pic
|width1=size for an specific picture, use numbers only
|caption1=caption for an specific picture
|alt1=alternate text for pic

|image2=
|width2=
|caption2=
|alt2=
}}
Examples
Example 1 Result 
{{multiple image
|align=center
|width=100
|footer=Two Koopa shells

|image1=MKW Green Shell Artwork.png
|alt1=Green shell

|image2=MKwii Redshell.png
|alt2=Red shell
}}
Green shell
Red shell
Two Koopa shells
Example 2 Result 
{{multiple image
|align=center
|direction=vertical
|width=100
|footer=The Mario Bros.

|image1=MarioNSMBWii.png
|alt1=Mario

|image2=LuigiNSMBWii.png
|alt2=Luigi
}}
Mario
Luigi
The Mario Bros.
Example 3 Result 
{{multiple image
|footer=''Super Mario'' characters

|image1=MarioNSMBWii.png
|width1=83
|caption1=Mario
|alt1=The plumber

|image2=LuigiNSMBWii.png
|width2=72
|caption2=Luigi
|alt2=Mario's younger brother

|image3=NSMBWiiPeach.png
|width3=72
|caption3=Princess Peach
|alt3=Damsel in distress

|image4=NSMBW Bowser Artwork.png
|width4=97
|caption4=Bowser
|alt4=King Koopa
}}
The plumber
Mario
Mario's younger brother
Luigi
Damsel in distress
Princess Peach
King Koopa
Bowser
Super Mario characters
Retrieved from "https://mariopedia.org/wiki/Template:Multiple_image?oldid=85357"