FANDOM


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
    • Lytora wrote:As an attribute I'd use format="true". As I noted previously, that was suggested, and not implemented for whate...
    • Great suggestion! I'd say (or an equivalent) makes the most sense.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.