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:

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

Start a Discussion Discussions about Portable Infoboxes/Syntax

[Suggestions] Infobox Syntax Improvement

21 messages
- Dessamator
  
  Lytora wrote:As an attribute I'd use format="true". As I noted previously, that was suggested, and not implemented for whate... 2016-03-08T18:04:34Z
- FishTank
  
  Great suggestion! I'd say (or an equivalent) makes the most sense. 2016-03-08T18:14:22Z