Template:Multiple image: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
m (Protected "Template:Multiple image": High traffic page ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
No edit summary
Line 2: Line 2:
<div class="thumbinner" {{#if:{{{background color|}}}|style="background-color:{{{background color}}};"}}>
<div class="thumbinner" {{#if:{{{background color|}}}|style="background-color:{{{background color}}};"}}>
{{#if: {{{header|}}} | <div style="clear:both;font-weight:bold;text-align:{{{header_align|center}}};background:{{{header_background|transparent}}};">{{{header}}}</div> }}
{{#if: {{{header|}}} | <div style="clear:both;font-weight:bold;text-align:{{{header_align|center}}};background:{{{header_background|transparent}}};">{{{header}}}</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}}} | {{{width1}}} }} }}px!important;"><div class="thumbimage">[[File:{{{image1}}}|{{#if: {{{width|}}} | {{{width}}} | {{{width1}}} }}px|{{{alt1|{{{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}}} | {{{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>
<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!important;"><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 {{#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>
{{#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!important;"><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 {{#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: {{{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!important;"><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 {{#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: {{{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!important;"><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|}}} |
{{#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 class="thumbcaption" style="clear:left;background:{{{footer_background|transparent}}};">{{{footer}}}</div> }}
</div>
</div>

Revision as of 23:21, June 6, 2020

Basic Usage

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 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
|direction=vertical/horizontal
|header=header for pictures
|footer=A single footer for all the pics
|width=size for all the pictures, use numbers only

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

|image2=
|alt2=
|width2=
|caption2=
}}
Examples
Example 1 Result
{{multiple image
|align=center
|direction=horizontal
|footer=Two Koopa Shells
|width=100
|image1=Green Shell Artwork - Mario Kart Wii.png
|alt1=green shell
|image2=MKW Red Shell Artwork.png
|alt2=red shell
}}
red shell
Two Koopa Shells
Example 2 Result
{{multiple image
|align=center
|direction=vertical
|footer=The Mario Bros.
|width=100
|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=right
|direction=horizontal
|footer=Marioverse Protagonists

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

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

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

|image4=NSMBW Bowser Artwork.png
|alt4=King Koopa
|width4=97
|caption4=Bowser
}}
The plumber
Mario
Mario's younger brother
Luigi
Damsel in distress
Princess Peach
King Koopa
Bowser
Marioverse Protagonists