New Portable Infoboxes

UPDATE: The changes are already live! We have converted from our old infoboxes to the new portable infoboxes.

There are many advantages to these new infoboxes, most importantly that they are easier to manage and that they are compatible with mobile devices.

The new infoboxes are a lot easier to create, the code used is more compact and easier to understand, also the style settings are no longer included in each infobox but are derived from a central position allowing us to change the way the infoboxes look without needing to change every template.

The old infoboxes looked weird on mobile and oddly proportioned, this will be fixed with the new infoboxes.

comparison:

Unknown
Some attributes
First	Unknown
Level	Unknown
Second	Unknown
Third	Unknown
Other attributes

Adding Infoboxes[]

There are hardly any differences between how the new infoboxes are implemented to articles.

The new infoboxes will also be able to be added by selecting add infobox in the default text editor instead of needing to select add template and search for infobox.

In the source editor the code to implement will remain the same, also this will mean that no articles will need to be edited for the upgrade.

The new infoboxes also support multiple images, see the guide here.

The new boxes no longer allow setting the text color, articles that have this changed in their infobox will have the field be ignored, this should not harm any articles as this feature was completely unused.

This is how the infoboxes are read on an article:

{{Infobox example
|image        = None.jpg
|imagecaption = imagecaptions are often unused
|title        = Example Infobox
|field 1      = All fields will remain the same
|field 2      = Empty fields do not show up
|field 3      =
}}

Creating Infoboxes[]

The new language uses is different from the old one in many ways, Wikia can create a draft copying most of the fields but it's far from complete.

Here is a comparison between the old code and the new one:

Old language snippet:

! colspan="2" | <div style="text-align: center;"><div class="wikia-infobox-section-header">Political and social information</div></div>

|-
! Affiliation
| ''{{{Affiliation|Unknown}}}''

Same snippet in new language:

<group>
    <header>Political and social information</header>
    <data source="Affiliation">
        <label>Affiliation</label>
        <default>Unknown</default>
    </data>
</group>

As you can see html tags between angle brackets(<>) are used everywhere now and it's a lot easier to read.

Also the style info has disappeared from the code, it has been moved to a central location and isn't needed anymore.

Tags[]

Here is a short list of tags and their usage:

<infobox>

Used to indicate the start of infobox code.

<image source="X">

Used to implement an image, the X between quotes("") will be the name of the field.

<caption source="X">

Sets the image caption with field X, can only be used inside image tags.

<default>

Sets default value of any field, can only be used inside tag that use a source parameter.

<title source="X">

Sets title with field X, default should be set to {{PAGENAME}}.

<group>

Declares a group, groups are used to group fields and allow all fields and the header to be set to invisible.

<header>

Sets header.

<data source="X">

Declares an information field with source X, needs label tag.

<label>

Sets the name of the info field's label, used inside data tags.

<format>

Allows you to change how the info field is displayed, only use this if you know what you're doing.

Don't forget to close all your tags like normal in html:

</infobox>

converting infoboxes[]

To convert an infobox click create draft on the original template's page, this will create a draft with roughly the same content as the old template.

The draft generation has a few flaws and the code doesn't look like it should yet.

As an example we'll be converting the example infobox, the example infobox has one image, one imagecaption, one title, one header and three fields named field 1 to 3.

The draft will likely look like this:

<infobox>
	<data source="text_color"><label>text_color</label></data>
	<image source="image"/>
	<data source="imagecaption"><label>imagecaption</label></data>
	<title source="Name"><default>Unknown</default></title>
	<data source="field 1"><label>field 1</label><default>Unknown</default></data>
	<data source="field 2"><label>field 2</label><default>Unknown</default></data>
	<data source="field 3"><label>field 3</label><default>Unknown</default></data>
</infobox>

How this box should look:

<infobox>
    <image source="image">
	<default>None.jpg</default>
    	<caption source="imagecaption"/>
    </image>

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

    <group>
        <header>Header name</header>
        <data source="field 1">
            <label>Field 1</label>
            <default>Unknown</default>
        </data>
        <data source="field 2">
            <label>Field 2</label>
            <default>Unknown</default>
        </data>
        <data source="field 3">
            <label>Field 3</label>
            <default>Unknown</default>
        </data>
    </group>
</infobox>

Note: a noinclude tag is also generated: this tag is used for the documentation, just leave it and the information inside, it'll be referred to later in this guide.

To convert the best and fastest practice is to:

Click create draft and immediately publish with comment "generated draft" so the draft is saved in the edit history, then select edit.

Copy the example piece of code and place it under the generated code, then copy the information inside of the source quotes("") from the generated code.(generated code is no longer needed after this but it can serve as an example of the data field order)

! source names need to remain the same for the article infoboxes to be read!
! changing them will mess up all articles using the infobox!

Copy the segment with group tags for each header in the infobox and copy the segments with data tags for each info field inside of the group tags with the same header, look at the old infobox for which data field belongs to which header.

! check if the indentations match the example, this makes reading the code easier!

Copy the default image name and place it in between the default tags that are inside the image tags, it'll replace the "None.jpg that is entered in this example.

! some infoboxes have no default image, remove the default tags in this case!

Lastly copy all headers and info field labels, headers are placed inside the header tags replacing "Header name", field labels are placed in between the label tags inside the data tags replacing "Field n".

The new infobox draft is now finished and the auto-generated infobox code should be removed, as soon as all the drafts are ready the drafts will replace the old infoboxes and they'll be shown on the articles.

Publish with comment "converted infobox".

Writing Documentation[]

The documentation is generated inside these tags:

<noinclude>   </noinclude>

The documentation shows people how the infobox can be used.

To maintain uniformity all infobox drafts should be given the same layout in documentation:

<noinclude>
==Usage==
To use this template on an article copy this:
<pre>
{{infobox usage}}
</pre>

==Sample==
For example enter this:
<pre>
{{infobox sample}}
</pre>
to see this:
{{infobox sample}}

[{{fullurl:{{ns:Template}}:{{PAGENAME}}}}?action=purge Click here to refresh the preview above] </noinclude>

The automatically generated documentation should be replaced with this, to do this the best practice is to:

Copy the example documentation and place it under the generated one.

Copy the first generated code snippet that shows all the fields empty and place it between the first set of pre tags replacing {{infobox usage}}.

Copy the infobox source code from a popular page that uses this infobox already and place it replacing {{infobox sample}} between the second set of pre tags and after "to see this:", then place /Draft after it's infobox name so it'll use the draft and not the old template.

! there should be no space between the </infobox> and the <noinclude> tags!

Remove auto-generated documentation and publish with comment "formatted documentation".

Styling Infoboxes[]

only admins can do this

The new infoboxes are styled in the Wikia.css this can only be edited by staff.

WIP

Resources[]

A list of helpful links I used:

Here is a generated list of the infoboxes we need ported:

http://robocraft-rp.wikia.com/wiki/Special:Insights/nonportableinfoboxes