A comprehensive reference to the Portable Infoboxes syntax.
Image collections
Tabbers
Unlike regular infoboxes which don't display tabbers properly on mobile devices, one can display images in tabs using the code below:
<infobox>
<header>Animals</header>
<image>
<default>
<tabber>
monkeys = [[File:Example.png]]|-|
rabbits = [[File:Information_person.jpg]]|-|
</tabber>
</default>
</image>
</infobox>
Galleries
Galleries provide a way to add both images and video to an article. This functionality is also available in infoboxes:
<infobox>
<header>Animals</header>
<image>
<default>
<gallery>
Example.png|Monkeys
Information_person.jpg|Rabbits
</gallery>
</default>
</image>
</infobox>
Alternate syntax
One way to have a variable number of parameters without using the gallery or tabber tag in a page is to use the
#tag
parser function:
<!--Template:Infobox images -->
<infobox>
<header>Animals</header>
<image source="image">
<caption source="caption" />
<default>
{{#tag:gallery|
{{{image1|}}}{{!}}Image 1
{{{image2|}}}{{!}}Image 2
}}
</default>
</image>
</infobox>
The template can used by writing :
{{infobox images
|image1 = example.png
|image2 = example2.png
}}
There are many other ways to do this using separate Wikitext or Lua templates.
Sample CSS
You can change the look of the tabs using CSS.
.pi-image-collection {
margin-top: 0.5em;
text-align: center;
}
ul.pi-image-collection-tabs {
border-bottom: 1px solid #778;
font: bold 12px Verdana,sans-serif;
list-style: none outside none;
margin: 0 0 2px;
overflow: visible;
padding: 0 0 4px;
text-align: center;
}
ul.pi-image-collection-tabs li.current {
background: none repeat scroll 0 0 #FFF;
border-bottom: 1px solid #FFF;
font-weight: bold;
}
ul.pi-image-collection-tabs li.current:hover {
background-color: #FFF;
border-bottom: 1px solid white;
}
ul.pi-image-collection-tabs li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
display: inline;
line-height: normal;
list-style: none outside none;
background: none repeat scroll 0 0 #DDE;
border-color: #778 #778 -moz-use-text-color;
border-image: none;
border-style: solid solid none;
border-width: 1px;
color: #448;
margin: 0 0 0 3px;
padding: 3px 0.5em;
text-decoration: none;
}
ul.pi-image-collection-tabs li:hover {
background: none repeat scroll 0 0 #AAE;
border-color: #227;
color: #000;
}
.pi-tab-link.pi-item-spacing {
padding: 3px 5px 4px;
}
/* Change background for transparent images */
.pi-image-collection-tab-content {
background-color: #DDE;
}
Community content is available under CC-BY-SA unless otherwise noted.