Portable Infoboxes/Syntax

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:

Animals

<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:

Animals

<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;
}