Help:Designing infoboxes

This help page is a how-to guide.

It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus.

You are well-advised to seek the opinions of other editors before embarking on a design of a new infobox or redesign of an existing one. If your ideas are welcomed, consider prototyping your new design. Once prototyped, propose the infobox changes to the appropriate WikiProject and gain consensus before deploying your new design.

Creating a new infobox

You should research whether an existing infobox fits your purpose either by examining those in Category:Infobox templates, Wikipedia:List of infoboxes, or researching articles that might be candidates to receive the new infobox. You should prototype the proposed infobox in your own userspace first and research which WikiProjects might be interested in the infobox.

Prototyped infoboxes should be placed on the Wikipedia:List of infoboxes/Proposed sub-page when proposed and added to the appropriate sub-category when implemented.

Prototyping an infobox

Infoboxes can be readily prototyped within the designing editor's own user space. To start a new page in your namespace, enter "Special:Mypage/" followed by the page name you wish to create into the search box (or create such a link in a location such as the general sandbox). For example, to create a home for the prototype "Infobox_mysubject" in your user space, you would search: Special:Mypage/Infobox mysubject. Do not change "Mypage" to your username.

Then to transclude the prototype template into a discussion thread after building it, if your userid is Tom, you would use the template with {{User:Tom/Special:Mypage/Infobox mysubject}}.

If you are modifying an existing template instead of making an entirely new one, you can do testing in various template sandboxes.

The general steps in prototyping are:

Determining the general implementation approach
Designing the infobox
Implementing the infobox
Documenting, for other editors, how to use the infobox
Categorizing the infobox to make it more easily available to other editors
Testing the infobox implementation

Determining the general approach

There are three techniques with which to construct a prototype:

Use {{infobox}} to construct the prototype. This method is the easiest and hence strongly recommended. The rest of this section assumes the designing editor chooses this approach.
Use a table to construct a "static infobox", converting to a template after the editor arrives at a "final" design. See also Wikipedia:Thinking outside the infobox.
Use the MediaWiki template feature to construct the prototype using the documentation at mw:Help:Templates. While this provides the most flexibility, it is by far the most challenging approach (and beyond the scope of this article)

Designing

Editors generally compose infoboxes from four types of visual elements: A title, images, sections, and fields. Since these terms are not standard, we illustrate them here:

Title
Image caption
Section_A
FieldName_A1	FieldParameter_A1
FieldName_A2	FieldParameter_A2
FieldName_A3	FieldParameter_A3
Section_B
FieldName_B1	FieldParameter_B1
FieldName_B2	FieldParameter_B2

The selection and arrangement of fields is an important design decision for which the Manual of Style gives some general advice. The part of a field that varies from article to article becomes a parameter for the newly prototyped infobox and must be consistently expressed in two distinct places:

In the infobox implementation itself, to indicate where the article-specific text is to be displayed
In the infobox documentation, to indicate which article-specific information editors are to provide when using the infobox

Additionally, the editor should decide whether a field (and hence its corresponding parameter) is required or optional. The difference between the two is that a required field is always displayed; an optional field is not displayed where articles referencing the infobox omit the parameter. If the field is required, the infobox designer should consider whether a default value for the field is useful.

Implementing

Once an editor has decided upon the title, image, and arrangement of sections and fields, they are ready to map those visual elements onto the parameters of the infobox template. {{infobox}} documents how to use this template. While there are many different infobox parameters, the most frequently used are:

{{infobox
| abovestyle  =
| above       =
| image       =
| caption     =
| headerstyle =
| header1     =
| label1      =
| data1       =
| header2     =
| label2      =
| data2       =
...
| header20    =
| label20     =
| data20      =
}}

The mapping of visual elements onto infobox parameters is straightforward:

Visual element	How to implement	Parameters to implement	Notes
Colored title and section bars	`\|abovestyle = background:color;` `\|headerstyle = background:color;`	None	See http://www.w3.org/TR/CSS2/propidx.html for styles other than `background`
Title	`\|above = {{{name\|<includeonly>{{PAGENAME}}</includeonly>}}}`	`{{{name}}}`
Image	`\|image = {{#if:{{{image\|}}}\|[[File:{{{image}}}\|22em]]}}` `\|caption = {{{caption\|}}}`	`{{{image}}}`, `{{{caption}}}`	Images must be specified using the extended image syntax
Section header	`\|header_n = Fixed section name`	None
Required field with no default value	`\|label_n = Fixed field name` `\|data_n = {{{Parameter name}}}`	`{{{Parameter name}}}`	Note that parameters are enclosed in triple braces `{{{...}}}`
Optional field	`\|label_n = Fixed field name` `\|data_n = {{{Parameter name\|}}}`	`{{{Parameter name}}}`	Use \| to specify an empty string as the default (`{{{...\|}}}`)
Required field with a default value	`\|label_n = Fixed field name` `\|data_n = {{{Parameter name\|default-value}}}`	`{{{Parameter name}}}`
Field conditionally displayed	`\|label_n = Fixed field name` `\|data_n = {{#if:{{{Parameter name_{if specified}\|}}}\|{{{Parameter name_{then display this}\|}}} }}`	`{{{Parameter name_{if specified}}}}`, `{{{Parameter name_{then display this}}}}`	General form is `{{#if:test\|then-text\|else-text}}}`
Optional section header	`\|header_n = {{#if:{{{Parameter name₁\|}}}{{{Parameter name₂\|}}}{{{Parameter name₃\|}}}\|Fixed section name}}`	`{{{Parameter name₁}}}` `{{{Parameter name₂}}}` `{{{Parameter name₃}}}`	Note the concatenation of the three parameters. See mw:Help:Extension:ParserFunctions for a description of the `#if` parser function.

When making style decisions, editors should follow the Manual of Style as closely as possible. Images must be specified using the extended image syntax. When specifying styles (e.g., for abovestyle, bodystyle, and headerstyle), http://www.w3.org/TR/CSS2/propidx.html is an excellent reference.

The vast majority of editors use only the simple features of infobox in the ways described above. However, the more intrepid editor should be aware of the more esoteric features of {{infobox}}:

Displaying the title outside the infobox (as opposed to inside the infobox)
Displaying extra text below the title or at the bottom of the infobox (for "see also", footnotes, wikilink to "list of" article, etc.)
Displaying a second image
Displaying images anywhere other than the top of the infobox
Mapping individual fields onto an appropriate microformat (See also Wikipedia:WikiProject Microformats)
Displaying the "view/edit/discuss" navigation bar for the infobox

Again, these features are documented in {{infobox}}.

Documenting

The goal of documenting the newly created infobox is to allow other editors to quickly ascertain what information they need to provide when incorporating the infobox into articles. The convention is to keep documentation in a page separate from the infobox implementation and arrange for the implementation to transclude the documentation when the infobox is displayed directly, but not when the infobox is displayed in an article.

First, ensure {{Documentation}} is appended to the template, enclosed in <noinclude> elements.^{(See also below)} Ensure there are no stray spaces between the end of template (}}) and <noinclude> as these, if present, will be transcluded into every article that uses the template.

{{ infobox
...
}}<noinclude>{{documentation}}<!-- Please add category and language links to the bottom of the /doc sub-page, not here --></noinclude>

Next, create the documentation page as a subpage from the infobox template itself (e.g., Special:Mypage/Infobox mysubject/doc). The easiest way to do this is by following the [create] link from the empty {{documentation}} transclusion. This will preload a skeleton documentation page which can be filled in with basic usage, links to similar templates, interwiki links, and category links (at the bottom, in the <noinclude></noinclude> section).

Finally, organize the documentation into the following sections:

Overview
Parameters (their meanings and whether they are optional, have a default value, or are conditionally displayed)
Blank template (suitable for copy-n-pasting into articles)
Examples (e.g., to show the effects of conditionally displayed parameters)
Microformats (if used)

Categorizing

In order for other editors to find an infobox more easily, categories and interwiki links should be added to the bottom of the infobox documentation (at Special:Mypage/Infobox mysubject/doc).

Note that by convention, the infobox should be categorized using an explicit sort key that drops the infobox prefix. In other words, rather than letting the category sort key default to Wikipedia:PAGENAME (in our example, "Infobox mysubject"), editors should explicitly supply "Mysubject" as the category sort key, as in [[Category:Mycategory infobox templates|Mysubject]].

Testing

Editors should test prototyped infoboxes in their own userspaces. The simplest means is for the editor to place the fully qualified page name of the template to be tested within the template braces (e.g., {{Special:Mypage/Infobox mysubject}}) on their own user page, Special:Mypage.

Once the infobox prototype has been tested, it is ready for peer review and deployment.

A skeleton infobox

The following can be used as a starting point for a new infobox; simply copy-n-paste into the page designated to hold the new infobox and add or delete parameters as needed. Editors who want to take advantage of the more advanced features of infobox can copy-n-paste the comprehensive skeleton from {{infobox}}.

{{ infobox
| abovestyle  =
| above       =
| image       =
| caption     =
| headerstyle =
| header1     =
| label1      =
| data1       =
| header2     =
| label2      =
| data2       =
| header3     =
| label3      =
| data3       =
| header4     =
| label4      =
| data4       =
| header5     =
| label5      =
| data5       =
| header6     =
| label6      =
| data6       =
| header7     =
| label7      =
| data7       =
| header8     =
| label8      =
| data8       =
| header9     =
| label9      =
| data9       =
| header10    =
| label10     =
| data10      =
}}<noinclude>
{{Documentation}}
<!-- Please add categories and interwiki links to /doc subpage, not here! -->
</noinclude>