Login
Login

Template:Multiple image/testcases#Test 1

{{Testcases}}

{{Horizontal TOC|limit=2|nonum=y}}

Test 1

= Test 1a =

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| footer = The paradox: do these images both contribute evidence that all ravens are black?

| footer_align = centre

| align = right

| image1 = Corvus corax (FWS).jpg

| width1 = {{#expr: (120 * 950 / 647) round 0}}

| alt1 = One black raven

| caption1 = A black raven

| image2 = Apples.jpg

| width2 = {{#expr: (120 * 4 / 6) round 0}}

| alt2 = Green and red apples

| caption2 = Non-black non-ravens

}}

Note alternate text (appearing in tooltips). Compare with single-image thumbnails.

File:Corvus corax (FWS).jpg

{{clear}}

}}

= Test 1b =

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| footer = specifying heights instead of widths may not work

| footer_align = right

| align = right

| image1 = Corvus corax (FWS).jpg

| height1 = 100

| alt1 = One black raven

| caption1 = A black raven

| image2 = Apples.jpg

| height2 = 100

| alt2 = Green and red apples

| caption2 = Non-black non-ravens

}}

What about vertical height? The templates traditionally advocated annoying hacks (necessitating knowledge of image aspect ratios) to obtain equal heights. But the thumbnail syntax facilitates height specifications directly.

File:Corvus corax (FWS).jpg

{{clear}}

}}

Test 2

= Test 2a =

align = left, direction = vertical

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = left

| direction = vertical

|image1 = Example2.png

|image2 = Bad Title Example.png

|alt1= Alt1

|alt2= Alternate text 2

|caption1 = Example

|caption2 = Example 2

|caption_align = left

}}

{{Lorem}}

{{-}}}}

= Test 2b =

align = right, direction = vertical

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = right

| direction = vertical

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = right

}}

{{Lorem}}

{{-}}}}

= Test 2c =

align = center, direction = vertical

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = center

| direction = vertical

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = center

}}

{{Lorem}}

{{-}}}}

= Test 2d =

align = none, direction = vertical

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = none

| direction = vertical

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

}}

{{Lorem}}

{{-}}}}

= Test 2e =

align = center, direction = vertical, caption_align=centre (UK spelling)

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = center

| direction = vertical

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = centre

}}

{{Lorem}}

{{-}}}}

Test 3

= Test 3a =

align = left, direction = horizontal

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = left

| direction = horizontal

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = left

}}

{{Lorem}}

{{-}}}}

= Test 3b =

align = right, direction = horizontal

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = right

| direction = horizontal

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = right

}}

{{Lorem}}

{{-}}}}

= Test 3c =

align = center, direction = horizontal

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = center

| direction = horizontal

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = center

}}

{{Lorem}}

{{-}}}}

= Test 3d =

align = none, direction = horizontal

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|width = 200

|align = none

| direction = horizontal

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

}}

{{Lorem}}

{{-}}}}

Test 4

one shared caption

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| footer = Players are cautioned with a yellow card and sent off with a red card.

| width = 60

| image1 = Yellow card.svg

| alt1 = Yellow cartouche

| image2 = Red card.svg

| alt2 = Red cartouche

}}

{{Lorem}}

{{-}}}}

Test 5

no caption, no footer

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| width = 60

| image1 = Yellow card.svg

| alt1 = Yellow cartouche

| image2 = Red card.svg

| alt2 = Red cartouche

}}

{{Lorem}}

{{-}}}}

Test 6

one image, one caption

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| width = 60

| image1 = Yellow card.svg

| alt1 = Yellow cartouche

| caption1 = Example

}}

{{Lorem}}

{{-}}}}

Test 7

one image, no caption

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| width = 60

| image1 = Yellow card.svg

| alt1 = Yellow cartouche

}}

{{Lorem}}

{{-}}}}

Test 8

perrow = 1 / 2

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| align = center

| perrow = 1 / 2

| image1 = Frecklesmule.jpg

| width1 = 250

| alt1 = A mule

| caption1 = Rectangular image of a mule

| image3 = Donkey in Clovelly, North Devon, England.jpg

| width3 = 200

| alt3 = A donkey

| caption3 = Rectangular image of a donkey

| image7 = Rainbow_trout.png

| width7 = 100

| alt7 = A trout

| caption7 = Square image of a trout

| footer =

}}}}

Test 9

perrow=1, 2, 1

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=left|width=60|perrow=1, 2, 1

|image1=Ribbon numeral 1.png |image2=Ribbon numeral 2.png |image3=Ribbon numeral 3.png |image4=Ribbon numeral 4.png |image5=Ribbon numeral 5.png |image6=Ribbon numeral 6.png

}}{{lorem}}{{-}}}}

Test 10

total_width = 800

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=center |total_width=800 |title=The Moon |width1=18000|height1=18000|image1=LRO WAC Nearside Mosaic.jpg |caption1=Lunar near side |width2=18000 |height2=18000 |image2=Moon Farside LRO.jpg |caption2=Lunar far side|width3=18622|height3=18622|image3=LRO WAC North Pole Mosaic (PIA14024).jpg|caption3=Lunar north pole|width4=6082|height4=6082|image4=LRO WAC South Pole Mosaic.jpg|caption4=Lunar south pole }}

{{clear}}}}

Test 11

perrow = 2, total_width = 400

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=center |total_width=400|perrow=2 |title=The Moon

|header_align=left|header_background=#eee

|width1=18000|height1=18000|image1=LRO WAC Nearside Mosaic.jpg |caption1=Lunar near side |width2=18000 |height2=18000 |image2=Moon Farside LRO.jpg |caption2=Lunar far side|width3=18622|height3=18622|image3=LRO WAC North Pole Mosaic (PIA14024).jpg|caption3=Lunar north pole|width4=6082|height4=6082|image4=LRO WAC South Pole Mosaic.jpg|caption4=Lunar south pole }}

{{clear}}}}

Test 12

perrow = 3, total_width = 300

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=center |total_width=300|perrow=3 |title=The Moon |width1=18000|height1=18000|image1=LRO WAC Nearside Mosaic.jpg |caption1=Lunar near side |width2=18000 |height2=18000 |image2=Moon Farside LRO.jpg |caption2=Lunar far side|width3=18622|height3=18622|image3=LRO WAC North Pole Mosaic (PIA14024).jpg|caption3=Lunar north pole|width4=6082|height4=6082|image4=LRO WAC South Pole Mosaic.jpg|caption4=Lunar south pole }}

{{clear}}}}

Test 13

perrow = 1 / 2 / 1, total_width = 300

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=center |total_width=300|perrow=1 / 2 / 1 |title=The Moon |width1=18622|height1=18622|image1=LRO WAC North Pole Mosaic (PIA14024).jpg|caption1=Lunar north pole|width2=18000 |height2=18000 |image2=Moon Farside LRO.jpg |caption2=Lunar far side|width3=18000|height3=18000|image3=LRO WAC Nearside Mosaic.jpg |caption3=Lunar near side |width4=6082|height4=6082|image4=LRO WAC South Pole Mosaic.jpg|caption4=Lunar south pole }}

{{clear}}}}

Test 14

= Test 14a =

default image_gap

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| title = Stages in the life of the American Robin

| perrow = 3

| total_width = 600

| align = center

|width1= 500 |height1= 749 |image1=American Robin Nest.jpg

|width2=3888 |height2=2592 |image2=Robin's Nest - Charlotte NC.jpg

|width3=1024 |height3= 768 |image3=AmericanRobinChicksInNest 1.jpg

|width4= 600 |height4= 479 |image4=Robin chick 2 Galawebdesign.jpg

|width5=5184 |height5=3456 |image5=Turdus migratorius -Smithsonian National Zoological Park, Washington, USA -juvenile-8.jpg

|width6=1350 |height6=1024 |image6=Turdus-migratorius-002.jpg

}}{{clear}}}}

= Test 14b =

image_gap = 20

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| title = Stages in the life of the American Robin

| perrow = 3

| image_gap = 20

| total_width = 600

| align = center

|width1= 500 |height1= 749 |image1=American Robin Nest.jpg

|width2=3888 |height2=2592 |image2=Robin's Nest - Charlotte NC.jpg

|width3=1024 |height3= 768 |image3=AmericanRobinChicksInNest 1.jpg

|width4= 600 |height4= 479 |image4=Robin chick 2 Galawebdesign.jpg

|width5=5184 |height5=3456 |image5=Turdus migratorius -Smithsonian National Zoological Park, Washington, USA -juvenile-8.jpg

|width6=1350 |height6=1024 |image6=Turdus-migratorius-002.jpg

}}{{clear}}}}

Test 15

= Test 15a =

manually rescaled images

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=right

|total_width=400

|title=Cactus areoles

|perrow = 2 / 3

|width1=1328|height1= 990|image1=Pereskia grandifolia areole.jpg

|caption1=Areole of Pereskia grandifolia showing its position relative to leaves

|width2=4408|height2=3229|image2=Cut Cereus (brightened).jpg

|caption2=Cross-section of Cereus showing areoles with spines and wool

|width3=2736|height3=3648|image3=Echinopsis candicans (3).jpg

|caption3=Areoles of an Echinopsis species

|width4= 528|height4= 552|image4=Astrophytum capricorne areole.jpg

|caption4=Close-up of an areole of Astrophytum capricorne showing fine wool

|width5= 725|height5= 492|image5=Cactus 4a - geograph.org.uk - 1446436 cleaned.jpg

|caption5=Flowers appear from the upper part of an areole, spines from the lower (Cereus species)

}}{{clear}}}}

= Test 15b =

automatically rescaled images

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=right

|total_width=400

|title=Cactus areoles

|perrow = 2 / 3

|image1=Pereskia grandifolia areole.jpg

|caption1=Areole of Pereskia grandifolia showing its position relative to leaves

|image2=Cut Cereus (brightened).jpg

|caption2=Cross-section of Cereus showing areoles with spines and wool

|image3=Echinopsis candicans (3).jpg

|caption3=Areoles of an Echinopsis species

|image4=Astrophytum capricorne areole.jpg

|caption4=Close-up of an areole of Astrophytum capricorne showing fine wool

|image5=Cactus 4a - geograph.org.uk - 1446436 cleaned.jpg

|caption5=Flowers appear from the upper part of an areole, spines from the lower (Cereus species)

}}{{clear}}}}

Test 16

thumbtime

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| width = 120

| image1 = Yellow card.svg

| alt1 = Yellow cartouche

| image2 = Time Lapse of New York City.ogv

| alt2 = Red cartouche

| thumbtime2 = 12

| footer = Players are cautioned with a yellow card and sent off with a red card.

}}{{clear}}}}

Test 17

long captions

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| width = 105

| image1 = Llanfair Pwllgwyngyll roofscape (1) - geograph.org.uk - 1058331.jpg

| alt1 = Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch

| caption1 = {{shy|{{nowrap|Llanfairpwllgwyngyll}}|gogery|chwyrn|drobwll|llan|tysilio|gogo|goch}}

| image2 = New Zealand 0577.jpg

| alt2 = Taumata­whakatangihanga­koauau­o­tamatea­turi­pukaka­piki­maunga­horo­nuku­pokai­whenua­ki­tana­tahu

| caption2 = Taumata­whakatangihanga­koauau­o­tamatea­turi­pukaka­piki­maunga­horo­nuku­pokai­whenua­ki­tana­tahu

}}{{clear}}}}

Test 18

= Test 18a =

rescale horizontal images

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| align = center

| direction = horizontal

| width = 230

| image1 = File:Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2A_Net_Profit_Present_Value_Distribution.jpg

| image2 = File:Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2B_Rational_Decision_Distribution.jpg

| image3 = File:Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2C_Payoff_Distribution_and_Option_Value.jpg

}}{{clear}}}}

= Test 18b =

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

| align = center

| direction = horizontal

| total_width = 690

| image1 = Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2A_Net_Profit_Present_Value_Distribution.jpg

| caption1 = Fig. 2A Net profit present-value distribution

| image2 = Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2B_Rational_Decision_Distribution.jpg

| caption2 = Fig. 2B Rational decision distribution

| image3 = Datar_Mathews_Real_Option_Method_Wikipedia_Fig_2C_Payoff_Distribution_and_Option_Value.jpg

| caption3 = Fig. 2C Payoff distribution and option value

}}

{{clear}}}}

Test 19

direction = vertical, image_gap = 10

{{testcase nowiki|collapsible=true|style=width:100%;|{{__TEMPLATENAME__

|width = 200

|align = right

|direction = vertical

|image_gap = 10

|image1 = Example2.png

|image2 = Bad Title Example.png

|caption1 = Example

|caption2 = Example 2

|caption_align = right

}}

{{clear}}}}

Test 20

raw

{{testcase nowiki|collapsible=true|style=width:100%;|{{__TEMPLATENAME__

|image1 = Example.png

|image2 = {{maplink|frame=yes|frame-align=left|type=line|id=Q1094308|text=Mapframe example}}

|caption1 = Example

|caption2 = Example 2

|raw2 = true

}}

{{clear}}}}

Test 21

Dark mode test

{{testcase nowiki|collapsible=true|style=width:100%;|

{{__TEMPLATENAME__

|align=center

|total_width=800

|title=Dark mode test

|image1=Adyghe latin alphabet (1927).svg

|class1=skin-invert-image

|image2=Serotonin-2D-skeletal.svg

|image3=Serotonin-2D-skeletal.svg

|class3=skin-invert-image

|image4=2-bromopyridine-from-xtal-3D-bs-17.png

|class4=bg-transparent

}}{{clear}}}}