Infobox/Basics: Difference between revisions

Help

Latest revision as of 04:32, 13 December 2023

This is a basic introduction to infoboxes. A complete description of all the infobox functionality can be found in the help pages. Some knowledge of Templates may be necessary to design more complex infoboxes.

First step

The first step is to decide what contents you need in an infobox. Putting the idea down on paper or a table might help. Let's evaluate this using a case study.

Case study - Batman

Suppose an editor wants to create an infobox for a character, e.g. Batman. Below are the steps that can be followed.

Plan

Batman is a pretty popular character and it would be nice to have some basic information about him. A table below shows some of his attributes.

Attribute	Details
Name	Bruce Wayne
Abilities	Martial arts Genius-level intelligence
Alias	Batman , the dark knight
Affiliation	Justice league

Building an infobox

Step 1

First create a page with the prefix "Template:" e.g. Template:Infobox character.

Step 2

Write the following in "Template:Infobox character" and save:

<infobox>
    <data source="name">
        <label>Name</label>
    </data>
</infobox>

Now go to any test page, e.g. Special:MyPage/sandbox and write:

{{infobox character|name=Bruce Wayne}}

That should show you the infobox on the right.

Understand your first infobox

Infoboxes must have a "text" that starts a section and that ends it ( XML markup).

How it works

It's time to understand how it works.

<infobox> - This is a tag indicating that this section will contain an infobox.
<data> - This indicates that there will be a section containing some data, e.g. a name and a label.
source - This is called an attribute, and indicates where the input comes from, e.g. name from a template or template parameter. It must always be in the form of source = "text". This is case sensitive, so source = "NAME" is not the same thing as source= "name".
<label> - This defines what label must be used for the value entered. It starts with a '<label>' and ends with '</label>' . Note the front-slash.
</data> - This indicates the end of the <data> section.
</infobox> - This shows the end of the infobox.

Note: The information in the infobox is shown in the order in which it is entered.

Auto hiding sections

When a section such as <data> does not receive any information (e.g. source="name") it automatically hides. In some cases, the whole infobox may not appear. For example, if the example above is changed, and the following text is entered nothing will appear because there is no data to show:

{{infobox character}}

This will also happen if the "source" is misspelled or uses a different sentence case (e.g. upper case):

{{infobox character|NAME="Bruce Wayne}} <!-- This doesn't work in the example above-->

{{infobox character|name="Bruce Wayne}} <!-- This works -->

Adding more to the infobox

Title

A title can also be added to an infobox. Instead of using <data> use <title> :

<infobox>
    <title source = "title"></title>
    <data source="name">
        <label>Name</label>
    </data>
</infobox>

Like before, enter this text to test your infobox in a test page:

{{infobox character
|name=Bruce Wayne
|title=Batman}}

Now the infobox has a title!

Images

The infobox can be further improved with an image like this:

   <image source = "image"></image>

Data

The is the most important part of the infobox. It stores details and description of each item (or row), and there can be as many as neeeded. For example, the name of a character and the description of the field. It generally uses the following format:

<data source = "sourcename"> 
   <label> description </label>
</data>

For this specific case the name, alias, abilities, and affiliation will be added as shown below:

<infobox>
    <data source="name">
        <label>Name</label>
    </data>
    <data source="alias">
        <label>Alias</label>
    </data>
    <data source="abilities">
        <label>Known Abilities</label>
    </data>
    <data source="affiliation">
        <label>Affiliation</label>
    </data>
</infobox>

In actuality, if you don't add the correct arguments into the infobox on the page you're adding it to, the associated fields won't appear, so remember to actually add the fields to the infobox on the page. The same goes if you don't type in the name of the field correctly, so if the infobox fields are not displaying correctly then this means that the fields on the page has the wrong name.

Header

Headers can be used to describe a specific section like "information" or "family". This is possible with just a slight change:

   <header>Information</header>

Example

   <header>Information</header>
   <data source="name">
        <label>Name</label>
    </data>

Note that the header is different from other tags, and doesn't have a "source".

Navigation

One can also add content that helps people navigate using a "<navigation>" element:

   <navigation>Information</navigation>

This allows just about any text and can be used for footer notes, links or anything. Much like the header and the label element, the <navigation> also doesn't have a "source".

Bringing it all together

Now all the concepts learnt above can be used together.

Write this in a sandbox page:

{{infobox character
|title=Batman
|image=Example.png
|name=Bruce Wayne
|abilities=Martial arts
Genius-level intelligence
|alias=Batman , the dark knight
|affiliation= Justice league
}}

The contents of "Template:Infobox character" should look like the "box" on the left (see infobox batman) , and the infobox will look like the one the right.

<infobox>
    <title source = "title"></title>
    <image source = "image"></image>
    <header>Information</header>
    <data source="name">
        <label>Name</label>
    </data>
    <data source="alias">
        <label>Alias</label>
    </data>
    <data source="abilities">
        <label>Known abilities</label>
    </data>
    <data source="affiliation">
        <label>Affiliation</label>
    </data>
    <navigation>[//batman.com Official page]</navigation>
</infobox>