Fandom

Games Movies TV
Wikis
Start a Wiki

Prey Wiki

Watchlist Random page Recent changes

Help:Infoboxes/Tags

Create
Questions? Ask in the Community Forum.

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]. 

Basic tags

infobox

Attributes
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Child tags
  • title
  • image
  • header
  • navigation
  • data
  • group

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

Input Output 
<infobox>
	<title source="title_source" />
</infobox>
 
<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

Attributes
  • source
Child tags
  • default
  • format

States infobox title. Images used in title tags do not appear on mobile[2].

Input Output 
<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>
 
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

data

Attributes
  • source
  • span
  • layout
Child tags
  • default
  • label
  • format

Standard key value tag.

Input Output 
<data source="name">
	<label>First name</label>
	<default>John</default>
</data>
 
<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>

Output modifiers

label

Attributes None
Child tags None

Label tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

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

default

Attributes None
Child tags None

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.

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

format

Attributes None
Child tags None

Format tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Input Output 
<data source="dollars">
	<label>Regular price</label>
	<format>${{{dollars}}}</format>
</data>
 
<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 tags

image

Attributes
  • source
Child tags
  • alt
  • caption
  • default

Image tag, 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>.

Input Output 
<image source="image" />
 
<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

Attributes
  • source
Child tags
  • default

Can be used only inside image tag.

Input Output 
<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>
 
<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

Attributes
  • source
Child tags
  • default
  • format

Can be used only inside image tag.

Input Output 
<image source="image">
	<caption source="caption">
		<default>My caption</default>
	</caption>
</image>
 
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

Other tags

group

Attributes
  • layout
  • show
  • collapse
  • row-items
Child tags
  • data
  • header
  • image
  • title
  • navigation

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.

Default group

Input Output 
<group>
	<header>Group name</header>
	<data source="value1" />
</group>
 
<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 Output 
<group layout="horizontal">
	<header>Group name</header>
	<data source="value1">
		<label>Data label</label>
	</data>
</group>
 
<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 Output 
<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>
 
<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

Attributes None
Child tags None

Header tag denotes the beginning of a section or group of tags.

Input Output 
<header>Header Text</header>
Default group 
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>
Horizontal group 


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

navigation

Attributes None
Child tags None

Used for providing any wikitext.

Input Output 
<navigation>[[Link]]</navigation>
 
<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
Retrieved from "http://prey.wikia.com/wiki/Help:Infoboxes/Tags"

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.