Help:Designing infoboxes

For an introduction to and general help with infoboxes, see Help:Infobox.

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 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. For example, to create an infobox prototype called Infobox mysubject, a designing editor should simply start a standalone article from his or her user page: Special:Mypage/Infobox mysubject. 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:

1. 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.
2. 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.
3. 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 is 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
200px Image caption
SectionA
FieldNameA1	FieldParameterA1
FieldNameA2	FieldParameterA2
FieldNameA3	FieldParameterA3
SectionB
FieldNameB1	FieldParameterB1
FieldNameB2	FieldParameterB2

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:

1. In the infobox implementation itself, to indicate where the article-specific text is to be displayed
2. 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, he or she is 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	|headern = Fixed section name	None
Required field with no default value	|labeln = Fixed field name |datan = {{{Parameter name}}}	{{{Parameter name}}}	Note that parameters are enclosed in triple braces {{{...}}}
Optional field	|labeln = Fixed field name |datan = {{{Parameter name|}}}	{{{Parameter name}}}	Use | to specify an empty string as the default ({{{...|}}})
Required field with a default value	|labeln = Fixed field name |datan = {{{Parameter name|default-value}}}	{{{Parameter name}}}
Field conditionally displayed	|labeln = Fixed field name |datan = {{#if:{{{Parameter nameif specified|}}}|{{{Parameter namethen display this|}}} }}	{{{Parameter nameif specified}}}, {{{Parameter namethen display this}}}	General form is {{#if:test<I>|<I>then-text|else-text}}}
Optional section header	|headern = {{#if:{{{Parameter name1|}}}{{{Parameter name2|}}}{{{Parameter name3|}}}|Fixed section name}}	{{{Parameter name1}}} {{{Parameter name2}}} {{{Parameter name3}}}	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 his or her 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>

Example {{infobox}}-based infoboxes

• {{infobox cheese}}
• {{Infobox company}}
• {{infobox Ecumenical council}}
• {{infobox fictional race}}
• {{infobox handball league}}
• {{infobox holiday}}
• {{infobox storage medium}}

See also

• Wikipedia:Disinfoboxes
• Wikipedia:How to read a color infobox
• Wikipedia:How to read a taxobox
• Wikipedia:Thinking outside the infobox