Editing Template:Multiple image/doc (section)

==Examples==

{{demo|reverse=1|<nowiki>{{multiple image
 | width = 60
 | image1 = Yellow card.svg
 | class1 = bg-transparent
 | alt1 = Yellow cartouche
 | image2 = Red card.svg
 | class2 = bg-transparent
 | alt2 = Red cartouche
 | footer = Players are cautioned with a yellow card and sent off with a red card.
}}</nowiki>}}
{{clear}}
{{demo|reverse=1|<nowiki>{{multiple image
 | align = left
 | direction = vertical
 | width = 200
 | header = [[Portable Network Graphics|PNG]] transparency demonstration
 | image1 = PNG transparency demonstration 1.png
 | alt1 = Colored dice with transparent background
 | class1 = bg-transparent
 | caption1 = A PNG image with an 8-bit transparency layer...
 | image2 = PNG transparency demonstration 2.png
 | alt2 = Colored dice with checkered background
 | caption2 = ...here overlaying a checkered background.
}}</nowiki>}}
{{clear}}
{{demo|reverse=1|<nowiki>{{multiple image
 | width = 60
 | image1=Ribbon numeral 2.png | alt1=2
 | image2=Ribbon numeral 3.png | alt2=3
 | image3=Ribbon numeral 4.png | alt3=4
 | footer = When a user has many of one type of [[WP:BARN|barnstar]], they can represent them with [[WP:RIBBON|ribbons]] and these numerals to indicate the count.
}}</nowiki>}}
{{clear}}

===With ''background color''===
{{demo|<nowiki>{{multiple image
 | align = left
 | background_color = #BBDD99
 | width = 160
 | image1 = Adoxa_moschatellina_210406.jpg
 | alt1 = Green herb with a few tiny yellow-white flowers
 | image2 = Adoxa_moschatellina_210406a.jpg
 | alt2 = Three small white and yellow flowers before green-leaf background
 | image3 = adoxa_moschatellina_blatt.jpeg
 | alt3 = Leaves of a plant, in groups of three each with three lobes
 | footer_background = #33CC00
 | footer_align = center
 | footer = ''[[Adoxa]]'' (''Adoxa moschatellina'')
}}</nowiki>}}
{{clear}}

If the images have a clear background, this will by default be changed to white. To make the background color of the images match, set them with {{para|image_style|background-color:}}. You might want to also remove the border. 

{{demo|<nowiki>{{multiple image 
| align = center 
| width = 64 
| background_color = black 
| image_style=background-color:black; border:none;
| image1 = Aries symbol (planetary color).svg|link1=Aries (astrology)
| image2 = Taurus symbol (planetary color).svg|link2=Taurus (astrology)
| image3 = Gemini symbol (planetary color).svg|link3=Gemini (astrology)
| image4 = Leo symbol (planetary color).svg|link4=Leo (astrology)
}}</nowiki>}}
{{clear}}

===With links (''link[n]'')===
{{demo|reverse=1|<nowiki>{{multiple image
 | align = left

 | image1 = Mule (PSF).png
 | width1 = 143
 | alt1 = A mule
 | link1 = Mule
 | caption1 = A mule

 | image2 = Donkey 1 arp 750px.jpg
 | width2 = 150
 | alt2 = A donkey
 | link2 = 
 | caption2  = A donkey

 | image3 = Rainbow_trout.png
 | width3 = 91
 | alt3 = A trout
 | caption3  = A fish

 | footer = The image of the mule links to [[Mule]]; the image of the donkey does not link anywhere; the image of the trout links to a [[Image description page|standard image description page]].
}}</nowiki>}}
{{clear}}

===Using ''direction''===
By default, the images the template presents are displayed horizontally, as a row (see left; equivalent to setting {{para|direction|horizontal}}). To display them vertically, i.e. as a column, set {{para|direction|vertical}} (see right).
{{multiple image
 |align=left |direction=horizontal |header=(horizontal) |width=60
 |image1=Ribbon numeral 2.png |image2=Ribbon numeral 3.png |image3=Ribbon numeral 4.png
}}
{{multiple image
 |align=right |direction=vertical |header=(vertical) |width=60
 |image1=Ribbon numeral 2.png |image2=Ribbon numeral 3.png |image3=Ribbon numeral 4.png
}}
{{clear}}
On mobile devices some images may always be displayed vertically if the total width is larger than around 320.

===To match image heights===
{{hatnote|Note: The following is unnecessary if all the images presented by the template have the same [[Aspect ratio (image)|aspect ratio]]; if so, simply set {{mono|width}} accordingly.}}
* Decide on a total width for all the images, say {{pval|320px}}
* Set the total width using {{para|total_width}}

{{demo|reverse=1|<nowiki>{{multiple image
 | align = right
 | total_width = 320

 | image1 = Donkey 1 arp 750px.jpg
 | alt1 = A donkey
 | caption1 = Rectangular image of a donkey, originally 536 pixels high.

 | image2 = Rainbow_trout.png
 | alt2 = A trout
 | caption2 = Square image of a trout, originally 300 pixels high.

 | footer = Both images have been rendered with the same height, and a total width of 320px
}}</nowiki>}}
{{clear}}

'''Using the {{para|width[n]}} and {{para|height[n]}} parameters.'''

{{demo|reverse=1|<nowiki>{{multiple image
 | align = right
 | total_width = 480

 | image1 = Rainbow_trout.png
 | caption1 = Square image of a trout, originally 300 x 300 pixels.

 | image2 = Rainbow_trout.png
 | width2 = 900
 | height2 = 900
 | caption2 = <code>width2</code> x <code>height2</code> = 900 x 900.
 
 | image3 = Rainbow_trout.png
 | width3 = 100
 | height3 = 200
 | caption3 = <code>width3</code> x <code>height3</code> = 100 x 200.
 
 | image4 = Rainbow_trout.png
 | width4 = 200
 | height4 = 100
 | caption4 = <code>width4</code> x <code>height4</code> = 200 x 100.
 
 | footer = All images have been rendered with the same height except for image3, which is 100/200 = 1/2 the height of the other images. Image4 is 200/100 = 2 times the height of image1, so only its top half is visible. Total width set to 480px.
}}</nowiki>}}
{{clear}}
The aspect ratio of each image is automatically retrieved from the File metadata.  You can override the native width and height values by
* Examining the individual image pages to obtain the full resolution. For example:
** [[:File:Donkey 1 arp 750px.jpg]] shows "Donkey_1_arp_750px.jpg (750 × 536 pixels, file size: 125 KB, MIME type: image/jpeg)"
** [[:File:Rainbow trout.png]] shows "Rainbow_trout.png (300 × 300 pixels, file size: 158 KB, MIME type: image/png)"
* Specify the full width and height for each image, of the form:
** {{para|width1}} {{para|height1}}  {{para|width2}} {{para|height2}}

=== Multiple rows ===
To create an array of images, with multiple rows, use {{para|perrow}}.  The value passed to {{para|perrow}} may be a single number, or a list of numbers delimited by <code>/</code>.  This feature may also be combined with {{para|total_width}} for multiple rows of images with the same total width.
{{demo|reverse=1|<nowiki>{{multiple image|perrow = 2|total_width=300
| image1 = Kern_Theodolit_DKM2-A.jpg
| image2 = Total-Robotic-Station.jpg
| image3 = DumpyLevel.jpg
| image4 = GPS_Survey_Equipment_at_Weir_Dyke_Bridge_-_geograph.org.uk_-_336908.jpg
| footer = Surveying Equipment. Clockwise from upper left: Optical Theodolite, Robotic total station, [[Real-time kinematic|RTK]] GPS Base station, Optical level.
}}</nowiki>}}
{{clear}}

=== Removing the image border ===
The border around the images can be removed using {{para|image_style|border:none}}.
{{demo|reverse=1|<nowiki>{{multiple image
 | align = right
 | total_width = 320
 | image_style = border:none;

 | image1 = Donkey 1 arp 750px.jpg
 | alt1 = A donkey
 | caption1 = Image of a donkey

 | image2 = Rainbow_trout.png
 | alt2 = A trout
 | caption2 = Image of a trout
}}</nowiki>}}
{{clear}}

=== Increasing the gap between images ===
The gap between the images can be increased using {{para|image_gap|N}}, where N is the number of pixels (must be non-negative).
{{demo|reverse=1|<nowiki>{{multiple image
 | align = right
 | total_width = 320
 | image_gap = 20

 | image1 = Donkey 1 arp 750px.jpg
 | alt1 = A donkey
 | caption1 = Image of a donkey

 | image2 = Rainbow_trout.png
 | alt2 = A trout
 | caption2 = Image of a trout
}}</nowiki>}}
{{clear}}

=== Directly invoking module ===
On large pages, multiple uses of this template can contribute to the page exceeding the maximum [[WP:PEIS|post-expand include size]] limit. To reduce the include size, [[Module:Multiple image]] can be invoked directly as follows (note the extra <code>|</code> character after the module name):

{{demo|reverse=1|<nowiki>{{#invoke:multiple image|
 | width = 60
 | image1 = OOjs UI icon wikiTemplate.svg
 | class1 = skin-invert-image
 | image2 = Cib-lua (CoreUI Icons v1.0.0).svg
 | class2 = skin-invert-image
}}</nowiki>}}
{{clear}}