Forum:New infobox scheme

{{Forum post
 * You may or may not have noticed that Wikia is pushing out a new scheme for creating infoboxes that are portable and look better on mobile devices. I have no idea how many of our users access FRW on their mobile devices, but Wikia says the rise in usage is quite dramatic of late. So, they came up with this idea to make infoboxes more standard and "portable" between devices and to the next generation of interfaces (one of their developers has been quoted saying that wikis should be able to render on a washing machine). I read the (very long) forum discussion on it and decided to try it out with one of our infoboxes and present it to the community for feedback. It is important to note that this change is optional, but also that the old style wiki markup for infoboxes is quirky and held together by bubble gum and bailing wire. I have no idea how long it will continue to work; probably a long time, but eventually technology will leave it behind. So without further ado, allow me to present some visual aids:

Visual Aids

 * Click here to see the old Item infobox with all parameters filled out.
 * Click here to see the new infobox style of the same data. If you open it in a new tab, you can flick back and forth to see the differences. NOTE: I modified the infobox slightly to show off one of its features: the horizontal layout. This is why the 1st Edition Statistics block looks completely different between old and new. I chose it because it had only two values to display and it demonstrates something that I believe was desired by at least one of our users (but can't remember who). Don't get too excited, if you use this for more than one row of data, the alignment of the columns becomes an issue (I think).
 * Click here to see a random member of Category:Items displayed using both styles side-by-side. Click the "Re-roll" link to generate a new random selection. NOTE: the new infobox code is not 100% compatible with the scripting language I used to create this demo, so you will notice things in the OLD box that are missing in the NEW box, namely, citations and anything after a &lt;br /&gr; tag. Citations leave a string of garbage in the output so I had to strip them out, which is why anything after a "&lt;" symbol is missing. This is a problem with my scripting and not the new infobox scheme, which works just fine, as you can see in the Longsword examples.

Some Observations

 * 1) You might need to update your browser to see the correct formatting. I'm not sure what browsers are supported by this new code. They use some CSS I've never seen before, but it works in Windows 10 on Firefox 40.
 * 2) Not all Category:Items use the Item template, so you might find a few random pages that do not display two infoboxes side-by-side. Just hit Re-roll.
 * 3) You don't have to learn anything about these new infoboxes unless you want to create one. You will use them in the same manner as you have always done, i.e., cut and paste the blank template from the doc page and fill out the fields.
 * 4) It took me a good part of a day to get the CSS working to make the default infobox look like our old infobox, and it's not perfect. Modifying the way it looks will be heavily dependent on CSS which I think only admins can modify on a wiki. This means non-admins can move fields around but cannot alter the look (colors, sizes, margins, etc.). This is probably a good thing considering how much damage you can do to an entire wiki if you can edit the Common.CSS file, but it does limit how much freedom non-admins have to customize things for themselves.
 * 5) With a few minor adjustments, I got it to work in he monobook skin also. Append "?useskin&#61;monobook" to any wiki URL to see what the page looks like in Monobook. Append "?useskin&#61;wikiamobile" to see how it looks on a mobile device. Be forewarned, the new infobox takes up the full width of the preview box with the mobile skin.
 * 6) If an image is wider than it is tall, then the new infobox renders it without any border, so it fills to the edges of the infobox, making the image look bigger (and it is). If the image is taller than it is wide, then it fits it vertically into the box and sometimes that appears smaller than the old way.
 * 7) Tabbers are reported to work with the new infoboxes, but I haven't tried one yet.
 * 8) The width of the left and right columns is computed by black magic as far as I can tell. If your label (left column) is too long, it might disappear behind the right column. Let me know if you find a page where this is a problem.
 * 9) I added a slight tint to the background of the image caption, because I thought it needed it. I think the new way will uniformly make all captions (for all uses of Item) italicized, regardless of the input, but I haven't investigated it yet.
 * 10) The new infobox includes a way to use a switchable theme, so the Spell and Creature templates can still change color schemes if they wish. We'll know if it works if/when I try to convert them.
 * 11) The new infobox is slightly thinner and slightly longer than the old one for the same data (but not always, see #4). I could probably squash it some more if there is a demand.
 * 12) The new scheme may break some of the fancy scripting that I've used here and there, but since it is optional, we can keep the old stuff for as long as possible or until it gets rewritten.

Under the Hood
If you are interested in writing an infobox template, here are some things to look at and compare:
 * Click here to see the new infobox template code in all its glory. Note that there is very little wiki markup necessary, at least for this one.
 * Compare that to the old infobox.
 * If you can view it, the Special:CSS page shows all the CSS classes I had to alter and override to get it to look like our original infobox. Scroll down to the bottom of the page.
 * To see the heavily modified (kluged) template that I used to generate the side-by-side comparison, click here. The calling function is here.

Questions
So what do you think of the new infobox? Are there specific things you would like to see tweaked? Would you rather stick with the old format? Is it good enough to roll out to the users? Do you care about mobile devices?
 * &mdash;Moviesign (talk) 05:09, August 24, 2015 (UTC)}}