Board Thread:General Wiki Discussion/@comment-4139585-20150823213441

Hello all, and welcome to this week's weekly post. It is quite a lengthy one discussing a really big change unveiled by Wikia this week, that being the transition to Portable Infoboxes.

Why the Change?
To quote the staff blog coordinated with the release of this new feature, "the new type of infobox - we like to call them Portable Infoboxes because the markup allows any infobox to be ported to any device - is simple, functional, and does some neat tricks that the old markup doesn't." In the days since I found about this feature, I have taken the time to figure out how to use this feature, both so that I can use it myself and teach users on this wiki how to use it. Though it might seem that converting infoboxes to this old format is a lot of work, I can assure you it is worth it, as the coding for these new templates is both simpler and more powerful.

We all know infoboxes: the templates usually featured at the top of the page that provide all the basic information about the subject of the page. For example, the infobox on an episode page usually provides the name of the episode, an image from the episode, the name of the series the episode is from, the season and episode number of the episode, who wrote the episode, and more.

I'm sure that many of you know how to use an infobox, and other templates for that matter, and are worried that this new feature will make it difficult to continue using infoboxes on your pages. This is simply not true, as the new infobox markup only affects the coding of the template; in other words, it does not change how infoboxes are implemented onto a page.

This new markup, for what it's worth, uses a language called XML to store data, which is then converted into other code. The reason Wikia calls these new infoboxes "Portable Infoboxes", is because the code is converted differently based on what device you are using, whether it be on a browser or on a mobile device. This is part a shift in Wikia's focus over the last couple years that places a significant emphasis on mobile users.

Making a New Infobox
'''Note: Though I said making a template is easy, it still requires knowledge of source editing and general knowledge of code. You can skip these next two sections if you don't think you will understand them.'''

Now, let's look at the actual code. I've mentioned a couple times that this code is much simpler than the old code, and it definitely is. Under the old code, you had to use tables upon tables, and  tags, and parser functions (such as  and ), in addition to tons and tons of formatting to get an infobox to look exactly right. With this new feature, all of that is gone, and making your own template is very easy.

I will be using Template:AoT Volume as an example, as I have already converted it to the new markup. When starting a template, the first thing you must decide is the layout, which can either be normal or stacked. In normal, the label and the information appear side by side, whereas in stacked, the information appears below the label, and is tabbed over slightly. My template uses the stacked layout. Once you decide, you should add the first part of the markup into the template, such as like this:

or, for stacked:

At this point, I would recommend saving the page and then editing it again, as this will enable syntax highlighting and auto-completing, both of which are very useful tools.

Now, we will add the title bar and an image, like this:

Here, source is the name of the parameter that is used to specify what text appears in the title bar, and the image to be used. The default for the name is the name of the page, and the image has no default.

Now, I will explain data tags, and how you can group them in different ways. For example, the following markup is a group of two data tags that will display the season and episode number side by side, as seen on my template:

Here, the layout of the group is what makes the season and episode information appear side by side. A label tag refers to what the information means, and the default tag is what will be displayed if nothing is filled into the parameter with the name specified by source. Now for another group of information that isn't horizontal:

Information

As you see, if you don't specify horizontal in the group tag, the information will be displayed vertically. Also new here is the header tag, which displays a header across the top of that group.

My template has two more groups, but they contain nothing different than the ones I have already shown. At the end, the template is finished off by.

A couple other things of note here: firstly, each template may only have one title and image, and secondly, each group may only have one header.

Stylizing a Template
Note: Skip this section, too if you don't want to read about code.

If you go to my template and edit it to view the code, you may notice that the first line is slightly different than what I have shown above. Specifically, the real first line of my template is shown below:



In this template, I have specified a theme. This theme can be used to change the CSS of the template; in other words, we can use this to change how the template looks.

The way this is done is that the code for the theme must be placed on Special:CSS, which can only be edited by admins, but I will address this later. If you look at Special:CSS, you will notice that at the very top there is some code that changes templates that implement the "aot" theme. This is all traditional CSS; the only challenging part is figuring out how to access different items. Here are some common items you might want to access:


 * .pi-theme-themename points to the whole template (useful for adding a border)
 * .pi-theme-themename .pi-item points to every item within the template (useful for changing background and text colors)
 * .pi-theme-themename .pi-title points to the title item
 * .pi-theme-themename .pi-secondary-background points to the header item
 * Though I don't really understand it myself, .pi-theme-aot .pi-data:not(:last-of-type) is seen in the code for my theme, and is used to change the color of the border between different data tags.

When making an infobox, you can also choose to use the theme-source attribute instead of the theme attribute, such as seen here:



This allows the theme of the template to be specified in a parameter.

Portable Infoboxes on BTFF
As of now, the admins have not discussed whether or not we should begin converting all infoboxes to portable infoboxes, but as far as I know, Wikia is not forcing any community to do this. This will be discussed by the admins at a later time; personally, however, I would strongly recommend you begin to convert your templates to this new, simpler markup.

TL;DR
Portable Infoboxes are much simpler than the old infoboxes and, if you know how, you should make the switch to using them. In the future, the admins will discuss whether or not all infoboxes should be converted. I also believe that this change is eventually coming to Navboxes, which are the navigation templates usually found at the bottom of a page.

As usual, feel free to discuss and ask questions about the topic of this post below.

--Paper

 