Community Central
Don't have an account?
Register
Register
Community Central
Community Central
35,362
pages
in: Help, Editing
English

Changes: Help:Infoboxes

Back to page
Sign in to edit
Tag: sourceedit
No edit summary
Tag: rte-source
Line 96: Line 96:
 
If both attributes are used inside the infobox tag the '''theme''' attribute is treated as the default.
  
If both attributes are used inside the infobox tag the '''theme''' attribute is treated as the default.
   
  +
<div style=margin-top:1em;></div>
−
;Theme
  
  +
====Theme====
 
For example, '''theme="delta"''' will add a class called '''portable-infobox-theme-delta''' to the infobox HTML, which can then be customized using CSS:
  
For example, '''theme="delta"''' will add a class called '''portable-infobox-theme-delta''' to the infobox HTML, which can then be customized using CSS:
   
Line 105: Line 106:
 
</syntaxhighlight>
  
</syntaxhighlight>
   
  +
<div style=margin-top:1em;></div>
−
;Theme-source
 +
====Theme-source====
 
For example, '''theme-source="location"''' means that, when '''location''' is specified in an article's infobox, it will use the ''value'' of it as the class.
  
For example, '''theme-source="location"''' means that, when '''location''' is specified in an article's infobox, it will use the ''value'' of it as the class.
   
Line 125: Line 127:
 
<syntaxhighlight lang="css">
  
<syntaxhighlight lang="css">
 
.portable-infobox-theme-africa {
  
.portable-infobox-theme-africa {
  +
//custom styles
  +
}
  +
</syntaxhighlight>
  +
  +
If you want to target specific elements within that infobox, you would do then something like this:
  +
  +
<syntaxhighlight lang="css">
  +
.portable-infobox-theme-africa .item-type-title {
 
//custom styles
  
//custom styles
 
}
  
}

Revision as of 18:49, 21 July 2015

90210-infobox-light

A sample infobox

Infoboxes are like fact sheets, or sidebars in magazine articles, designed to present a summary of the topic of the page. They present important points in an organized and quickly readable format. Infoboxes are generally made using templates, to create consistency across a community.

Wikia is currently developing a new way to code infoboxes to help them display well across devices, detailed below. For more background information on this new type of infobox code, see this thread.

A tool to aid infobox migration is currently being tested - more information about this can be found here: Help:InfoboxMigration.

How to use an infobox

You can add an infobox to an article the same way as you would any other template - either via the editor's built-in template tools, or through the editor's source mode. In the latter case, you would generally start by copying the syntax from the template's documentation (normally found towards the bottom of the template's page) and pasting it into an article, changing the words after the equals signs to provide the desired information. For example: 

{{infobox character
 | title         = Daisy
 | image         = Example.jpg
 | imagecaption  = Daisy, blowing in the wind
 | position      = Supreme flower
 | age           = 2 months
 | status        = Active
 | height        = 5 inches
 | weight        = 20 grams
}}

Creating new infoboxes

Tutorialinfobox

First, start new template with any name you like - Template:ExampleInfobox, for example. We'll begin with a basic infobox, with a title and an image: 

<infobox>
 <title source="name"><default>{{PAGENAME}}</default></title>
 <image source="image" />
</infobox>

This wikitext will tell your template to use name and image variables for title and image elements. Additionally you can provide the default tag, whose value will be used when a user does not specify a name/image/etc. on the article.

Now we just need two more fields containing additional information, so let's add one: 

<data source="season"><label>Season(s)</label></data>

After adding one last field with source set to first and label to First seen, we end up with the following: 

<infobox>
 <title source="name"><default>{{PAGENAME}}</default></title>
 <image source="image" />
 <data source="season"><label>Season(s)</label></data>
 <data source="first"><label>First seen</label></data>
</infobox>

We can now use the template in an article and get a working infobox: 

{{ExampleInfobox
 |name   = Eddard Stark
 |image  = eddard.jpg
 |season = [[Season 1|1]]
 |first  = "[[Winter is Coming]]"
}}

Styling and display

Infoboxes using this kind of code are automatically styled, using your community's theme. If any of the variables are empty, the relevant row of the template will not be displayed (unless the 'default' tag has been used).

Layout options

Two alternative layout options are available for infoboxes:

  • default layout - <data> tag labels displayed above the value
<infobox>
   ...
</infobox>
  • tabular layout - <data> tag labels displayed on the left side of the value
<infobox layout="tabular">
   ...
</infobox>

Custom theming

Default infobox theming can be overwritten using either theme or theme-source attributes of the infobox tag, allowing infoboxes to be styled via local community CSS.

  • The theme attribute is used a specify a custom CSS class for the infobox.
  • The theme-source attribute allows you to vary the CSS class via a template parameter.

If both attributes are used inside the infobox tag the theme attribute is treated as the default.

Theme

For example, theme="delta" will add a class called portable-infobox-theme-delta to the infobox HTML, which can then be customized using CSS: 

.portable-infobox-theme-delta {
   //custom styles
}

Theme-source

For example, theme-source="location" means that, when location is specified in an article's infobox, it will use the value of it as the class.

For example: 

<infobox theme-source="location">
   ...
</infobox>

{{an infobox
 |location = Africa
}}

The CSS to theme the template will thus be: 

.portable-infobox-theme-africa {
   //custom styles
}

If you want to target specific elements within that infobox, you would do then something like this: 

.portable-infobox-theme-africa .item-type-title {
   //custom styles
}

Advanced usage

Advancedinfobox

Now, that you have created a simple infobox, you can learn how to use more advanced fields. In this section we are going to build the infobox shown on the right.

Multiple ordering options for simple tags

There are three data fields, then title and image fields. As you can see, the title field does not have to be the first field, though you can only use it once per infobox. 

<infobox>
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
</infobox>

Grouping information inside the group tags

The next field will let you put a number of fields into group, each of which can be given a header. Remember: fields that are declared but don't have a value won't appear. This rule also applies to groups - if none of the fields (excluding the header tag) inside any particular group have a value, the whole group won't show up. 

<infobox>
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
 <group>
  <header>Details</header>
  <data source="conflict"><label>Conflict</label></data>
  <data source="date"><label>Date</label></data>
  <data source="place"><label>Place</label></data>
  <data source="result"><label>Outcome</label></data>
 </group>
</infobox>
Screen Shot 2015-06-16 at 13.27

Horizontal Group

Alternative layout for group tags

Group tags can have an alternative horizontal layout where all the content is displayed next to each other in single horizontal line. This can be achieved by adding layout="horizontal" attribute to the group tag. 

<group layout="horizontal">
   ...
</group>

Force all group elements to be displayed

Using show="incomplete", you can force all group elements to be displayed, even when empty - unless all are empty, then the group is not rendered at all. 

<group layout="horizontal" show="incomplete">
 <header>Combatants</header>
 <data source="side1" />
 <data source="side2" />
</group>

Now adding all this together, we come to the final template code: 

<infobox>
 <data source="prev"><label>Previous</label></data>
 <data source="conc"><label>Concurrent</label></data>
 <data source="next"><label>Next</label></data>
 <title source="name" />
 <image source="image" />
 <group>
  <header>Details</header>
  <data source="conflict"><label>Conflict</label></data>
  <data source="date"><label>Date</label></data>
  <data source="place"><label>Place</label></data>
  <data source="result"><label>Outcome</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Combatants</header>
  <data source="side1" />
  <data source="side2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Commanders</header>
  <data source="commanders1" />
  <data source="commanders2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Strength</header>
  <data source="forces1" />
  <data source="forces2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Casualties</header>
  <data source="casual1" />
  <data source="casual2" />
 </group>
 <data source="civilian"><label>Civilian casualties</label></data>
</infobox>

Now we can use it in an article, and the work is done: 

{{Battle
 |prev        = [[Battle of Fair Isle]]
 |conc        = [[Siege of Old Wyk]]
 |next        = [[Siege of Pyke]]
 |name        = [[Siege of Great Wyk]]
 |image       = Stannis Great Wyk.png
 |conflict    = [[Greyjoy Rebellion]]
 |date        = 289 AL
 |place       = [[Great Wyk]], the [[the Iron Islands]]
 |result      = [[Iron Throne]] victory
 |side1       = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[House Greyjoy]]
 |side2       = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
 |commanders1 = Unknown
 |commanders2 = Lord [[Stannis Baratheon]]
 |casual1     = Unknown
 |casual2     = Unknown
}}

Field formatting

If you want to prepend or append some additional information to your data - like adding some icons, categories - or to process the passed values, the field formatting allows you to do that.

  • When the tag format is specified for node, the variable provided in source= is then formatted/modified as specified inside the format tag.
  • If the variable provided in source= is empty, the node renders values provided in default tags (or doesn't render if default tags are not specified).

A few sample use cases:

  • Extra text - ${{{price}}}
  • Links - [[{{{Harry Potter}}}]]
  • Categories - [[Category:{{{car type}}}]]

Here, we add an icon: 

<data source="price">
 <label>Price</label>
 <format>{{{price}}} {{money_icon}}</format>
</data>

The effect shown to the right can be achieved with the following syntax:

Field mutators

Fields with formatting

<header>Price to buy</header>
<data source="buyh">
 <label>Price with Haggling</label>
 <format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="buy">
 <label>Undiscounted price</label>
 <format>{{{buy}}} {{oren2}}</format>
</data>
<data source="sell">
 <label>Price to sell</label>
 <format>{{{sell}}} {{oren2}}</format>
</data>
<data source="weight">
 <label>Weight</label>
 <format>{{{weight}}} {{weight}}</format>
</data>

Available tags

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

Tag Attributes Child tags Description
infobox theme, theme-source, layout title, image, header, navigation, data, group The tag which holds all others and delimits the scope of the infobox
Usage example: 
<infobox>
 <title source="title_source" />
</infobox>

HTML output: 

<aside class="portable-infobox">
 <div class="portable-infobox-item item-type-title portable-infobox-item-margins">
  <h2 class="portable-infobox-title">Title</h2>
 </div>
</aside>
data source default, label, format Standard key value tag
Usage example: 
<data source="name">
 <label>First name</label>
 <default>John</default>
</data>

HTML output: 

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
 <h3 class="portable-infobox-item-label portable-infobox-header-font">First name</h3>
 <div class="portable-infobox-item-value">John</div>
</div>
label N/A N/A Label tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.
Usage example: 
<label>First name</label>

HTML output: 

<h3 class="portable-infobox-item-label portable-infobox-header-font">First name</h3>
default N/A N/A Default tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.
Usage example: 
<default>John</default>

HTML output: 

<div class="portable-infobox-item-value">John</div>
format N/A N/A Format tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.
Usage example: 
<data source="dollars">
 <label>Regular price</label>
 <format>{{{dollars}}}$</format>
</data>

HTML output: 

<div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
 <h3 class="portable-infobox-item-label">Regular price</h3>
 <div class="portable-infobox-item-value">15$</div>
</div>
title source default, format Should be used only once per infobox, states infobox title.
Usage example: 
<title source="title_source">
 <default>{{PAGENAME}}</default>
</title>

HTML output: 

<div class="portable-infobox-item item-type-title portable-infobox-item-margins">
 <h2 class="portable-infobox-title">Page name</h2>
</div>
image source alt, caption, default Image tag, used to insert image inside infobox.
Usage example: 
<image source="img_name" />

HTML output: 

<div class="portable-infobox-item item-type-image no-margins">
 <figure>
  <a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
   <img src="Image.jpg" class="portable-infobox-image" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg">
  </a>
 </figure>
</div>
alt source default Can be used only inside image tag.
Usage example: 
<image source="image">
 <alt source="alternative_title">
 <default>Default alt text</default>
 </alt>
</image>

HTML output: 

<div class="portable-infobox-item item-type-image no-margins">
 <figure>
  <a href="/wiki/File:Image.jpg" class="image image-thumbnail" title="">
   <img src="Image.jpg" class="portable-infobox-image" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg">
  </a>
 </figure>
</div>
caption source default, format Can be used only inside image tag.
Usage example: 
<caption source="caption">
 <default>Default alt text</default>
</caption>

HTML output: 

<figcaption class="portable-infobox-item-margins portable-infobox-image-caption">Default alt text</figcaption>
group layout, show="incomplete" data, header, image Used for grouping fields, can provide header for each group. Group won't be rendered (including header) when all fields are empty.
Usage example: 
<group>
 <header>Group name</header>
 <data source="value1" />
</group>

HTML output: 

<section class="portable-infobox-item item-type-group">
 <div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
  <h2 class="portable-infobox-header portable-infobox-header-font">Group name</h2>
 </div>
 <div class="portable-infobox-item item-type-key-val portable-infobox-item-margins">
  <div class="portable-infobox-item-value">Value</div>
 </div>
</section>
header N/A N/A Header tag denotes the beginning of a section or group of tags.
Usage example: 
<header>Header Text</header>

HTML output: 

<div class="portable-infobox-item item-type-header portable-infobox-item-margins portable-infobox-header-background">
 <h2 class="portable-infobox-header portable-infobox-header-font">Header text</h2>
</div>
navigation N/A N/A Used for providing any wikitext.
Usage example: 
<navigation>[[Links]]</navigation>

HTML output: 

<navigation class="portable-infobox-navigation portable-infobox-item-margins portable-infobox-secondary-background portable-infobox-secondary-font">
 <a href="/wiki/Links" title="Links">Links</a>
</navigation>

Examples

Further help and feedback

Polski 中文
Community content is available under CC-BY-SA unless otherwise noted.