Community Central
Register
Community Central
m (→‎Further help and feedback: Removing interlanguage link)
No edit summary
(33 intermediate revisions by 21 users not shown)
Line 1: Line 1:
  +
{{Extension infobox
{{Uni-vid|Fandom University - Using_Infobox_Templates}}
 
  +
| name = PortableInfobox
[[File:90210-infobox-light.png|thumb|250px|A sample infobox]]
 
  +
| image = 90210-infobox-light.png
  +
| caption = A sample infobox
  +
| author = Fandom, Inc.
  +
| link =
  +
*[https://github.com/Wikia/unified-platform/tree/master/extensions/fandom/PortableInfobox GitHub]
  +
*[[mw:Extension:PortableInfobox|Mediawiki.org]]
  +
| desc = <p>{{int:portable-infobox-desc}}</p>
  +
| default = yes
 
}}
  +
{{Extension infobox
  +
| name = Europa Infobox Theme
  +
| author = Fandom, Inc.
  +
| link =
  +
| desc = <p>{{int:Wikifeatures-feature-description-wgEnablePortableInfoboxEuropaTheme}}</p>
  +
| default = yes
  +
| feature = yes
 
}}
   
 
'''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 [[Help:Templates|templates]], to create consistency across a community.
 
'''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 [[Help:Templates|templates]], to create consistency across a community.
   
FANDOM has developed a new way to code infoboxes, called '''portable infoboxes''' to enable them to display well across different devices, which this page details. There are no changes to how you use an infobox on an article — instead, the changes affect how it is written on a template page. FANDOM considers use of Portable Infoboxes to be standard for their communities, and safe and stable for common practical use.
+
Fandom has developed a consistent way to code infoboxes, called '''Portable Infoboxes''', to enable them to display well across different devices, which this page details. There are no changes to how you use an infobox on an article — instead, the changes affect how it is written on a template page. Fandom considers use of Portable Infoboxes to be standard for their communities, and safe and stable for common practical use.
   
A tool to help with the migration of existing infoboxes has also been created. More information about this can be found on [[Help:Infobox migration]].
+
A tool to help with the migration of existing infoboxes has also been created. More information about this can be found on [[Help:Infobox migration]], and a full step-by-step walkthrough can be found at [[Help:Infobox migration/Walkthrough]].
   
 
;Useful links
 
;Useful links
:
 
 
* For a basic intro to the visual infobox editor, see '''[[Help:Infoboxes/editing]]'''
 
* For a basic intro to the visual infobox editor, see '''[[Help:Infoboxes/editing]]'''
* For a detailed list of all the standard options available for portable infoboxes, including samples of wikitext to use and their HTML output, see '''[[Help:Infoboxes/Tags]]'''
+
* For a detailed list of all the standard options available for Portable Infoboxes, including samples of wikitext to use and their HTML output, see '''[[Help:Infoboxes/Tags]]'''
 
* For detailed information about how to use CSS to theme an infobox, including detailed guides, see '''[[Help:Infoboxes/CSS]]'''
 
* For detailed information about how to use CSS to theme an infobox, including detailed guides, see '''[[Help:Infoboxes/CSS]]'''
* For instructions on how to migrate from a [[Help:Classic infoboxes|'classic' infobox]] to a portable infobox, see '''[[Help:Infobox migration]]'''
+
* For step-by-step instructions on how to migrate from a [[Help:Classic infoboxes|'classic' infobox]] to a portable infobox, see '''[[Help:Infobox migration/Walkthrough]]'''
 
* '''[[w:c:p:Infoboxes|Portability Hub]]''': Guides, examples, and personal mentoring for migrating, customizing, and theming your infoboxes
 
* '''[[w:c:p:Infoboxes|Portability Hub]]''': Guides, examples, and personal mentoring for migrating, customizing, and theming your infoboxes
 
__TOC__
 
   
 
== How to add an infobox to an article ==
 
== How to add an infobox to an article ==
[[File:VE-portableinfobox.png|thumb|150px|Inserting portable infoboxes in the VisualEditor]]
+
[[File:VE-portableinfobox.png|thumb|150px|Inserting Portable Infoboxes in the VisualEditor]]
You can add an infobox to an article the same way as you would any other template, either via the [[Help:Editing|editor's]] built-in tools, or through the editor's source mode. In the [[Help:VisualEditor|VisualEditor]], portable infoboxes can quickly be inserted via the Infobox option on the 'Insert' dropdown.
+
You can add an infobox to an article the same way as you would any other template, either via the [[Help:Editing|editor's]] built-in tools, or through the editor's source mode. In the [[Help:VisualEditor|VisualEditor]], Portable Infoboxes can quickly be inserted via the Infobox option on the 'Insert' dropdown.
   
 
Meanwhile, in source mode, 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:
 
Meanwhile, in source mode, 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:
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
{{infobox character
 
{{infobox character
 
| title = Daisy
 
| title = Daisy
Line 37: Line 51:
 
</syntaxhighlight>
 
</syntaxhighlight>
   
With portable infoboxes, this works just the same as with any other template. However, the template page markup is a little different, as detailed below.
+
With Portable Infoboxes, this works similar as with any other template. The template page markup is a little different, as detailed below.
   
 
== How to create an infobox ==
 
== How to create an infobox ==
[[File:Tutorialinfobox.png|thumb|180px|''Winter is coming...'']]
+
[[File:Tutorialinfobox.png|thumb|180px]]
First, start a new template with any name you like. To do this, create a new page with the title "Template:[name of your choice]" (e.g. Template:Example). While in the past you may have used tables and divs, we now use infobox tags. We'll begin with a basic 'stacked' infobox, with a title and an image:
+
First, start a new template with any name you like. To do this, create a new page with the title "Template:[name of your choice]" (e.g. Template:Example). While in the past you may have used tables and divs, we now use infobox tags. We'll begin with a basic 'stacked' infobox, with a title and an image:
  +
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
 
 
<syntaxhighlight lang="xml" style="display:flex;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
<title source="name"><default>{{PAGENAME}}</default></title>
+
<title source="name">
  +
<default>{{PAGENAME}}</default>
  +
</title>
 
<image source="image" />
 
<image source="image" />
 
</infobox>
 
</infobox>
Line 52: Line 69:
   
 
Now we just need two more fields containing additional information, so let's add one:
 
Now we just need two more fields containing additional information, so let's add one:
  +
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
 
 
<syntaxhighlight lang="xml" style="display:flex;">
 
<data source="season"><label>Season(s)</label></data>
 
<data source="season"><label>Season(s)</label></data>
 
</syntaxhighlight>
 
</syntaxhighlight>
Line 58: Line 76:
 
After adding one last field with source set to ''first'' and label to ''First seen'', we end up with the following:
 
After adding one last field with source set to ''first'' and label to ''First seen'', we end up with the following:
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
 
<title source="name"><default>{{PAGENAME}}</default></title>
 
<title source="name"><default>{{PAGENAME}}</default></title>
Line 69: Line 87:
 
We can now use the template in an article, inserting the following parameters to get a working infobox:
 
We can now use the template in an article, inserting the following parameters to get a working infobox:
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
{{Example
 
{{Example
 
|name = Eddard Stark
 
|name = Eddard Stark
Line 79: Line 97:
   
 
=== Hiding values ===
 
=== Hiding values ===
Any field or element without a value will automatically be hidden. This applies to all tags with the exception of groups that are forcibly shown (see [[#Force all group elements to be displayed]]). When all elements are empty the infobox itself will not appear.
+
Any field or element without a value will automatically be hidden. This applies to all tags with the exception of groups that are forcibly shown (see [[#Force all group elements to be displayed]]). When all elements are empty the infobox itself will not appear. Inside an image tag, images that do not exist will not show a "redlink", but the file page <em>will</em> appear in Special:Wantedfiles.
   
 
== How to alter the infobox layout ==
 
== How to alter the infobox layout ==
Line 94: Line 112:
 
| Labels are displayed to the left of the values
 
| Labels are displayed to the left of the values
 
|-
 
|-
 
|<syntaxhighlight lang="xml" style="white-space: normal !important">
|
 
<syntaxhighlight lang="xml" style="white-space: normal !important">
 
 
<infobox>
 
<infobox>
 
...
 
...
Line 110: Line 127:
 
| Labels are displayed above the values
 
| Labels are displayed above the values
 
|-
 
|-
 
|<syntaxhighlight lang="xml" style="white-space: normal !important">
|
 
<syntaxhighlight lang="xml" style="white-space: normal !important">
 
 
<infobox layout="stacked">
 
<infobox layout="stacked">
 
...
 
...
Line 123: Line 139:
   
 
=== Custom theming ===
 
=== Custom theming ===
 
The default infobox theming can be overridden in two ways. There is a variable on your community's [[Help:WikiFeatures|WikiFeatures]] page entitled Europa Infobox Theme. When you enable it, your infoboxes will pull the colors you chose for your Wiki Navigation in ThemeDesigner.
   
 
Your other option is to use [[Help:Community CSS and JS#CSS|local community CSS]]. Using the '''type''', '''theme''', or '''theme-source''' attributes on the '''infobox''' tag will make it easy to target specific infobox templates using classes.
{{Uni-vid|Fandom University - Customizing_Infobox_Templates}}
 
 
The default infobox theming can be overridden in two ways. There is a variable on your community's Special:WikiFeatures page entitled Europa Infobox Theme. When you enable it, your infoboxes will pull the colors you chose for your Wiki Navigation.
 
 
Your other option is to use [[Help:Community CSS and JS#CSS|local community CSS]]. Using the '''theme''' or '''theme-source''' attributes on the '''infobox''' tag will make it easy to target specific infobox templates using classes.
 
   
  +
* The '''type''' attribute is used to define an infobox's logical type.
 
* The '''theme''' attribute is used to specify a custom CSS class for the infobox template.
 
* The '''theme''' attribute is used to specify a custom CSS class for the infobox template.
 
* The '''theme-source''' attribute allows you to vary the CSS class via a template parameter.
 
* The '''theme-source''' attribute allows you to vary the CSS class via a template parameter.
Line 143: Line 157:
   
 
This also includes a parameter for default color, so using '''accent-color-default="#FFF"''' sets the color for all titles and headers backgrounds, and '''accent-color-text-default="#000000"''' works in a similar manner by setting the default text color using hex formats.
 
This also includes a parameter for default color, so using '''accent-color-default="#FFF"''' sets the color for all titles and headers backgrounds, and '''accent-color-text-default="#000000"''' works in a similar manner by setting the default text color using hex formats.
  +
  +
=== Per-item styling ===
  +
Individual items in an infobox may include markers inside the HTML results that allow them to be indicated with CSS selectors known as data attributes.
  +
  +
* All Portable Infobox elements that have an input of <kbd>source</kbd> will now render in HTML with that parameter name in a data-attribute, such as <kbd>data-source="ATK"</kbd>. This will allow you to write CSS or jQuery selectors such as <var>.pi-item[data-source=ATK]</var> to style and identify individual items. Used in combination with <kbd>type</kbd>, this should eliminate the need for <var>nth-of-type</var> style selection and opens up other possibilities for design and interactivity.
  +
* The new name parameter allows explicit selection of elements whether they accept a source input or not, including identification of <kbd><nowiki><title></nowiki></kbd>, <kbd><nowiki><group></nowiki></kbd>, <kbd><nowiki><data></nowiki></kbd>, <kbd><nowiki><header></nowiki></kbd>, <kbd><nowiki><image></nowiki></kbd>, and <kbd><nowiki><navigation></nowiki></kbd>. Much like the <kbd>data-source</kbd> data-attribute, <kbd><nowiki><data name="bar"></nowiki></kbd> can be selected as <var>.pi-item[data-item-name=bar]</var>.
   
 
== How to use multiple images or videos ==
 
== How to use multiple images or videos ==
 
[[File:Infoboxtabs.png|thumb|150px|Tabbed images]]
 
[[File:Infoboxtabs.png|thumb|150px|Tabbed images]]
To use multiple images in one location in an infobox, you can simply pass a <code>&lt;gallery></code> tag.
+
To use multiple images in one location in an infobox, you can simply pass a <code><nowiki><gallery></nowiki></code> tag.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
{{Example
 
{{Example
 
|name = Eddard Stark
 
|name = Eddard Stark
Line 159: Line 179:
 
</syntaxhighlight>
 
</syntaxhighlight>
   
For more information about this feature, see [[homepage:w:Thread:935527|this thread]].
+
For more information about this feature, see [https://community.fandom.com/f/p/2603806407786498775 this thread].
   
 
To add a video into an infobox, simply use the <code>&lt;image></code> tag, just as you would with an image. When a video is inserted instead of an image, a thumbnail with a play icon and duration info will be shown in the infobox, and clicking on the video will pop up a video player. If you want to add multiple videos, add a new <code>&lt;image></code> tag per each video.
 
To add a video into an infobox, simply use the <code>&lt;image></code> tag, just as you would with an image. When a video is inserted instead of an image, a thumbnail with a play icon and duration info will be shown in the infobox, and clicking on the video will pop up a video player. If you want to add multiple videos, add a new <code>&lt;image></code> tag per each video.
Line 168: Line 188:
   
 
This infobox begins with three <code>&lt;data></code> fields, then single <code>&lt;title></code> and <code>&lt;image></code> fields. As you can see, the <code>&lt;title></code> field does not have to be the first field.
 
This infobox begins with three <code>&lt;data></code> fields, then single <code>&lt;title></code> and <code>&lt;image></code> fields. As you can see, the <code>&lt;title></code> field does not have to be the first field.
  +
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
 
<data source="prev"><label>Previous</label></data>
 
<data source="prev"><label>Previous</label></data>
Line 181: Line 202:
 
The <code>&lt;group></code> field will let you group fields together and give them 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 (other than the header tag) inside a group have a value, that whole group won't show up.
 
The <code>&lt;group></code> field will let you group fields together and give them 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 (other than the header tag) inside a group have a value, that whole group won't show up.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
 
<data source="prev"><label>Previous</label></data>
 
<data source="prev"><label>Previous</label></data>
Line 202: Line 223:
 
Instead of a vertical list, <code>&lt;group></code> fields can have a horizontal layout where all the content is displayed next to each other in single line. This can be achieved by adding '''layout="horizontal"''' attribute to the group tag.
 
Instead of a vertical list, <code>&lt;group></code> fields can have a horizontal layout where all the content is displayed next to each other in single line. This can be achieved by adding '''layout="horizontal"''' attribute to the group tag.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
<group layout="horizontal">
 
<group layout="horizontal">
 
...
 
...
Line 215: Line 236:
 
To make a given data field take up more than a single space, use the '''span="2"''' attribute in a <code><nowiki><data></nowiki></code> tag.
 
To make a given data field take up more than a single space, use the '''span="2"''' attribute in a <code><nowiki><data></nowiki></code> tag.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
<infobox>
 
<infobox>
 
<title source="name" />
 
<title source="name" />
Line 232: Line 253:
 
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.
 
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.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
<group layout="horizontal" show="incomplete">
 
<group layout="horizontal" show="incomplete">
 
<header>Combatants</header>
 
<header>Combatants</header>
Line 242: Line 263:
 
Now adding all this together, we come to the final template code:
 
Now adding all this together, we come to the final template code:
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
<infobox layout="stacked">
 
<infobox layout="stacked">
 
<data source="prev"><label>Previous</label></data>
 
<data source="prev"><label>Previous</label></data>
Line 282: Line 303:
 
Now we can use it in an article:
 
Now we can use it in an article:
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml">
 
{{Battle
 
{{Battle
 
|prev = [[Battle of Fair Isle]]
 
|prev = [[Battle of Fair Isle]]
Line 306: Line 327:
 
Groups can be made collapsible by adding either '''collapse="open"''' or '''collapse="closed"''' to the <code>&lt;group></code> tag. This will make the group header row clickable (to expand and collapse the group), and the group will initially start open or closed, respectively.
 
Groups can be made collapsible by adding either '''collapse="open"''' or '''collapse="closed"''' to the <code>&lt;group></code> tag. This will make the group header row clickable (to expand and collapse the group), and the group will initially start open or closed, respectively.
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
<group collapse="closed">
 
<group collapse="closed">
 
<header>Appearances</header>
 
<header>Appearances</header>
Line 315: Line 336:
   
 
Note: A header row containing content must immediately follow the group tag for this to work.
 
Note: A header row containing content must immediately follow the group tag for this to work.
  +
  +
=== Panels ===
  +
[[File:PortableInfobox-Panel-Orc.gif|right]]
  +
Data items and groups can now be structured in tabbed panels, which allow more flexibility and smarter data display on desktop and mobile views. Each <kbd>&lt;panel></kbd> — as a child of the root <kbd>&lt;infobox></kbd> element — can be labeled (with <kbd>&lt;label></kbd>) and one or more <kbd>&lt;section></kbd> elements to make a tab set. Any element that could otherwise be a child of <kbd>&lt;infobox></kbd> can be a child of <kbd>&lt;section></kbd>. This should reduce clutter and the necessity for groups of infoboxes on pages, while structuring infoboxes in more dynamic ways.
  +
  +
The <code>&lt;section></code> tag represents the contents of a tab. The clickable toggle is represented by a <code>&lt;label></code> tag. Labels default to their zero-based index if omitted; if all tabs within a panel are unlabeled, then they are contained in the infobox as if they were groups.
  +
  +
<syntaxhighlight lang="xml" style="display:flex;">
  +
<infobox>
  +
<title source="title">
  +
<default>{{PAGENAME}}</default>
  +
</title>
  +
<panel>
  +
<section>
  +
<label>5E</label>
  +
<data source="size1">
  +
<label>Size</label></data>
  +
<data source="type1">
  +
<label>Type</label></data>
  +
</section>
  +
<section>
  +
<label>4E</label>
  +
<data source="origin2">
  +
<label>Origin</label></data>
  +
<data source="type2">
  +
<label>Type</label></data>
  +
<group>
  +
<header>Details</header>
  +
<data source="input2">
  +
<label>Input</label></data>
  +
<data source="output2">
  +
<label>Output</label></data>
  +
</group>
  +
</section>
  +
</panel>
  +
</infobox>
  +
</syntaxhighlight>
   
 
== Advanced options ==
 
== Advanced options ==
Line 322: Line 380:
   
 
* When the '''format''' tag is used, the variable provided in '''source=''' is then formatted or modified as specified inside the '''format''' tag. For this purpose, the parameter has to be provided in triple braces; e.g., <code><nowiki>{{{price}}}</nowiki></code> for <code>source="price"</code>.
 
* When the '''format''' tag is used, the variable provided in '''source=''' is then formatted or modified as specified inside the '''format''' tag. For this purpose, the parameter has to be provided in triple braces; e.g., <code><nowiki>{{{price}}}</nowiki></code> for <code>source="price"</code>.
* If the variable provided in '''source=''' is empty, the node renders the value as provided in the '''default''' tag (or doesn’t render if no '''default''' tag is specified). The contents of '''default''' is never available to parser functions; e.g., parameter <code><nowiki>{{{price}}}</nowiki></code> would remain empty. It can be thought of as meaning ‘default format’, not ‘default value’.
+
* If the variable provided in '''source=''' is empty, the node renders the value as provided in the '''default''' tag (or doesn’t render if no '''default''' tag is specified). The contents of '''default''' is never available to parser functions; e.g., parameter <code><nowiki>{{{price}}}</nowiki></code> would remain empty. It can be thought of as meaning ‘default format’, not ‘default value’.
   
 
A few sample use cases:
 
A few sample use cases:
* Extra text: <code><format>${{{price}}}</format></code>
+
* Adding extra text: <code><format>${{{price}}}</format></code>
* Links: <code><format>[[{{{location}}}]]</format></code>
+
* Linking a page: <code><format>[[{{{location}}}]]</format></code>
* Categories: <code><nowiki><format>[[Category:{{{car type}}}]]</format></nowiki></code>
+
* Linking to a category: <code><nowiki><format>[[:Category:{{{car type}}}]]</format></nowiki></code>
  +
* Categorizing a page: <code><nowiki><format>[[Category:{{{car type}}}]]</format></nowiki></code>
   
 
For example, we can insert a <code><nowiki>{{money icon}}</nowiki></code> template:
 
For example, we can insert a <code><nowiki>{{money icon}}</nowiki></code> template:
  +
 
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
 
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
 
<data source="price">
 
<data source="price">
Line 340: Line 400:
 
[[File:Field mutators.png|thumb|Fields with formatting|250px]]
 
[[File:Field mutators.png|thumb|Fields with formatting|250px]]
   
<syntaxhighlight lang="xml" style="white-space: normal !important; clear: right">
+
<syntaxhighlight lang="xml" style="display:flex;">
 
<header>Price to buy</header>
 
<header>Price to buy</header>
 
<data source="buyhaggle">
 
<data source="buyhaggle">
Line 363: Line 423:
 
[[Help:Parser functions|Parser functions]] can be added to any infobox. However, the results will be automatically hidden if the parameter, tag, or data source do not contain any text.
 
[[Help:Parser functions|Parser functions]] can be added to any infobox. However, the results will be automatically hidden if the parameter, tag, or data source do not contain any text.
   
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start">
 
{| class="article-table"
 
|-
 
! Template code
 
|-
 
|
 
 
<syntaxhighlight lang="xml">
 
<syntaxhighlight lang="xml">
 
<data source="level">
 
<data source="level">
 
<label>Rank</label>
 
<label>Rank</label>
 
<format>Orc {{#switch:{{{level}}}
 
<format>Orc {{#switch:{{{level}}}
|1=peon
+
|1=peon
|2=grunt
+
|2=grunt
|grunt
+
|grunt
  +
}}
}}</format>
+
</format>
 
<default>Orc</default>
 
<default>Orc</default>
 
</data>
 
</data>
 
</syntaxhighlight>
 
</syntaxhighlight>
  +
|}
 
{| class="article-table"
 
|-
 
! Output
 
|-
 
|<div class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
 
<div class="pi-item pi-data pi-item-spacing pi-border-color"><h3 class="pi-data-label pi-secondary-font">Rank</h3><div class="pi-data-value pi-font">Orc</div></div></div>
 
|}
 
</div>
 
 
It would not make sense to test for the empty string in the switch statement; e.g., <code>|=(unknown rank)</code>, because that is already covered by the '''default''' tag.
 
It would not make sense to test for the empty string in the switch statement; e.g., <code>|=(unknown rank)</code>, because that is already covered by the '''default''' tag.
   
Line 400: Line 447:
 
* For information on the 'classic' method of writing infoboxes, see [[Help:Classic infoboxes]].
 
* For information on the 'classic' method of writing infoboxes, see [[Help:Classic infoboxes]].
 
* For more infobox help, see the [[w:c:portability:Portable Infoboxes|Portability Wiki]], it also covers the [[w:c:portability:Infobox_Builder|InfoboxBuilder extension]].
 
* For more infobox help, see the [[w:c:portability:Portable Infoboxes|Portability Wiki]], it also covers the [[w:c:portability:Infobox_Builder|InfoboxBuilder extension]].
  +
 
{{Help and feedback section}}
 
{{Help and feedback section}}
   
Line 407: Line 455:
 
[[fr:Aide:Infoboxes]]
 
[[fr:Aide:Infoboxes]]
 
[[it:Aiuto:Infobox]]
 
[[it:Aiuto:Infobox]]
  +
[[ko:도움말:정보상자]]
 
[[ja:ヘルプ:インフォボックス]]
 
[[ja:ヘルプ:インフォボックス]]
 
[[nl:Help:Infoboxen]]
 
[[nl:Help:Infoboxen]]
Line 412: Line 461:
 
[[pt:Ajuda:Infoboxes]]
 
[[pt:Ajuda:Infoboxes]]
 
[[ru:Справка:Инфобоксы]]
 
[[ru:Справка:Инфобоксы]]
  +
[[tr:Yardım:Bilgi kutuları]]
 
[[uk:Довідка:Інфобокси]]
 
[[uk:Довідка:Інфобокси]]
 
[[vi:Trợ giúp:Hộp thông tin]]
 
[[vi:Trợ giúp:Hộp thông tin]]
[[zh:Help:訊框]]
+
[[zh:Help:訊框]]
 
 
[[Category:Help]]
 
[[Category:Help]]
 
[[Category:Editing]]
 
[[Category:Editing]]

Revision as of 10:29, 7 May 2021

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.

Fandom has developed a consistent way to code infoboxes, called Portable Infoboxes, to enable them to display well across different devices, which this page details. There are no changes to how you use an infobox on an article — instead, the changes affect how it is written on a template page. Fandom considers use of Portable Infoboxes to be standard for their communities, and safe and stable for common practical use.

A tool to help with the migration of existing infoboxes has also been created. More information about this can be found on Help:Infobox migration, and a full step-by-step walkthrough can be found at Help:Infobox migration/Walkthrough.

Useful links

How to add an infobox to an article

VE-portableinfobox

Inserting Portable Infoboxes in the VisualEditor

You can add an infobox to an article the same way as you would any other template, either via the editor's built-in tools, or through the editor's source mode. In the VisualEditor, Portable Infoboxes can quickly be inserted via the Infobox option on the 'Insert' dropdown.

Meanwhile, in source mode, 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
}}

With Portable Infoboxes, this works similar as with any other template. The template page markup is a little different, as detailed below.

How to create an infobox

Tutorialinfobox

First, start a new template with any name you like. To do this, create a new page with the title "Template:[name of your choice]" (e.g. Template:Example). While in the past you may have used tables and divs, we now use infobox tags. We'll begin with a basic 'stacked' infobox, with a title and an image:

<infobox layout="stacked">
  <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 layout="stacked">
  <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, inserting the following parameters to get a working infobox:

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

Hiding values

Any field or element without a value will automatically be hidden. This applies to all tags with the exception of groups that are forcibly shown (see #Force all group elements to be displayed). When all elements are empty the infobox itself will not appear. Inside an image tag, images that do not exist will not show a "redlink", but the file page will appear in Special:Wantedfiles.

How to alter the infobox layout

Infoboxes using this kind of code are automatically styled, taking cues from your community's custom 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 (table) layout
Labels are displayed to the left of the values
<infobox>
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12

Default (table) layout

Stacked layout
Labels are displayed above the values
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.10

"Stacked" layout

Custom theming

The default infobox theming can be overridden in two ways. There is a variable on your community's WikiFeatures page entitled Europa Infobox Theme. When you enable it, your infoboxes will pull the colors you chose for your Wiki Navigation in ThemeDesigner.

Your other option is to use local community CSS. Using the type, theme, or theme-source attributes on the infobox tag will make it easy to target specific infobox templates using classes.

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

For lots more information about how to use these attributes and theme an infobox, including detailed guides, please check out Help:Infoboxes/CSS, or find example styles and themes on the Portability Hub.

Accent colors

The colors of title and header backgrounds and text can be further repainted per-infobox by using the accent color feature. Like theme-source, the color used is the value of the template parameter indicated in accent-color-source (for backgrounds) and accent-color-text-source (for text).

As an example: if the infobox template declares accent-color-source="bkg" and the article's infobox declares bkg = #FFF, the background color of the headers and titles will be #FFF (the HEX value for the white color). The colors declared in this way must be in #FFF or #FFFFFF HEX format, or the recoloring will silently fail.

Accent colors will override colors declared using themes as well as defaults.

This also includes a parameter for default color, so using accent-color-default="#FFF" sets the color for all titles and headers backgrounds, and accent-color-text-default="#000000" works in a similar manner by setting the default text color using hex formats.

Per-item styling

Individual items in an infobox may include markers inside the HTML results that allow them to be indicated with CSS selectors known as data attributes.

  • All Portable Infobox elements that have an input of source will now render in HTML with that parameter name in a data-attribute, such as data-source="ATK". This will allow you to write CSS or jQuery selectors such as .pi-item[data-source=ATK] to style and identify individual items. Used in combination with type, this should eliminate the need for nth-of-type style selection and opens up other possibilities for design and interactivity.
  • The new name parameter allows explicit selection of elements whether they accept a source input or not, including identification of <title>, <group>, <data>, <header>, <image>, and <navigation>. Much like the data-source data-attribute, <data name="bar"> can be selected as .pi-item[data-item-name=bar].

How to use multiple images or videos

Infoboxtabs

Tabbed images

To use multiple images in one location in an infobox, you can simply pass a <gallery> tag.

{{Example
 |name   = Eddard Stark
 |image  = <gallery>
Eddard 1.jpg|Eddard on a horse
Eddard 2.jpg|Eddard in a house
Eddard 3.jpg|Eddard by a hearse
</gallery>
}}

For more information about this feature, see this thread.

To add a video into an infobox, simply use the <image> tag, just as you would with an image. When a video is inserted instead of an image, a thumbnail with a play icon and duration info will be shown in the infobox, and clicking on the video will pop up a video player. If you want to add multiple videos, add a new <image> tag per each video.

How to group data

Advancedinfobox

Unusual orders and groups in action

Now that you have created a simple infobox, you can learn how to use more advanced options. In the section below we show how to build the infobox seen on the right.

This infobox begins with three <data> fields, then single <title> and <image> fields. As you can see, the <title> field does not have to be the first field.

<infobox layout="stacked">
  <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 <group> field will let you group fields together and give them 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 (other than the header tag) inside a group have a value, that whole group won't show up.

<infobox layout="stacked">
  <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>

Horizontal layout for groups

Screen Shot 2015-06-16 at 13.27

Horizontal grouping

Instead of a vertical list, <group> fields can have a horizontal layout where all the content is displayed next to each other in single line. This can be achieved by adding layout="horizontal" attribute to the group tag.

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

Smart layout for groups

Similar to horizontal layout (which provides rigid, structured rows) is "smart" layout. This allows data fields to flow in a single group from one row to the next. When the number of fields reaches a defined limit, the next data field will appear on a new row. The items in a row will adjust to fill all available width.

To use smart groups, add row-items="3" (or some other number that sets the limit). All items in a smart group use horizontal layout by default, so it is not necessary to add that attribute if you are using smart groups. However, it is possible to mix horizontal and vertical data fields in a smart group by adding the layout="default" attribute to an individual <data> tag.

To make a given data field take up more than a single space, use the span="2" attribute in a <data> tag.

<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <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" layout="default"><label>Outcome</label></data>
  </group>
</infobox>

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 layout="stacked">
  <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:

{{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.png|20px|link=House Greyjoy]] [[House Greyjoy]]
 |side2       = [[File:Baratheon.png|20px|link=House Baratheon]] [[Iron Throne]]
 |commanders1 = Unknown
 |commanders2 = Lord [[Stannis Baratheon]]
 |casual1     = Unknown
 |casual2     = Unknown
}}

Collapsible groups

PI-Collapse

Collapsible groups in action

Groups can be made collapsible by adding either collapse="open" or collapse="closed" to the <group> tag. This will make the group header row clickable (to expand and collapse the group), and the group will initially start open or closed, respectively.

<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>

Note: A header row containing content must immediately follow the group tag for this to work.

Panels

PortableInfobox-Panel-Orc

Data items and groups can now be structured in tabbed panels, which allow more flexibility and smarter data display on desktop and mobile views. Each <panel> — as a child of the root <infobox> element — can be labeled (with <label>) and one or more <section> elements to make a tab set. Any element that could otherwise be a child of <infobox> can be a child of <section>. This should reduce clutter and the necessity for groups of infoboxes on pages, while structuring infoboxes in more dynamic ways.

The <section> tag represents the contents of a tab. The clickable toggle is represented by a <label> tag. Labels default to their zero-based index if omitted; if all tabs within a panel are unlabeled, then they are contained in the infobox as if they were groups.

<infobox>
  <title source="title">
    <default>{{PAGENAME}}</default>
  </title>
  <panel>
    <section>
      <label>5E</label>
      <data source="size1">
        <label>Size</label></data>
      <data source="type1">
        <label>Type</label></data>
    </section>
    <section>
      <label>4E</label>
      <data source="origin2">
        <label>Origin</label></data>
      <data source="type2">
        <label>Type</label></data>
      <group>
        <header>Details</header>
        <data source="input2">
          <label>Input</label></data>
        <data source="output2">
          <label>Output</label></data>
      </group>
    </section>
  </panel>
</infobox>

Advanced options

Formatting

If you want to 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 format tag is used, the variable provided in source= is then formatted or modified as specified inside the format tag. For this purpose, the parameter has to be provided in triple braces; e.g., {{{price}}} for source="price".
  • If the variable provided in source= is empty, the node renders the value as provided in the default tag (or doesn’t render if no default tag is specified). The contents of default is never available to parser functions; e.g., parameter {{{price}}} would remain empty. It can be thought of as meaning ‘default format’, not ‘default value’.

A few sample use cases:

  • Adding extra text: <format>${{{price}}}</format>
  • Linking a page: <format>[[{{{location}}}]]</format>
  • Linking to a category: <format>[[:Category:{{{car type}}}]]</format>
  • Categorizing a page: <format>[[Category:{{{car type}}}]]</format>

For example, we can insert a {{money icon}} template:

<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="buyhaggle">
  <label>Price with Haggling</label>
  <format>{{{buyh}}} {{money icon}}</format>
</data>
<data source="buy">
  <label>Undiscounted price</label>
  <format>{{{buy}}} {{money icon}}</format>
</data>
<data source="sell">
  <label>Price to sell</label>
  <format>{{{sell}}} {{money icon}}</format>
</data>
<data source="weight">
  <label>Weight</label>
  <format>{{{weight}}} {{weight icon}}</format>
</data>

Parser functions

Parser functions can be added to any infobox. However, the results will be automatically hidden if the parameter, tag, or data source do not contain any text.

<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
              |1=peon
              |2=grunt
              |grunt
              }}
  </format>
  <default>Orc</default>
</data>

It would not make sense to test for the empty string in the switch statement; e.g., |=(unknown rank), because that is already covered by the default tag.

Examples

Further help and feedback