Template:Multiple image: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
No edit summary
mNo edit summary
 
(20 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<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;}}{{#if:{{{background color|}}}|background-color:{{{background color}}};}}">
<includeonly><div class="thumb {{#switch:{{{align|}}}|left=tleft|center|centre=tnone|tright}}" style="max-width:{{{total_width|{{#ifeq:{{{direction|horizontal}}}|vertical|{{#expr:{{#if:{{{width|}}}|{{{width}}}|{{{width1}}}}} + 12}}|{{#if:{{{width|}}}|{{#expr:8 + ({{{width|0}}} + 4) * (0 {{#forargs:image|key|value|+ 1}})}}|{{#expr:8 {{#forargs:width|key|value|+ {{#var:value}}}} {{#forargs:image|key|value|+ 4}}}}}}}}}}}px !important;{{#switch:{{{align|}}}|center|centre=margin-left:auto;margin-right:auto}}">
<div class="thumbinner" {{#if:{{{background color|}}}|style="background-color:{{{background color}}};"}}>
<div class="thumbinner multiFloatContainer">
{{#if: {{{header|}}} | <div style="clear:both;font-weight:bold;text-align:{{{header_align|center}}};background:{{{header_background|transparent}}};">{{{header}}}</div> }}
{{#forargs:image|key|value|<div {{#ifeq:{{{direction|horizontal}}}|horizontal|class="multiFloat"|class="multiVert"}} style="{{#ifeq:{{{direction|horizontal}}}|horizontal|float:left;}}padding:1px;width:{{#expr:2 + {{#if:{{{width|}}}|{{{width}}}|{{{width{{#var:key}}}}}}}}}px"><div class="thumbimage">[[File:{{#var:value}}|{{#if:{{{width|}}}|{{{width}}}|{{{width{{#var:key}}}}}}}px|{{{alt{{#var:key}}|{{{footer|}}}}}}]]</div>{{#if:{{{caption{{#var:key}}|}}}|<div class="thumbcaption" style="clear:left">{{{caption{{#var:key}}}}}</div>}}</div>{{#if:{{{perrow|}}}|{{#ifexpr:{{#var:key}} mod {{{perrow}}} = 0|<br>}}}}}}
<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:{{{footer|}}}|<div class="thumbcaption" style="clear:left;background:{{{footer_background|none}}}">{{{footer}}}</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></div></includeonly><noinclude>
{{#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>
{| class="wikitable" style="width:100%;--bg:transparent;--darkbg:transparent"
{{#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>
! colspan="2" | Basic usage
{{#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> }}
</div>
</div></includeonly><noinclude>
{| width=100% style="font-family: arial; border: 1px solid gray"
|- bgcolor=gainsboro
! 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 5 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 place two or more images within the same thumbnail box. You can use any number of images arranged either horizontally or vertically. To place multiple images within a single image frame, you can use {{tem|multiframe}} instead.


<pre style="width:60%">
<pre>
{{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
|perrow=number of images per horizontal row (all by default)
|total_width=the total overall width (used with perrow)
|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
|alt1=alternate text for pic
|width1=size for an specific picture, use numbers only
|width1=size for an specific picture, use numbers only
|caption1=caption for an specific picture
|caption1=caption for an specific picture
|alt1=alternate text for pic


|image2=
|image2=
|alt2=
|width2=
|width2=
|caption2=
|caption2=
|alt2=
}}
}}
</pre>
</pre>
|-
|-
! colspan=2 bgcolor=gainsboro | Examples  
! colspan="2" | Examples  
|- bgcolor=gainsboro
|-
!width=50% |Example 1
! width="50%" | Example 1
!width= 50%|Result
! width="50%" | Result
|-
|-
|
|
<pre style="width:100%">
<pre>
{{multiple image
{{multiple image
|align=center
|direction=horizontal
|footer=Two Koopa Shells
|width=100
|width=100
|image1=Green Shell Artwork - Mario Kart Wii.png
|footer=Two Koopa shells
|alt1=green shell
 
|image1=MKW Green Shell Artwork.png
|alt1=Green shell
 
|image2=MKW Red Shell Artwork.png
|image2=MKW Red Shell Artwork.png
|alt2=red shell
|alt2=Red shell
}}
}}
</pre>
</pre>
|
|
{{multiple image
{{multiple image
|align=center
|direction=horizontal
|footer=Two Koopa Shells
|width=100
|width=100
|image1=Green Shell Artwork - Mario Kart Wii.png
|footer=Two Koopa shells
|alt1=green shell
 
|image1=MKW Green Shell Artwork.png
|alt1=Green shell
 
|image2=MKW Red Shell Artwork.png
|image2=MKW Red Shell Artwork.png
|alt2=red shell
|alt2=Red shell
}}
}}
|- bgcolor=gainsboro
|-
!width=50% |Example 2
!width=50% |Example 2
!width= 50%|Result
!width= 50%|Result
|-
|-
|
|
<pre style="width:100%">
<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=NSMBW Mario Solo Artwork.png
|image1=NSMBW Mario Solo Artwork.png
|alt1=Mario
|alt1=Mario
|image2=NSMBW Luigi Solo Artwork.png
|image2=NSMBW Luigi Solo Artwork.png
|alt2=Luigi
|alt2=Luigi
Line 87: Line 83:
|align=center
|align=center
|direction=vertical
|direction=vertical
|width=100
|footer=The Mario Bros.
|footer=The Mario Bros.
|width=100
 
|image1=NSMBW Mario Solo Artwork.png
|image1=NSMBW Mario Solo Artwork.png
|alt1=Mario
|alt1=Mario
|image2=NSMBW Luigi Solo Artwork.png
|image2=NSMBW Luigi Solo Artwork.png
|alt2=Luigi
|alt2=Luigi
}}
}}
|- bgcolor=gainsboro
|-
!width=50% |Example 3
!width=50% |Example 3
!width= 50%|Result
!width= 50%|Result
|-
|-
|
|
<pre style="width:100%">
<pre>
{{multiple image
{{multiple image
|align=right
|align=left
|direction=horizontal
|footer=''Super Mario'' characters
|footer=Marioverse Protagonists


|image1=NSMBW Mario Solo Artwork.png
|image1=NSMBW Mario Solo Artwork.png
|alt1=The plumber
|width1=83
|width1=83
|caption1=Mario
|caption1=Mario
|alt1=The plumber


|image2=NSMBW Luigi Solo Artwork.png
|image2=NSMBW Luigi Solo Artwork.png
|alt2=Mario's younger brother
|width2=72
|width2=72
|caption2=Luigi
|caption2=Luigi
|alt2=Mario's younger brother


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


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


|image1=NSMBW Mario Solo Artwork.png
|image1=NSMBW Mario Solo Artwork.png
|alt1=The plumber
|width1=83
|width1=83
|caption1=Mario
|caption1=Mario
|alt1=The plumber


|image2=NSMBW Luigi Solo Artwork.png
|image2=NSMBW Luigi Solo Artwork.png
|alt2=Mario's younger brother
|width2=72
|width2=72
|caption2=Luigi
|caption2=Luigi
|alt2=Mario's younger brother


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


|image4=NSMBW Bowser Artwork.png
|image4=NSMBW Bowser Artwork.png
|alt4=King Koopa
|width4=97
|width4=97
|caption4=Bowser
|caption4=Bowser
|alt4=King Koopa
}}
|-
!width=50% |Example 4
!width= 50%|Result
|-
|
<pre>
{{multiple image
|perrow=2
|total_width=189
|footer=All of your favorite ''Super Mario'' characters
|image1=NSMBW Mario Solo Artwork.png
|width1=93
|image2=NSMBW Luigi Solo Artwork.png
|width2=80
|image3=NSMBW Peach Artwork.png
|width3=74
|image4=NSMBW Bowser Artwork.png
|width4=99
}}
</pre>
|
{{multiple image
|perrow=2
|total_width=189
|footer=All of your favorite ''Super Mario'' characters
|image1=NSMBW Mario Solo Artwork.png
|width1=93
|image2=NSMBW Luigi Solo Artwork.png
|width2=80
|image3=NSMBW Peach Artwork.png
|width3=74
|image4=NSMBW Bowser Artwork.png
|width4=99
}}
}}
|}
|}
[[Category:Media templates|{{PAGENAME}}]]</noinclude>
 
[[Category:Structural templates]]</noinclude>

Latest revision as of 11:57, April 19, 2025

Basic usage

The multiple image template allows you to place two or more images within the same thumbnail box. You can use any number of images arranged either horizontally or vertically. To place multiple images within a single image frame, you can use {{multiframe}} instead. 

{{multiple image
|align=left/center/right (right by default)
|direction=vertical/horizontal (horizontal by default)
|perrow=number of images per horizontal row (all by default)
|total_width=the total overall width (used with perrow)
|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
|width=100
|footer=Two Koopa shells

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

|image2=MKW Red Shell Artwork.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=NSMBW Mario Solo Artwork.png
|alt1=Mario

|image2=NSMBW Luigi Solo Artwork.png
|alt2=Luigi
}}
Mario
Luigi
The Mario Bros.
Example 3 Result 
{{multiple image
|align=left
|footer=''Super Mario'' characters

|image1=NSMBW Mario Solo Artwork.png
|width1=83
|caption1=Mario
|alt1=The plumber

|image2=NSMBW Luigi Solo Artwork.png
|width2=72
|caption2=Luigi
|alt2=Mario's younger brother

|image3=NSMBW Peach Artwork.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
Example 4 Result 
{{multiple image
|perrow=2
|total_width=189
|footer=All of your favorite ''Super Mario'' characters

|image1=NSMBW Mario Solo Artwork.png
|width1=93

|image2=NSMBW Luigi Solo Artwork.png
|width2=80

|image3=NSMBW Peach Artwork.png
|width3=74

|image4=NSMBW Bowser Artwork.png
|width4=99
}}
All of your favorite Super Mario characters
All of your favorite Super Mario characters

All of your favorite Super Mario characters
All of your favorite Super Mario characters

All of your favorite Super Mario characters
Retrieved from "https://www.mariowiki.com/index.php?title=Template:Multiple_image&oldid=4849142"