Template:Multiple image

From Iwe

(Difference between revisions)
(Created page with '<pre style="width:60%"> {{multiple image |align=left/center/right |direction=vertical/horizontal |header=header for pictures |footer=A single footer for all the pics |width=size …')
Line 1: Line 1:
-
<pre style="width:60%">
+
{{#if:{{{image1|}}}{{{image2|}}}{{{image3|}}}{{{image4|}}}{{{image5|}}}{{{image6|}}}{{{image7|}}}{{{image8|}}}{{{image9|}}}{{{image10|}}}|<div class="thumb {{#switch: {{{align|}}} | left = tleft | center|centre = tnone | right|#default = tright}}" style="width: {{#switch:{{{direction|}}}<!--
-
{{multiple image
+
If stacked vertically, box width = largest width + 12 px (6 px margin on left and right) -->
-
|align=left/center/right
+
| vertical               = {{#expr:
-
|direction=vertical/horizontal
+
    {{#if:{{{width|}}}
-
|header=header for pictures
+
      | {{{width}}}
-
|footer=A single footer for all the pics
+
      | {{Max/12 | {{{width1|}}} | {{{width2|}}} | {{{width3|}}} | {{{width4|}}} | {{{width5|}}} | {{{width6|}}} | {{{width7|}}} | {{{width8|}}} | {{{width9|}}} | {{{width10|}}} }}
-
|width=size for all the pictures, use numbers only
+
    }}
-
 
+
    + 12
-
|image1=set a pic
+
  }}
-
|alt1=alternate text for pic
+
| horizontal | #default  = {{#if:{{{width|}}}<!--
-
|width1=size for an specific picture, use numbers only
+
  If stacked horizontally and a single common width was passed for use in all images,
-
|caption1=caption for an specific picture
+
  box width = (common width + 4px) * number of images + 8.
-
 
+
  This creates a 4px margin between the images, and a 6px margin on each side -->
-
|image2=
+
  |{{#expr:
-
|alt2=
+
      ({{{width}}}+4)
-
|width2=
+
      *
-
|caption2=
+
      {{Template:Multiple image/numImgs | {{{image1|}}} | {{{image2|}}} | {{{image3|}}} | {{{image4|}}} | {{{image5|}}} | {{{image6|}}} | {{{image7|}}} | {{{image8|}}} | {{{image9|}}} | {{{image10|}}} }}
 +
      +
 +
      8
 +
      }}<!--
 +
  If stacked horizontally and a custom width was passed for each image,
 +
  box width = sum of all widths + 4 pixels of margin between each pair of images + 16 pixels of margin (8 on each side of the box) (why not 6px as in other cases?...)-->
 +
  |{{#expr:
 +
      {{{width1|0}}}+{{{width2|0}}}+{{{width3|0}}}+{{{width4|0}}}+{{{width5|0}}}+{{{width6|0}}}+{{{width7|0}}}+{{{width8|0}}}+{{{width9|0}}}+{{{width10|0}}}
 +
      +
 +
      4 * ({{Template:Multiple image/numImgs | {{{image1|}}} | {{{image2|}}} | {{{image3|}}} | {{{image4|}}} | {{{image5|}}} | {{{image6|}}} | {{{image7|}}} | {{{image8|}}} | {{{image9|}}} | {{{image10|}}} }} - 2)
 +
      +
 +
      16
 +
      }}
 +
  }}
 +
}}px; {{#switch: {{{align|}}} | center | centre = margin: 0 auto;}}{{#if:{{{background color|}}}|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-color: {{{header_background|transparent}}}">
 +
{{{header}}}
 +
</div>
 +
}}{{#if:{{{image1|}}}|
 +
<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{{#ifeq:{{{link1|:}}}|:||{{!}}link={{{link1}}}}}|alt={{{alt1|}}}|{{{caption1|}}}]]
 +
</div>
 +
{{#if:{{{caption1|}}}|
 +
<div class="thumbcaption" style="clear:left">{{{caption1}}}
 +
</div>
}}
}}
-
</pre>
+
</div>
-
|-
+
}}{{#if:{{{image2|}}}|
-
! colspan=2 bgcolor=gainsboro | Examples
+
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width2}}}}}}}px">
-
|- bgcolor=gainsboro
+
<div class="thumbimage">[[file:{{{image2}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width2}}} }}px{{#ifeq:{{{link2|:}}}|:||{{!}}link={{{link2}}}}}|alt={{{alt2|}}}|{{{caption2|}}}]]
-
!width=50% |Example 1
+
</div>{{#if:{{{caption2|}}}|
-
!width= 50%|Result
+
<div class="thumbcaption" style="clear:left">{{{caption2}}}
-
|-
+
</div>
-
|
+
-
<pre style="width:100%">
+
-
{{multiple image
+
-
|align=center
+
-
|direction=horizontal
+
-
|footer=Two Koopa Shells
+
-
|width=100
+
-
|image1=Green Shell Artwork - Mario Kart Wii.png
+
-
|alt1=green shell
+
-
|image2=Red Shell Artwork - Mario Kart Wii.png
+
-
|alt2=red shell
+
}}
}}
-
</pre>
+
</div>
-
|
+
}}{{#if:{{{image3|}}}|
-
{{multiple image
+
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width3}}}}}}}px">
-
|align=center
+
<div class="thumbimage">[[file:{{{image3}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width3}}} }}px{{#ifeq:{{{link3|:}}}|:||{{!}}link={{{link3}}}}}|alt={{{alt3|}}}|{{{caption3|}}}]]
-
|direction=horizontal
+
</div>{{#if:{{{caption3|}}}|
-
|footer=Two Koopa Shells
+
<div class="thumbcaption" style="clear:left">{{{caption3}}}
-
|width=100
+
</div>
-
|image1=Green Shell Artwork - Mario Kart Wii.png
+
-
|alt1=green shell
+
-
|image2=Red Shell Artwork - Mario Kart Wii.png
+
-
|alt2=red shell
+
}}
}}
-
|- bgcolor=gainsboro
+
</div>
-
!width=50% |Example 2
+
}}{{#if:{{{image4|}}}|
-
!width= 50%|Result
+
<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{{#ifeq:{{{link4|:}}}|:||{{!}}link={{{link4}}}}}|alt={{{alt4|}}}|{{{caption4|}}}]]
-
|
+
</div>{{#if:{{{caption4|}}}|
-
<pre style="width:100%">
+
<div class="thumbcaption" style="clear:left">{{{caption4}}}
-
{{multiple image
+
</div>
-
|align=center
+
-
|direction=vertical
+
-
|footer=The Mario Bros.
+
-
|width=100
+
-
|image1=MarioNSMBWii.PNG
+
-
|alt1=Mario
+
-
|image2=LuigiNSMBWii.PNG
+
-
|alt2=Luigi
+
}}
}}
-
</pre>
+
</div>
-
|
+
}}{{#if:{{{image5|}}}|
-
{{multiple image
+
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width5}}}}}}}px">
-
|align=center
+
<div class="thumbimage">[[file:{{{image5}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width5}}} }}px{{#ifeq:{{{link5|:}}}|:||{{!}}link={{{link5}}}}}|alt={{{alt5|}}}|{{{caption5|}}}]]
-
|direction=vertical
+
</div>{{#if:{{{caption5|}}}|
-
|footer=The Mario Bros.
+
<div class="thumbcaption" style="clear:left">{{{caption5}}}
-
|width=100
+
</div>
-
|image1=MarioNSMBWii.PNG
+
-
|alt1=Mario
+
-
|image2=LuigiNSMBWii.PNG
+
-
|alt2=Luigi
+
}}
}}
-
|- bgcolor=gainsboro
+
</div>
-
!width=50% |Example 3
+
}}{{#if:{{{image6|}}}|
-
!width= 50%|Result
+
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width6}}}}}}}px">
-
|-
+
<div class="thumbimage">[[file:{{{image6}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width6}}} }}px{{#ifeq:{{{link6|:}}}|:||{{!}}link={{{link6}}}}}|alt={{{alt6|}}}|{{{caption6|}}}]]
-
|
+
</div>{{#if:{{{caption6|}}}|
-
<pre style="width:100%">
+
<div class="thumbcaption" style="clear:left">{{{caption6}}}
-
{{multiple image
+
</div>
-
|align=right
+
-
|direction=horizontal
+
-
|footer_align=center
+
-
|footer=Marioverse Protagonists
+
-
 
+
-
|image1=MarioNSMBWii.PNG
+
-
|alt1=The plumber
+
-
|width1=83
+
-
|caption1=Mario
+
-
 
+
-
|image2=LuigiNSMBWii.PNG
+
-
|alt2=Mario's younger brother
+
-
|width2=72
+
-
|caption2=Luigi
+
-
 
+
-
|image3=NSMBWiiPeach.png
+
-
|alt3=Damsel in distress
+
-
|width3=72
+
-
|caption3=Princess Peach
+
-
 
+
-
|image4=BowserNSMBWii.png
+
-
|alt4=King Koopa
+
-
|width4=97
+
-
|caption4=Bowser
+
}}
}}
-
</pre>
+
</div>
-
|
+
}}{{#if:{{{image7|}}}|
-
{{multiple image
+
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width7}}}}}}}px">
-
|align=right
+
<div class="thumbimage">[[file:{{{image7}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width7}}} }}px{{#ifeq:{{{link7|:}}}|:||{{!}}link={{{link7}}}}}|alt={{{alt7|}}}|{{{caption7|}}}]]
-
|direction=horizontal
+
</div>{{#if:{{{caption7|}}}|
-
|footer_align=center
+
<div class="thumbcaption" style="clear:left">{{{caption7}}}
-
|footer=Marioverse Protagonists
+
</div>
-
 
+
-
|image1=MarioNSMBWii.PNG
+
-
|alt1=The plumber
+
-
|width1=83
+
-
|caption1=Mario
+
-
 
+
-
|image2=LuigiNSMBWii.PNG
+
-
|alt2=Mario's younger brother
+
-
|width2=72
+
-
|caption2=Luigi
+
-
 
+
-
|image3=NSMBWiiPeach.png
+
-
|alt3=Damsel in distress
+
-
|width3=72
+
-
|caption3=Princess Peach
+
-
 
+
-
|image4=BowserNSMBWii.png
+
-
|alt4=King Koopa
+
-
|width4=97
+
-
|caption4=Bowser
+
}}
}}
-
|}
+
</div>
 +
}}{{#if:{{{image8|}}}|
 +
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width8}}}}}}}px">
 +
<div class="thumbimage">[[file:{{{image8}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width8}}} }}px{{#ifeq:{{{link8|:}}}|:||{{!}}link={{{link8}}}}}|alt={{{alt8|}}}|{{{caption8|}}}]]
 +
</div>{{#if:{{{caption8|}}}|
 +
<div class="thumbcaption" style="clear:left">{{{caption8}}}
 +
</div>
 +
}}
 +
</div>
 +
}}{{#if:{{{image9|}}}|
 +
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width9}}}}}}}px">
 +
<div class="thumbimage">[[file:{{{image9}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width9}}} }}px{{#ifeq:{{{link9|:}}}|:||{{!}}link={{{link9}}}}}|alt={{{alt9|}}}|{{{caption9|}}}]]
 +
</div>{{#if:{{{caption9|}}}|
 +
<div class="thumbcaption" style="clear:left">{{{caption9}}}
 +
</div>
 +
}}
 +
</div>
 +
}}{{#if:{{{image10|}}}|
 +
<div style="{{#ifeq: {{{direction|horizontal}}}|horizontal|float: left;}} margin: 1px; width: {{#expr: 2 + {{#if:{{{width|}}}|{{{width}}}|{{{width10}}}}}}}px">
 +
<div class="thumbimage">[[file:{{{image10}}}|{{#if:{{{width|}}} | {{{width}}} | {{{width10}}} }}px{{#ifeq:{{{link10|:}}}|:||{{!}}link={{{link10}}}}}|alt={{{alt10|}}}|{{{caption10|}}}]]
 +
</div>{{#if:{{{caption10|}}}|
 +
<div class="thumbcaption" style="clear:left">{{{caption10}}}
 +
</div>
 +
}}
 +
</div>
 +
}}{{#if:{{{footer|}}}|
 +
<div class="thumbcaption" style="clear: left; text-align: {{{footer_align|left}}}; background: {{{footer_background|transparent}}}">{{{footer}}}
 +
</div>
 +
}}
 +
</div>
 +
</div>
 +
}}<noinclude>

Revision as of 23:03, 25 January 2019

{{#if:|

{{#if:|

{{{header}}}

}}{{#if:|

[[file:{{{image1}}}|{{#if: | {{{width}}} | {{{width1}}} }}px{{#ifeq::|:||link={{{link1}}}}}|alt=|]]

{{#if:|

{{{caption1}}}

}}

}}{{#if:|

[[file:{{{image2}}}|{{#if: | {{{width}}} | {{{width2}}} }}px{{#ifeq::|:||link={{{link2}}}}}|alt=|]]
{{#if:|
{{{caption2}}}

}}

}}{{#if:|

[[file:{{{image3}}}|{{#if: | {{{width}}} | {{{width3}}} }}px{{#ifeq::|:||link={{{link3}}}}}|alt=|]]
{{#if:|
{{{caption3}}}

}}

}}{{#if:|

[[file:{{{image4}}}|{{#if: | {{{width}}} | {{{width4}}} }}px{{#ifeq::|:||link={{{link4}}}}}|alt=|]]
{{#if:|
{{{caption4}}}

}}

}}{{#if:|

[[file:{{{image5}}}|{{#if: | {{{width}}} | {{{width5}}} }}px{{#ifeq::|:||link={{{link5}}}}}|alt=|]]
{{#if:|
{{{caption5}}}

}}

}}{{#if:|

[[file:{{{image6}}}|{{#if: | {{{width}}} | {{{width6}}} }}px{{#ifeq::|:||link={{{link6}}}}}|alt=|]]
{{#if:|
{{{caption6}}}

}}

}}{{#if:|

[[file:{{{image7}}}|{{#if: | {{{width}}} | {{{width7}}} }}px{{#ifeq::|:||link={{{link7}}}}}|alt=|]]
{{#if:|
{{{caption7}}}

}}

}}{{#if:|

[[file:{{{image8}}}|{{#if: | {{{width}}} | {{{width8}}} }}px{{#ifeq::|:||link={{{link8}}}}}|alt=|]]
{{#if:|
{{{caption8}}}

}}

}}{{#if:|

[[file:{{{image9}}}|{{#if: | {{{width}}} | {{{width9}}} }}px{{#ifeq::|:||link={{{link9}}}}}|alt=|]]
{{#if:|
{{{caption9}}}

}}

}}{{#if:|

[[file:{{{image10}}}|{{#if: | {{{width}}} | {{{width10}}} }}px{{#ifeq::|:||link={{{link10}}}}}|alt=|]]
{{#if:|
{{{caption10}}}

}}

}}{{#if:|

{{{footer}}}

}}

}}

Retrieved from "http://72.14.177.54/iwe/Template:Multiple_image"
Personal tools