Help:Portable infoboxes

Info-boxes are like fact sheets, or sidebars in magazine articles, designed to present a summary of the topic of the page. They present important points in an organised and quickly readable format. Info-boxes are generally made using templates, to create consistency across a community.

Wikia has developed a new way to code info-boxes, called portable info-boxes to enable them to display well across different devices, which this page details. There are no changes to how you use an info-box on an article - instead, the changes affect how it is written on a template page. A tool to aid info-box migration has also been created - more information about this can be found on Help:Infobox migration.


 * More discussion and background around this new type of infobox code can be found .
 * For information on older styles of infoboxes, see Help:Infobox.

How to use an info-box
You can add an info-box to an article the same way as you would any other template - either via the editor's built-in tools, or through the editor's source mode. In the VisualEditor, portable info-boxes can quickly be inserted via the Info-box option on the 'Insert' drop-down.

Meanwhile, in source mode, you would generally start by copying the syntax from the template's documentation (normally found towards the bottom of the template's page) and pasting it into an article, changing the words after the equals signs to provide the desired information. For example:

With portable info-boxes, this works just the same as with any other template. However, the template page markup is a little different, as detailed below.

Creating new info-boxes
First, start new template with any name you like - Template:ExampleInfobox, for example. While in the past we would have used tables and divs, we can now use info-box tags. We'll begin with a basic 'stacked' info-box, with a title and an image:

This wiki-text will tell your template to use name and image variables for title and image elements. Additionally you can provide the default tag, whose value will be used when a user does not specify a name/image/etc. on the article.

Now we just need two more fields containing additional information, so let's add one:

After adding one last field with source set to first and label to First seen, we end up with the following:

We can now use the template in an article, inserting the following parameters to get a working info-box:

Styling and display
Info-boxes using this kind of code are automatically styled, taking cues from your community's custom theme. If any of the variables are empty, the relevant row of the template will not be displayed (unless the 'default' tag has been used).

Layout options
Two alternative layout options are available for info-boxes:

...
 * default (tabular) layout - &lt;data> tag labels displayed on the left side of the value

...
 * stacked layout - &lt;data> tag labels displayed above the value

Custom theming
Default info-box theming can be overwritten using either theme or theme-source attributes of the info-box tag, allowing info-boxes to be styled via local community CSS. See to learn more about styling. If both attributes are used inside the info-box tag, the theme attribute is treated as the default. Note that spaces in the values of theme and theme-source are converted to hyphen-minuses, so only a single class may be added using them.
 * The theme attribute is used to specify a custom CSS class for the info-box.
 * The theme-source attribute allows you to vary the CSS class via a template parameter.

For lots more information about how to theme an info-box, including detailed guides, check out Help:Portable infoboxes/CSS!

Using videos
To add a video into an info-box, simply use the &lt;image> tag - just as you would with an image. When a video is inserted instead of an image, a thumbnail with a play icon and duration info will be shown in the info-box, and clicking on the video will pop up a video player. If you want to add multiple videos, add a new &lt;image> tag per each video.

Advanced usage
Now, that you have created a simple info-box, you can learn how to use more advanced fields. In this section we are going to build the info-box shown on the right.

Multiple ordering options for simple tags
There are three data fields, then title and image fields. As you can see, the title field does not have to be the first field, though you can only use it once per info-box.

Grouping information inside the group tags
The next field will let you put a number of fields into group, each of which can be given a header. Remember: fields that are declared but don't have a value won't appear. This rule also applies to groups - if none of the fields (excluding the header tag) inside any particular group have a value, the whole group won't show up.

Details

Alternative layout for group tags
Group tags can have an alternative horizontal layout where all the content is displayed next to each other in single horizontal line. This can be achieved by adding layout="horizontal" attribute to the group tag.

...

Force all group elements to be displayed
Using show="incomplete", you can force all group elements to be displayed, even when empty - unless all are empty, then the group is not rendered at all.

 Combatants Details  Combatants

Now we can use it in an article, and the work is done:

Field formatting
If you want to pre-pend or append some additional information to your data - like adding some icons, categories - or to process the passed values, the field formatting allows you to do that.


 * When the tag format is specified for node, the variable provided in source= is then formatted/modified as specified inside the format tag.
 * If the variable provided in source= is empty, the node renders values provided in default tags (or doesn't render if default tags are not specified).

A few sample use cases:
 * Extra text -
 * Links -
 * Categories -

Here, we add an icon through a  template:

The effect shown to the right can be achieved with the following syntax: Price to buy

Parser functions
Parser functions can be added to any infobox. However, the results will be automatically hidden if the parameter, tag or data source do not contain any text. Rank Orc

Available tags
For a detailed list of the standard tags available for portable info-boxes, including samples of wiki-text to use and their HTML output, please see Help:Portable infoboxes/Tags!

Examples

 * Kratos ( source )
 * Beatrix Kiddo ( source )
 * Battle of Arrakeen ( source )