Forums: Index > Wiki discussion > Upgrading Infoboxes - Active Development

Project aim[edit source]

The Portable Infobox project aims to replace the current infoboxes with ones that behave and display properly on both mobile and desktop devices.

Project status[edit source]

Development status: Active

Forum status: Active

Module status:

CSS status:

Infobox status:

  • Infoboxes are in the process of being converted, some issues discovered need attention

Change log[edit source]

Module[edit source]

CSS[edit source]

  1. August 9 2015 - Force images 100%: "If not already there"
  2. August 9 2015 - Fix captions: "Make them blend in with the infobox"
  3. August 12 2015 - Fixed image widths and footers: "Perhaps make them blend a bit more"

Infoboxes[edit source]

Character[edit source]

  1. August 9 2015 - Removed formatting for IDs: "Already present in parameters"
  2. August 10 2015 - Added several new fields: "Are there any that I am missing?"

Discussion[edit source]

Hey guys :) Just checking in to see if you needed any help with portable infoboxes.

I know that TwoBearsHigh-Fiving got the skinny on why portable infoboxes are a pretty nifty idea when he attended Wikia's Community Connect earlier this month, so I'm going to assume he probably shared at least some of that info with you already.

I think it's great that you've started this thread to act as a sort of central repository of discussion on the project!

But I notice in this thread that development of the boxes here at Fallout seems to be stalled because of an unnamed development issue with Wikia. Since I wasn't the staff member directly involved with that, I dunno what problem, exactly, is seen as a roadblock. Lemme know if you're still having that problem, and I'll try to clear the road for you.

I'd also be happy to answer any other questions you might have, so please either ask below, or feel to drop by any of my message walls/user talk pages if you wanna chat! Also, Shareif, one of our top engineers, is a huge Fallout fan, and thus is making himself especially available to this community. So don't be surprised if you get a message or two from him, too! Thanks!
czechout    00:19: Tue 29 Sep 2015

I can't say for sure, but I thought the Wikia issue that's referred to was the one that broke some templates (like the youtube one).
I think we'd be happy with any help we can get. What we'd (we = my perception of the general opinion) like to achieve is basically that we can keep the exact same (or only really really minor changes) for computer users, while improving the infoboxes for the mobile users. The main concern raised so far is that making the infoboxes mobile friendly gave some drawbacks for the computer users (first propositions and examples). A lot of progress had been made for the character infoboxes meanwhile, as can be witnessed here, but that so far only happened for the "characters". If this could also be done for the other infoboxes we have (locations, factions, weapons, ...), I think the community will be happy to support the changes. - Greets Peace'n Hugs (talk) (blog) 01:37, September 29, 2015 (UTC)
Ah, it is fine. Usually I'd refrain from upgrading infoboxes if there are no .css experts. Since there are, I don't think we should have any major problems at all. ☢ Energy X ☣ 08:32, September 29, 2015 (UTC)

Looks good so far. The atrocious display of infoboxes on mobile is actually a major reason why I avoided viewing this site from my phone as much as I could. --Skire (talk) 21:55, September 29, 2015 (UTC)

Agreed, it's really a chore to navigate the them in mobile. I support the initiative.
Limmiegirl Lildeneb.png Talk! ♪ 00:00, September 30, 2015 (UTC)

Hey Nukapedians! Today was Wikia Day, a sort of company holiday here at Wikia. On this day we drop everything we usually do and edit wikias. For my focus today I chose Fallout Wiki and wanted to help you guys out with portable infoboxes.

I created [[:Template:Infobox faction/Draft]], [[:Template:Infobox weapon/Draft]], [[:Template:Infobox achievement/Draft]], [[:Template:Infobox consumable/Draft]], and [[:Template:Infobox quest/Draft]]. These are ready for review by you guys. Probably not perfect ;) but I hope they're close enough for acceptance.

As a side note I'll add that we plan to add a "Media Collections" feature to our new infobox markup. This will allow us to consolidate images for the various Fallout games at the top of infobox, avoiding situations like the one on Poison (where the Tactics image is in the footer).

Hope you like these. ;) Feedback welcome, of course. TOR (talk) 20:01, October 23, 2015 (UTC)

I have reviewed the Template:Infobox quest/Draft and it looks really great so far. Some nitpicking details can be better, like adding the achievement image in the top right corner of the main image, a bit less space around the title so pages with less content looks less silly, but all in all, you did a truely outstanding job on it. - Greets Peace'n Hugs (talk) (blog) 20:42, October 23, 2015 (UTC)

Follow-up[edit source]

During a discussion I had with TOR in chat, we discussed making a "beta test" of the new infoboxes. What is going to happen is a few hundred infoboxes across Fallout, Fallout 2 and Fallout 3 will be converted to the new versions. After which people can view them in "action" and provide feedback. The reason why we are doing it this way is that the discussion here has been stalled and Fallout 4 is being released in less than 2 weeks. I personally would like this finished and ready before that time. Please leave any comments and concerns here. Thanks.--Kingclyde (talk) 01:08, October 29, 2015 (UTC)

I found several bugs.
  • The infobox is too wide on desktop (should be 240; ruins the 240px Fallout and Fallout 2 images)
  • The icon in the top-right corner is displayed way too large on mobile, wrong position
  • Game icon in the wrong position on mobile, missing on desktop
  • Image size doesn't for work with an achievement template (Take it Back!)
  • Preferably just a little more space between lines


  • The infobox image becomes (much) too large on the desktop (Glowing one, Vipers)
  • The automatic removal of the suffix (game differentiation) doesn't work anymore for the infobox header
  • The footer image isn't centered anymore on desktop (New_California_Republic)

That's what I see for now. Jspoel Speech Jspoel.png 18:36, October 29, 2015 (UTC)

Thanks for the feedback, Jspoelstra! And good job testing on mobile, too. The team & I are going to be looking into those issues next week. The icon positioning is a tricky one, but I'll see what's possible. TOR (talk) 20:16, October 31, 2015 (UTC)

When the updated template was added to New California Republic, it introduced a redlink in the uppermost part of the infobox to "Lonesome Roads factions". This should be a link to "Lonesome Road factions". Clockpuncher (talk) 23:55, October 31, 2015 (UTC)

This is now fixed thanks to an edit by Jspoelstra. The problem was in Module:Games. TOR (talk) 21:17, November 1, 2015 (UTC)
Hey guys! I'm going to be creating a file called MediaWiki:Wikia.css/Infobox.css, as well as several subpages off of my own User pages, in order to address the CSS issues mention above by Jspoel. Do not panic. Do not adjust your sets. :)
czechout    18:57: Wed 11 Nov 2015
A comparison of original and portable infoboxes is now available for your comments at User:CzechOut/Faction. The original {{Infobox faction}} is on top; the portable, on bottom. Your views on what more needs to be done to accept this new infobox are super important!
czechout    00:34: Fri 13 Nov 2015
Here's a full list of the infoboxes you can compare, right now!
  • faction infobox
  • achievement: Here I decided to let you have a look at the infobox image at larger dimensions. To my eye it presents a more attractive, dominant image on desktop and mobile. But what do you think?
  • creature
  • quest
  • weapon: This one presented the challenge of the fact that there's nowhere to really apply the va-infobox-icon class, so there's no real way that I can think of to make the icon inset in the top right corner.
    czechout    01:45: Fri 13 Nov 2015

(If you would, could you please float the two infoboxes side by side. That would be a bit more helpful to compare them. I was gonna do it, but it's your userspace.  The Gunny  UserGunny chevrons.png 02:29, November 13, 2015 (UTC)

Done on each infobox, except {{Infobox achievement}}, which is short enough that scrolling shouldn't really be much of an issue.
czechout    18:31: Fri 13 Nov 2015


Issues[edit source]

Faction template[edit source]

  • the supertitle doesn't link to the overview page anymore, but to the game
  • space between lines has become a little too cramped
  • font of infobox headers is a little too large

Achievement template[edit source]

  • The infobox image has become too large, previous is much more subtle
  • supertitle doesn't link to overview page anymore

Character template[edit source]

  • The image description is somewhat large, and doesn't have to be italic
  • space between lines too big, general problem

Quest template[edit source]

  • Same problems as described above
  • The quest icon has disappeared

Weapon template[edit source]

  • The icon has been placed below the infobox image, obviously we want it back in the top right corner
  • Same problems as described above

Still some work left to do in my opinion. Jspoel Speech Jspoel.png 17:57, November 17, 2015 (UTC)

Moving to implementation[edit source]

Hey all! I just want you — and by that the whole community — to know that your efforts with Fallout 4, are driving tons of new traffic to the site. You've done an awesome job in the last few weeks in particular!
We're also seeing a massive spike in mobile traffic, stronger this week even than last, which means that we'd like to see closure on the portable infobox conversion. So we'd like your permission to actually make the conversions happen by this weekend.
We have confidence in the new PIs because they're really close to your current infoboxes in terms of style and functionality.
Much of what Jspoel has mentioned above are fairly minor stylistic things that you guys can change to your precise liking later. See, when you say the fonts are "a little too large" or other font instances are "too big", we're in a pretty subjective territory. If you want me to make size exactly 12px or line-height precisely 140%, I can do that.
But it's hard to know how to respond to "too big" or "too small". Trickier still, a lot of the CSS has actually been worked out by one of your community, Shining-Armor. I didn't really want to countermand these stylistic choices, and thereby override what appeared to be local community wishes.
Communities regularly tweak infoboxes, and indeed the revision history of your own infoboxes suggests that such tweaking has been going on for years. That didn't stop you from committing to the current infoboxes at one point in the past.
All we're looking to do is to make sure that the current, huge numbers of mobile viewers get a much improved experience — without radically changing the desktop experience.
Can we therefore agree that minor styling shouldn't be a barrier to adoption? Questions of font size or line-height or padding should really be a part of a subsequent discussion, as would have been the case with the original infoboxes.

So I see three objections of substance, but I still don't think any of them should hold up adoption:

  • Icons in infoboxes like Weapon aren't inset in the upper right of infobox pictures - As I've said, above, this has been one of the more difficult aspects of conversion here at Fallout. The answer is not straightforward, but it is forthcoming. Maybe we can agree that it is something that will indeed be fixed to look more like the current infoboxes, but that this fix shouldn't hold up implementation.
  • Supertitle doesn't link to the right page. This is actually a problem within the Lua module that's called by the Infobox, and therefore not really a part of the infobox proper. It can almost certainly be corrected. The reason the current, non-PI template works is because it doesn't use the Lua module at all. I would suggest that you guys could still approve the new infoboxes even with this flaw, because the flaw really isn't a part of the infoboxes at all.
  • Infobox picture on {{Infobox achievement}} is too big. This infobox is unusual for you in that the images have user-defined widths, and that these widths are not the same from instance to instance. One page that uses the template may say that the width is 150px; another says they may be 140px. The current PI draft treats these infoboxes like any other ones on the site. Since your infobox pictures are generally widescreen, the CSS solves for that case. But the {{Infobox achievement}} images are typically precisely square. This means they inevitably get blown up slightly, but proportionally. So they're not warped; they're just not the size you'd prefer. Since these images aren't presenting as "broken" in any way, I'd ask you to let this be a tweak that can happen in the future for this one infobox.
As I hope you can see, the PIs actually do match your non-PIs pretty closely. And the feedback so far received can be solved. But in the current reality where you're getting gigantic mobile numbers, the priority should now be on actually implementing the new infoboxes. We can then continue to take your notes and fix things going forward.
Can we move forward with actually installing the new infoboxes?
czechout    21:25: Tue 17 Nov 2015
I have no clue if the wiki is as bad on mobile as some people state (i never use mobile computerstuff), but if it is, it might be better to apply it already? We agreed it didn't need a vote unless there would be dissensus, which doesn't seem to be the case. On the other hand, I would like to hear something about when the remaining issues with these infoboxes will get fixed. I wouldn't like to see the situation where nothing happens anymore as the mobile infoboxes are already online anyway. - Greets Peace'n Hugs (talk) (blog) 22:00, November 17, 2015 (UTC)
That's a reasonable fear. But trust me when I say that this wiki is currently being watched by a lot of Wikia Staff members. Creation of the /Draft infoboxes has so far involved three people actively involved in the coding and several other kibitzing from the sidelines. We are absolutely dedicated to getting you where you want to be.
That said, I think it's really important to note that on some of the smaller, stylistic issues, we know that you can take care of things on your own. There's a demonstrated history of the admin and interested users who currently edit here being able to tweak infobox design. So if you don't like the precise font size, for example, we have every confidence that you guys can play with that until you get it to your liking. And remember, too, that Module:Games, the thing that's causing the issue with the supertitle not linking to the right page, is actually something you guys created and for the most part have developed entirely here at Fallout.
So between our Staff and yours, we reasonably think we can get all this transformed within the next few days.
Overnight, btw, one of our engineers developed a new conversion for {{Infobox game}}. Like the other draft, we've put this /Draft on a couple of pages. You can see it in situ on Fallout and Fallout 4, and in a side-by-side comparison at User:CzechOut/Game.
czechout    16:19: Wed 18 Nov 2015
With my apologies for being largely away at such an important time ( real life issues seriously getting in the way), I think these are to the point where we should implement them as requested. As mentioned above, the remaining issues can be fixed/tweaked as time allows. Is there any serious opposition to this? Speak now, please. The Gunny  UserGunny chevrons.png 20:59, November 18, 2015 (UTC)
From the mobile preview option, it's going to require a lot more than just changing the infobox to make this site not look like ass. Tables in particular are horribad. Too much fixed width stuff, and not enough flow, or handling of overflow. Dulogo.pngDigital Utopia (talk) 00:24, December 13, 2015 (UTC)
Yes, but infoboxes seemed to be the biggest offender, practically imploding while being quite an important part of the page. It will need identifying which parts needs improving and which are unimportant enough so they can just be left with a scrollbar appearing for mobile users. But it seems we don't have many regular editors that view the page on a mobile, personally I have to rely on various preview emulations. A gerneral "looks bad" isn't that helpful, detailled reports of particular offenders would be good. --Alfwyn (talk) 12:13, January 26, 2016 (UTC)

Conclusion[edit source]

As promised in Chat discussions a few days ago, this discussion was going to be closed at the end of the 19th November. It having recently passed midnight in American Samoa on the 20th, and hearing agreement from Peace'n Hugs, The Gunny, and — on my talk page — Jspoelstra, and no dissent, here's what happens next.

  • The /Drafts which are currently complete will be converted within the next hour into portable infoboxes
  • Throughout today, and possibly into the weekend, your remaining infoboxes will be converted into portable infoboxes
  • Next week, tweaking will occur to make these things look precisely how you want them.

Because infoboxes can be used somewhat differently on different pages, and you have a lot of pages here, it would be very helpful if you guys could help with ensuring the boxes are basically looking okay. Although we don't expect problems, if you see pages where the infoboxes don't quite work, please make a note of the problem on my talk page so that I'm quickly alerted to the issue. I obviously intend to look at a random sample of pages using each infobox, but I can't reasonably look at every, single one. That's why your help is necessary. Note that your feedback on my talk page may not receive timely acknowledgement. But it will all be read and it will all form the basis for next week's improvement.

Thanks to everyone who participated in conversations with either me or TOR — and obviously thanks go out to Shining-Armor, who's done a lot of PI work for the community over the past several months.
czechout    14:05: Fri 20 Nov 2015

Additional comments[edit source]

  • Game differentations (<pagename> (Fallout 3) etc.) are visible, should be removed (as it was).
  • Only the first image in the infobox is visible; if there are more (My Kind of Town) they aren't displayed anymore.
  • Icons are missing, notably on quest pages
  • Location infobox is not converted (yet?) Jspoel Speech Jspoel.png 22:53, November 22, 2015 (UTC)

Currently Vault 13 doesn't list the game appearances - {{Game switch}} doesn't handle list of games. It will probably be easier to either use {{abblink}} which already does all the corner cases right or change Module:Games to do all the stuff. Short-term using abblink will be easier, but looking at it's source, doing it in lua will probably be easier to read/change. --Alfwyn (talk) 22:10, December 2, 2015 (UTC)

Sorry, guys. I should have initially started out today making my changes on a dummy page and template. You kinda saw the curtains pulled back there for a few hours, and it was likely pretty ugly. You should find Vault 13, and all location templates, now properly show their game appearances in the supertitle once again. One of today's main objects was to create working links to the right game overview page again. This has been achieved. On Vault 13, you'll note that the Fallout link now takes you to Fallout locations and Fallout 2 takes you to Fallout 2 locations.
czechout    02:16: Thu 03 Dec 2015
Ah, thanks for fixing that. At Modules:Games-test I tried an approach so we don't need a new function for every infobox. The invocation for the example would be just {{#invoke:Games|title|FO1, FO2|locations}}. The last parameter is optional. --Alfwyn (talk) 09:44, December 3, 2015 (UTC)

About the game differntation, it prooved to be a remarkably resistent problem. I ended up writing a lua function for it and changed the location infobox accordingly. See for example Diamond City Radio (location). Not 100% sure about names chosen, but I guess we can use this for the other infoboxes too if nothing better comes up. --Alfwyn (talk) 14:01, December 3, 2015 (UTC)

After some changes to Module:Games I started to link the whole supertitle like it was before - for locations and characters so far. Seems to me to be less "link suprise", especially when only one game is involved. If there are no objections I will change the rest of the infoboxes accordingly in the near future. --Alfwyn (talk) 16:28, December 4, 2015 (UTC)

You just made me a happier man. Make it so :) Jspoel Speech Jspoel.png 16:31, December 4, 2015 (UTC)

Looks like on several places "@hide"-text cropped up where the infobox was converted. Unlike the image case this is more visible on the page itself and not that easily detected globally. I'm zapping it on sight, but if it is really wide-spread a bot may be useful. --Alfwyn (talk) 14:05, December 6, 2015 (UTC)

I have just got my head around the XML format, and I have found a working solution to fix the icon displaying below the images. I just need a couple of lines of css inputted here. You can see my example of it working and the template example. The only big difference is the css that manipulates the div to position it over the image, which is exactly what Template:Infobox did. I will start looking into other problems in infoboxes next. - Abedecain (talk) 08:25, December 7, 2015 (UTC)

Positioning it absoslute will not work when the infobox is not at the standard place, like two infoboxes on one page (besides it messes up with Monobook skin, but not sure that counts). But yeah, css should be the fix, just not sure how to target individual fields with portable infoboxes - so using inline css as in your example instead? --Alfwyn (talk) 11:41, December 7, 2015 (UTC)
It's a good attempt and I certainly value it, but I don't really like the fixed position. We have many Fallout 4 pages with page management templates at the very top, that screw up the position of the icon, placing it outside the box. If it's possible, the icon should have a fixed position in the infobox, top right side. Jspoel Speech Jspoel.png 16:18, December 7, 2015 (UTC)
Putting it in the top actually make its easier to implement as you dont need to use the position proprty. I have managed to make it work (another example) with inline css for now. It would need one css property "pi-data .pi-data-value" to be changed from 'auto' to '100%' to make the icon stick to the right. It's not the prettiest code ever, as the new infoboxes sacrifice customisation for compatibility, but all of the inline css can be replaced by a class before implementation. -Abedecain (talk) 17:45, December 7, 2015 (UTC)
Well, I had some doubts about putting it in the dark green header box (though it was like that a few years ago), but we can try that. But why is the location's name italic? Can you put it back to normal font? Jspoel Speech Jspoel.png 17:52, December 7, 2015 (UTC)
The italics is just a bit of css slipping through, its a easy fix. I have also now added the Portable Infoboxes's gallery function to display multiple main images which is the new standard. You can see it implemented with nice css here. For this I have added the variable 'image tab' - 'image5 tab' with default values, and I have kept the 'image desc' caption functioning for infoboxes with one image. Unfortunately you cannot have tabs and a caption at the same time, however, if you want a caption anyway I can think of a few workarounds. - Abedecain (talk) 20:58, December 7, 2015 (UTC)
About the icon, there are small things I don't like that much: It will change position wether there is a supertitle or not and there is a dark line between supertitle and title for me. Then again this is better than anything I could come up with and an improvement of the current situation. So do we want to use this icon placing scheme? I tried adding ".portable-infobox { position: relative; }" to the css, which let's me position the icon absolutely nicely, but I can't get text to flow around it in this case it is long realy long. All in all, it is a fight against portable user boxes, which are just too inflexible in many cases. --Alfwyn (talk) 11:29, December 10, 2015 (UTC)

After infobox updating Corrosive glove doesn't show the Slayer perk anymore. I don't know how widespread that issue is. But the principal problem encountered here is, that portable infoboxes accept as decision whether to display something (source) only template parameters, and nothing computed. So there is no easy way to say, "display the attaks per second" perk group if one of the perks is a "attack per second" perk. The two ways two solve this I can think of are:

  1. Make {{Infobox weapon gamebryo}} a two layered template. The first doing all the calculations calling a simple subtemplate with the actual PI code.
  2. Simplify the interface, by not computing all the stuff, but explicitely state it on the page (so in this example something like "perkMult1=Heavy Handed | perkMult2=Bloody Mess|perkAttacksec1=Slayer"). This would simplify the template itself quite a bit, but probably need a bot to update all affected pages and quite some time to figure out how the calling interface should look like and ironing out all the bugs.

--Alfwyn (talk) 13:22, December 11, 2015 (UTC)

I learned something new about PIs today, apparently a data field gets hidden if either the source is undefined or the displayed value evaluates to an empty field. So all of the above was much too complicated, wasn't that hard to fix it after all. --Alfwyn (talk) 16:04, December 12, 2015 (UTC)

Another go at the icon problem, the result can be seen here on the left side. It is a bit fighting against portable infoboxes, so I'd prefer a better solution from CzechOut in the future and just use this for the quest infobox at the moment. Mainly so the current effort on FO4 quest pages isn't stalled by this. --Alfwyn (talk) 13:12, January 11, 2016 (UTC)

Not converted so far:

--Alfwyn (talk) 19:37, January 20, 2016 (UTC)

I have to rely on the mobile preview wikia offers, but there it looks like the system decides to display the infoboxes in the stacked layout and our css isn't prepared to handle that. That is what I see there is the pattern: Label, a white cell, then the value on a new line. If that is accurate, I think this really isn't how we want this to display. --Alfwyn (talk) 12:18, January 26, 2016 (UTC)

Community content is available under CC-BY-SA unless otherwise noted.