View source for Help:Designing infoboxes

{{WikiProject Infoboxes sidebar}}
{{For|an introduction to and general help with infoboxes|Help:Infobox}}
You are well-advised to seek the opinions of other editors before embarking on a '''design of a new [[Help:Infobox|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 [[Wikipedia:WikiProject|WikiProject]] and gain [[Wikipedia:Consensus|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|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 [[Wikipedia:WikiProject|WikiProject]]s 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 [[Wikipedia:User page|user space]].  For example, to create an infobox prototype called <code>Infobox mysubject</code>, 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:

#Use {{tl|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 [[Help:Table|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 [[m:Help:Template|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:

{| class="wikitable"
! colspan="2" style="background:lightblue;width:200px;font-size:10pt" | Title
|-
| colspan="2" style="text-align:center;font-size:7pt" | [[File:Tlaloc, Codex Rios, p.20r.JPG|noframe|200px]]<br />Image caption
|-
| colspan="2" style="background:lightblue;text-align:center;font-size:9pt" | Section<sub>A</sub>
|-
| style="font-size:9pt" | FieldName<sub>A1</sub> || style="font-size:9pt" | FieldParameter<sub>A1</sub>
|-
| style="font-size:9pt" | FieldName<sub>A2</sub> || style="font-size:9pt" | FieldParameter<sub>A2</sub>
|-
| style="font-size:9pt" | FieldName<sub>A3</sub> || style="font-size:9pt" | FieldParameter<sub>A3</sub>
|-
| colspan="2" style="background:lightblue;text-align:center;font-size:9pt" | Section<sub>B</sub>
|-
| style="font-size:9pt" | FieldName<sub>B1</sub> || style="font-size:9pt" | FieldParameter<sub>B1</sub>
|-
| style="font-size:9pt" | FieldName<sub>B2</sub> || style="font-size:9pt" | FieldParameter<sub>B2</sub>
|}

The selection and arrangement of fields is an important design decision for which the [[Wikipedia:Manual of Style/Infoboxes|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, he or she is ready to map those visual elements onto the parameters of the infobox template.  {{tl|infobox}} documents how to use this template.  While there are many different infobox parameters, the most frequently used are:

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

The mapping of visual elements onto infobox parameters is straightforward:
{| class="wikitable"
! Visual element !! How to implement !! Parameters to implement !! Notes
|-
| Colored title and section bars || <code><nowiki>|abovestyle = </nowiki>background:<I>[[Web colors|color]]</I>;</code><br /><code><nowiki>|headerstyle = </nowiki>background:<I>[[Web colors|color]]</I>;</code> || None || See http://www.w3.org/TR/CSS2/propidx.html for styles other than <code>background</code>
|-
| Title || <code><nowiki>|above = {{{name|<includeonly>{{PAGENAME}}</includeonly>}}}</nowiki></code> || <code><nowiki>{{{name}}}</nowiki></code> ||
|-
| Image || <code><nowiki>|image = {{#if:{{{image|}}}|[[File:{{{image}}}|22</nowiki>[[Em (typography)|em]]<nowiki>]]}}</nowiki></code><br /><code><nowiki>|caption = {{{caption|}}}</nowiki></code> || <code><nowiki>{{{image}}}</nowiki></code>, <code><nowiki>{{{caption}}}</nowiki></code> || Images must be specified using the [[Wikipedia:Extended image syntax|extended image syntax]]
|-
| Section header || <code><nowiki>|header</nowiki><sub>n</sub> = <I>Fixed section name</I></code> || None ||
|-
| Required field with no default value || <code><nowiki>|label</nowiki><sub>n</sub> = <I>Fixed field name</I></code><br /><code><nowiki>|data</nowiki><sub>n</sub> = <nowiki>{{{</nowiki><I>Parameter name</I><nowiki>}}}</nowiki></code> || <code><nowiki>{{{</nowiki><I>Parameter name</I><nowiki>}}}</nowiki></code> || Note that parameters are enclosed in triple braces <code><nowiki>{{{...}}}</nowiki></code>
|-
| Optional field || <code><nowiki>|label</nowiki><sub>n</sub> = <I>Fixed field name</I></code><br /><code><nowiki>|data</nowiki><sub>n</sub> = <nowiki>{{{</nowiki><I>Parameter name</I><nowiki>|}}}</nowiki></code> || <code><nowiki>{{{</nowiki><I>Parameter name</I><nowiki>}}}</nowiki></code> || Use &#124; to specify an empty string as the default (<code><nowiki>{{{...|}}}</nowiki></code>)
|-
| Required field with a default value || <code><nowiki>|label</nowiki><sub>n</sub> = <I>Fixed field name</I></code><br /><code><nowiki>|data</nowiki><sub>n</sub> = <nowiki>{{{</nowiki><I>Parameter name</I><nowiki>|</nowiki><I>default-value</I><nowiki>}}}</nowiki></code> || <code><nowiki>{{{</nowiki><I>Parameter name</I><nowiki>}}}</nowiki></code> ||
|-
| Field conditionally displayed || <code><nowiki>|label</nowiki><sub>n</sub> = <I>Fixed field name</I></code><br /><code><nowiki>|data</nowiki><sub>n</sub> = <nowiki>{{#if:{{{</nowiki><I>Parameter name<sub>if specified</sub></I><nowiki>|}}}|{{{</nowiki><I>Parameter name<sub>then display this</sub></I><nowiki>|}}} }}</nowiki></code> || <code><nowiki>{{{</nowiki><I>Parameter name<sub>if specified</sub></I><nowiki>}}}</nowiki></code>,<br /><code><nowiki>{{{</nowiki><I>Parameter name<sub>then display this</sub></I><nowiki>}}}</nowiki></code> || General form is <code><nowiki>{{#if:</nowiki><I>test<I><nowiki>|</nowiki><I>then-text</I><nowiki>|</nowiki><I>else-text</I><nowiki>}}}</nowiki></code>
|-
| Optional section header || <code><nowiki>|header</nowiki><sub>n</sub> = <nowiki>{{#if:{{{</nowiki><I>Parameter name<sub>1</sub></I><nowiki>|}}}{{{</nowiki><I>Parameter name<sub>2</sub></I><nowiki>|}}}{{{</nowiki><I>Parameter name<sub>3</sub></I><nowiki>|}}}|</nowiki><I>Fixed section name</I><nowiki>}}</nowiki></code> || <code><nowiki>{{{</nowiki><I>Parameter name<SUB>1</SUB></I><nowiki>}}}</nowiki></code><br/><code><nowiki>{{{</nowiki><I>Parameter name<SUB>2</SUB></I><nowiki>}}}</nowiki></code><br/><code><nowiki>{{{</nowiki><I>Parameter name<SUB>3</SUB></I><nowiki>}}}</nowiki></code><br/>|| Note the concatenation of the three parameters.<P>See [[mw:Help:Extension:ParserFunctions]] for a description of the <CODE><NOWIKI>#if</NOWIKI></CODE> parser function.
|}

When making style decisions, editors should follow the [[Wikipedia:Manual of Style/Infoboxes|Manual of Style]] as closely as possible.  Images must be specified using the [[Wikipedia:Extended image syntax|extended image syntax]].  When specifying styles (e.g., for <code>abovestyle</code>, <code>bodystyle</code>, and <code>headerstyle</code>), 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 {{tl|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 {{tl|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 {{tl|Documentation}} is appended to the template, enclosed in <code><nowiki><noinclude></nowiki></code> elements.<SUP>(See also [[#A skeleton infobox|below]])</SUP>  Ensure there are no stray spaces between the end of template (<code>}}</code>) and <code><nowiki><noinclude></nowiki></code> as these, if present, will be transcluded into every article that uses the template.

<pre style="overflow:auto">
{{ infobox
...
}}<noinclude>{{documentation}}<!-- Please add category and language links to the bottom of the /doc sub-page, not here --></noinclude>
</pre>

* 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 <code>[create]</code> link from the empty {{tl|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 <code><nowiki><noinclude></noinclude></nowiki></code> 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)
:* [[Microformat]]s (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 [[Help:Category#Sort order|sort key]] that drops the infobox prefix.  In other words, rather than letting the category sort key default to [[Wikipedia:PAGENAME]] (in our example, "<code>Infobox mysubject</code>"), editors should explicitly supply "<code>Mysubject</code>" as the category sort key, as in <code><nowiki>[[Category:Mycategory infobox templates|Mysubject]]</nowiki></code>.

===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., <code><nowiki>{{Special:Mypage/Infobox mysubject}}</nowiki></code>) 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 {{tl|infobox}}.

<pre>
{{ 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>
</pre>

===Example {{tl|infobox}}-based infoboxes===
* {{tl|infobox cheese}}
* {{tl|Infobox company}}
* {{tl|infobox Ecumenical council}}
* {{tl|infobox fictional race}}
* {{tl|infobox handball league}}
* {{tl|infobox holiday}}
* {{tl|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]]

[[Category:Wikipedia editor help]]
[[Category:Infobox templates| ]]