Template:Multiple image

From Len'en Wiki
Jump to navigation Jump to search
Documentation icon Template documentation[view] [edit] [history] [purge]

{{Multiple image}} creates a box containing between two to ten images, arranged either vertically or horizontally and with captions for the entire box or per image. It works in a similar fasion to the wiki's image syntax, except allowing multiple images in one box.

With the appropriate choice of parameters, the template can automatically resize images to a given total width with each image having the same height.

Be aware that this template does not respect users' default image size preferences. If image size parameters are omitted, this template sets all images at 200px wide, regardless of whether the reader has set a preference for some other default image width. This causes multiple images to look out of scale to the other images in an article.

Usage

{{multiple image
<!-- Layout parameters -->
 | align             = <!-- right (default), left, center, none --> 
 | direction         = <!-- horizontal (default), vertical -->
 | background color  = <!-- box background -->
 | width             = <!-- displayed width of each image in pixels (an integer, omit "px" suffix); overrides "width[n]"s below -->


<!-- Header -->
 | header_background = 
 | header_align      = <!-- center (default), left, right -->
 | header            = 

<!--image 1-->
 | image1            = <!-- filename only, i.e. without "File:" or "Image:" prefix -->
 | width1            = <!-- displayed width of image; overridden by "width" above -->
 | alt1              = 
 | link1             = 
 | caption1          = 
<!--image 2-->
 | image2            = <!-- filename only, i.e. without "File:" or "Image:" prefix -->
 | width2            = <!-- displayed width of image; overridden by "width" above -->
 | alt2              = 
 | link2             = 
 | caption2          = 
<!-- and so on, to a maximum of 10 images (image10) -->

<!-- Footer -->
 | footer_background = 
 | footer_align      = <!-- left (default), center, right -->
 | footer            = 
}}
Parameter Description
align right (default), left, center
direction horizontal (default), vertical
background color To set the background colour of the box in which the images appear (either pre-defined HTML colours or using hex code).
header_background
header_align center (default), left, right
header
width Use to set the same width for each image (i.e. overrides any width[n] below). Do not include if different image widths intended, including if images are to be resized to a fixed total width.
Note: If the template uses vertical direction, do not set this to 95 or below; this will potentially break the template.
image[n] (where [n] = 1 to 10)  Filename of [n]th image.
width[n] (as above)  Two meanings: (1) The width (in pixels, integer, omit "px") of [n]th image. Overridden by width (if set). (2) The full width of the original [n]th image if total_width is given in order to resize all images to the same height and a given total width.
height[n] (as above)  The full height of the original [n]th image if total_width is given in order to resize all images to the same height and a given total width. Ignored otherwise.
alt[n] (as above)  Alt description for [n]th image.
link[n] (as above)  To specify the page to which the [n]th image is linked.
caption[n] (as above)  Caption for the [n]th image.
footer_background
footer_align left (default), center, right
footer Caption that spans the entire box, as opposed to individual images. Avoid "left" and "right" if possible, since mobile devices may display the images vertically.

Examples

Tsubakura Enraku
Tsubakura Enraku
Which is the real Tsubakura Enraku?
{{multiple image
| image1 = Le01TsurubamiAsTsubakura.png
| width1 = 143
| alt1 = Tsubakura Enraku
| image2 = Le01Tsubakura.png
| width2 = 120
| alt2 = Tsubakura Enraku
| link2 = Tsubakura Enraku
| footer = Which is the real [[Tsubakura Enraku]]?
}}

Monochrome Ray

Tsurubami Senri
Is it this one?
Tsubafake Enrari
...Or this one?
{{multiple image
 | align = left
 | direction = vertical
 | width = 96
 | header = Monochrome Ray
 | image1 = Le01TsurubamiAsTsubakura.png
 | alt1 = Tsurubami Senri
 | caption1 = Is it this one?
 | image2 = Le01Tsubakura.png
 | alt2 = Tsubafake Enrari
 | caption2 = ...Or this one?
}}
2
3
4
Spot the difference
{{multiple image
 | background color = #FFA6A6
 | width = 40
 | image1=Le01ClauseSprite.png | alt1=2
 | image2=Le01FakeTsubaSprite.png | alt2=3
 | image3=Le01TsurubamiSprite.png | alt3=4
 | footer_align=right
 | footer=Spot the difference
}}

Unfortuately, if you wish to make the height of each image the same on an horizontal template, then you will have to manually adjust the width of each image.