Changes: Help:Infoboxes/Tags

Revision as of 01:02, 4 February 2018

Portable infoboxes include a wide variety of tags and options that you can use to make the infobox display how you want. Below we have listed all the standard tags, with sample wikitext and output HTML, to help you identify what you need to use, and how to give it a CSS makeover (see also Help:Infoboxes/CSS). Note that parser functions can also be used.

All infobox fields should be declared using XML convention, with attributes used for field configuration^[1].

`<infobox>`

Valid tags
Parents	None
Children	`title` `image` `header` `navigation` `data` `group`

The <infobox> tag holds all others and delimits the scope of the infobox.

Attributes

theme: The name of the theme to apply. Converted to the form .pi-theme-$1, with spaces transformed into hyphens (-). Does not overwrite theme-source.
theme-source: The name of the parameter to use as a theme. Does not overwrite theme.
layout: Possible values: default, stacked.
accent-color-source: The name of the parameter to use as an accent color.
accent-color-text-source: The name of the parameter to use as a text accent color.
accent-color-default: The default accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.
accent-color-text-default: The default text accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.

HTML output

Input

<infobox>
	<title source="title_source" />
</infobox>

Output

<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">Title</h2>
</aside>

`<title>`

Valid tags
Parents	`infobox` `group`
Children	`default` `format`

The <title> tag states infobox title. Images used in title tags do not appear on mobile^[2].

Attributes

source: The name of the parameter to use.

HTML output

Input

<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>

Output

<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

`<data>`

Valid tags
Parents	`infobox` `group`
Children	`default` `label` `format`

The <data> tag is the standard key value tag.

Attributes

source: The name of the parameter to use.
span: The number of columns to span. Only available in smart groups.
layout: Possible values: default. Only available in smart groups.

HTML output

Input

<data source="name">
	<label>First name</label>
	<default>John</default>
</data>

Output

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">First name</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

`<label>`

Valid tags
Parents	`data`
Children	None

The <label> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Attributes

None.

HTML output

Input

<label>First name</label>

Output

<h3 class="pi-secondary-font pi-data-label">First name</h3>

`<default>`

Valid tags
Parents	`title` `data` `image` `alt` `caption`
Children	None

The <default> tag text is used when "source" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Attributes

None.

HTML output

Input

<default>John</default>

Output

<div class="pi-font pi-data-value">John</div>

`<format>`

Valid tags
Parents	`title` `data` `caption`
Children	None

The <format> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Attributes

None.

HTML output

Input

<data source="dollars">
	<label>Regular price</label>
	<format>${{{dollars}}}</format>
</data>

Output

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Regular price</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

`<image>`

Valid tags
Parents	`infobox` `group`
Children	`alt` `caption` `default`

The <image> tag is used to insert images or video inside an infobox. It can only be styled using the community's CSS, and cannot be manually resized. Multiple images can be passed by using a gallery tag.

Here, the default tag is used to specify an image to be used when no image has been chosen on an article. For example, <default>Example.jpg</default>.

Attributes

source: The name of the parameter to use.

HTML output

Input

<image source="image" />

Output

<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

`<alt>`

Valid tags
Parents	`image`
Children	`default`

The <alt> tag can be used only inside image tag.

Attributes

source: The name of the parameter to use.

HTML output

Input

<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>

Output

<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

`<caption>`

Valid tags
Parents	`image`
Children	`default` `format`

The <caption> tag can be used only inside image tag.

Attributes

source: The name of the parameter to use.

HTML output

Input

<image source="image">
	<caption source="caption">
		<default>My caption</default>
	</caption>
</image>

Output

<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

`<group>`

Valid tags
Parents	`infobox` `group`
Children	`data` `header` `image` `title` `group` `navigation`

The <data> tag is used for grouping fields, can provide header for each group. A group won't be rendered (including any headers) if all fields are empty. However, if the show attribute is set to incomplete, it will render all of the group's fields if at least one field is not empty.

Attributes

layout: Possible values: default, horizontal.
show: Possible values: default, incomplete.
collapse: Possible values: open, closed.
row-items: Turns the group into a smart group spanning n columns. Smart groups arrange their cells (<data> tags) horizontally, and automatically wrap to a new row once the current one exceeds that limit. Cells are stretched to take up as much space as possible on the last row.

HTML output

Default group

Input

<group>
	<header>Group name</header>
	<data source="value1" />
</group>

Output

<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Data value</div>
	</div>
</section>

Horizontal group

Input

<group layout="horizontal">
	<header>Group name</header>
	<data source="value1">
		<label>Data label</label>
	</data>
</group>

Output

<section class="pi-item pi-group pi-border-color">
	<table class="pi-horizontal-group">
		<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
			</tr>
		</tbody>
	</table>
</section>

Smart group

Input

<group row-items="3">
	<header>Section Header</header>
	<data source="row3">
		<label>Label</label>
	</data>
	<data source="row4">
		<label>Label</label>
	</data>
	<data source="row5">
		<label>Label</label>
	</data>
	<data source="row6">
		<label>Label</label>
	</data>
	<data source="row7">
		<label>Label</label>
	</data>
	<data source="row8" layout="default">
		<label>Label</label>
	</data>
	<data source="row9" layout="default">
		<label>Label</label>
	</data>
</group>

Output

<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</h2>
	<section class="pi-item pi-smart-group pi-border-color">
		<section class="pi-smart-group-head">
			<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
			<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
			<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
		</section>
		<section class="pi-smart-group-body">
			<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div>
			<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div>
			<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div>
		</section>
	</section>
	<section class="pi-item pi-smart-group pi-border-color">
		<section class="pi-smart-group-head">
			<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
			<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
		</section>
		<section class="pi-smart-group-body">
			<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div>
			<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
		</section>
	</section>
	<div class="pi-item pi-data pi-item-spacing pi-border-color">
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
		<div class="pi-data-value pi-font">HHH</div>
	</div>
	<div class="pi-item pi-data pi-item-spacing pi-border-color">
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
		<div class="pi-data-value pi-font">III</div>
	</div>
</section>

`<header>`

Valid tags
Parents	`infobox` `group`
Children	None

The <header> tag denotes the beginning of a section or group of tags.

Attributes

None.

HTML output

Input

<header>Header Text</header>

Default group output

<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>

Horizontal group output

<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption>

`<navigation>`

Valid tags
Parents	`infobox` `group`
Children	None

The <navigation> tag is used for providing any wikitext.

Attributes

None.

HTML output

Input

<navigation>[[Link]]</navigation>

Output

<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Link" title="Link">Link</a>
</nav>

References

[1] Wikibooks xml introduction

[2] Portability Hub Office Hours, 2015-11-26

[1]

[2]

@@ Line 5: / Line 5: @@
 ==<code><nowiki><infobox></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+| None
+|-
+!scope="row" style="width: 6em;"| Children
 |
 * <code>title</code>
@@ Line 52: / Line 56: @@
 ==<code><nowiki><title></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
+|-
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Children
 |
 * <code>default</code>
@@ Line 81: / Line 91: @@
 ==<code><nowiki><data></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
+|-
+!scope="row" style="width: 6em;"| Children
 |
 * <code>default</code>
@@ Line 119: / Line 135: @@
 ==<code><nowiki><label></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
+|-
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>data</code>
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Children
 | None
 |}
@@ Line 143: / Line 164: @@
 ==<code><nowiki><default></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>title</code>
+* <code>data</code>
+* <code>image</code>
+* <code>alt</code>
+* <code>caption</code>
+|-
+!scope="row" style="width: 6em;"| Children
 | None
 |}
-The <code><nowiki><default></nowiki></code> tag text is used when "source" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
+The <code><nowiki><default></nowiki></code> tag text is used when "source" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
 ===Attributes===
@@ Line 167: / Line 197: @@
 ==<code><nowiki><format></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
+|-
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>title</code>
+* <code>data</code>
+* <code>caption</code>
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Children
 | None
 |}
@@ Line 197: / Line 234: @@
 ==<code><nowiki><image></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
+|-
+!scope="row" style="width: 6em;"| Children
 |
 * <code>alt</code>
@@ Line 231: / Line 274: @@
 ==<code><nowiki><alt></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
+|-
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>image</code>
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Children
 |
 * <code>default</code>
@@ Line 265: / Line 313: @@
 ==<code><nowiki><caption></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>image</code>
+|-
+!scope="row" style="width: 6em;"| Children
 |
 * <code>default</code>
@@ Line 296: / Line 349: @@
 ==<code><nowiki><group></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
+|-
+!scope="row" style="width: 6em;"| Children
 |
 * <code>data</code>
@@ Line 440: / Line 499: @@
 ==<code><nowiki><header></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
+|-
+!scope="row" style="width: 6em;"| Children
 | None
 |}
@@ Line 468: / Line 533: @@
 ==<code><nowiki><navigation></nowiki></code>==
 {|class="article-table" style="float: right; margin-left: 1em; margin-top: 0; width: 25em;"
+|+ Valid tags
+|-
+!scope="row" style="width: 6em;"| Parents
+|
+* <code>infobox</code>
+* <code>group</code>
 |-
-!scope="row" style="width: 5em;"| Child tags
+!scope="row" style="width: 6em;"| Children
 | None
 |}