Forums: Index > Wiki discussion > Portable infoboxes

Hey guys :)

I don't know if you have been following some code developments we've been making lately with our new portable infoboxes, but we're at a stage now that we'd like to offer you something rather extraordinary.

During the next week, we're able to give you guys direct help from our engineering staff in migrating your current infoboxes over to the new portable infobox code. This will make infoboxes look great on both desktop and mobile. The latter is super important to MLP, as your mobile numbers are on the sharp rise. You gained a fairly impressive 40K unique mobile visitors last month. About a third of your traffic is now coming from mobile devices, representing about 300K uniques per month.

As things stand, though, your infoboxes don't work particularly well for those 300k. We think that, by working together with the engineering staff, we'll be able to deliver some example infoboxes that'll reach your mobile audience, and regularise the appearance of your infoboxes on desktop as well.

In order to provide these prototypes, members of staff that you probably don't know will need to make some changes to your MediaWiki:Wikia.css file, but only as regards infobox code. It'll be entirely apparent to anyone who reads the revision history just what's going on.

So whaddya say? Anybody have any objections to us just making you some samples?

Assuming your agreement, are there any features of the current infoboxes that absolutely, positively must be preserved? A couple of things I wonder about are:

  • changeable background colors for infobox headers — is this important to preserve, or would you rather go with a more standardised, high-contrast look that doesn't disadvantage the color blind?
  • preservation of tabs within infoboxes — I see that there have been previous discussions that have agreed the removal of tabs in infoboxes. Could we completely remove tabs and settle on what are the absolutely most important images to include in infoboxes like {{Infobox character}}?

Any and all comments are welcome! Hope to be hearing from you soon! — CzechOut @fandom 19:40, October 19, 2015 (UTC)

What I'm about to write is my opinion and mine alone, so I can't and don't speak for anyone else on the wiki, including any admins. That said, I'm of the opinion that different colors for character and song infoboxes are very important; character infoboxes more so. Song infoboxes generally have a color of the primary character singing the song, or of a color that is very predominant in the song's video or the thumbnail of the YouTube video of the song. Otherwise, the color just needs to feel right for the mood or the tone of the song. More important than song colors, is character colors. It is my opinion that the color of a character's infobox is very important. The main background color is usually their coat or (with the few human articles we have) skin color, and the text color is usually their mane/hair color, though these are sometimes switched if need be for contrast reasons. I'm not sure if eye color has ever been used. But the point is that character infobox colors should match the colors of the character themselves, and I think this is very important.
As for multiple tabs within an infobox, for characters, this is also somewhat important, but not as important, in my opinion. The multiple tabs are very useful on desktop browsing for quickly looking at all versions of a character, any temporary transformations they had, and any significant costumes or outfits they've worn. Or their human counterpart/alternate form, if applicable. If there was a way to keep these showing up on desktop browsers, but only show one or two primary images for mobile users, I think that would be best. Mobile users probably don't need or want/care to see so many different images of a character's appearances right at the top of a page. If they want to see that, they can use a real computer and not a cell phone. Mobile users are probably just seeking basic information about a character, or what episodes they've appeared in, or something basic. Those are my two cents, at the price of one cent per paragraph. Dogman15 (talk) 20:16, October 19, 2015 (UTC)
Hey there, I know this isn't my primary wikia, but I think I must share my opinion.
The Portuguese MLP Wikia had already tried use this kind of Infobox, but right now the conversion isn't making any progress due we found a big problem with this Infobox, We can't change its colors, I'd already report this to Macherie ana and she confirmed that this is a bit hard to do 'cause we need to add a code at the local CSS to apply one single color. This is the reason we didn't accepted this Info, though. However she promised that a update will be release in the future and will finally allow us change the Info's colors, and a discussion proved the users' preference for the custom colors Infoboxes. Once again, I know that I don't have any power here in this wiki, I'm just sharing what happened at the Portuguese MLP Wiki. Matheus Leonardo VSTF 20:26, October 19, 2015 (UTC)
I agree with the above. I asked on the CC PI thread earlier and was told it would be relatively easy to convert even our complex infoboxes to portable ones, but I haven't gotten a chance to try to start converting yet. Is it that it's not possible to change the colors at this point, or is it just preferred to standardize the color? I think colors are definitely very important on this wiki. There's also what Dogman said about having different content for desktop vs. mobile, because what they're looking for and how things should be formatted can be very different. From following CC, it sounds like there is still a lot of improvement to be done to portable infoboxes, and I'd like to be able to take advantage of all that rather than having to settle for a less fully featured template that has to be updated often. However, if you can create demo infoboxes and tests without changing how the wiki currently appears, I would definitely like to take advantage of the offer so that we can compare how things would look and have something to go off of (or use immediately in cases where it's a better solution). I'd prefer to preserve all of the appearance and behavior we currently have if possible. I also want to see what the code looks like and make sure it's still easily editable. I still think, though, that the best solution for us (possibly in general, though the extra effort would not be worthwhile for all wikis) would be to be able to specify completely different templates or layout for mobile users so that pages can be precisely customized for the best appearance there. ~Bobogoobo (talk) Lyra_speaks_S2E25.png 21:52, October 19, 2015 (UTC)
Well Bobo, I'm having a big discussion with Sannse about this right now, if you want I can post all the discussion later in a blog post. Matheus Leonardo VSTF 00:06, October 20, 2015 (UTC)
As a general note, editors here may be interested in a similar discussion on the Yu-Gi-Oh! wiki in which I also raised several concerns, and in my simultaneous efforts to convert our infobox metatemplate to PI. ディノ千?!? · ☎ Dinoguy1000 06:41, October 20, 2015 (UTC)
Perhaps we should start it slow with infoboxes that would not need any of their features sacrified, such as episode infoboxes. Then we could better see how they are functioning before deciding whether to expand it to more boxes. Vengir (talk) 06:57, October 20, 2015 (UTC)
I agree with Vengir, we should start slow, and for the rest o y'all, I posted the discussion I had with Sannse on Slack about the PI, and now I'm pretty sure that I didn't explore all the things the PI can offer when I converted one of the templates of Pt MLP Wiki into PI. Matheus Leonardo VSTF 09:51, October 20, 2015 (UTC)
A few months ago, I tried experimenting with a portable infobox in my wiki. The problem? It does not support any parameters that will change any colors very well. It does not function right. We know that every infoboxes used contain multiple parameters that will change colors regarding the body colors of a certain characters but portable infoboxes don't seem to support such parameters. The only way to place some color styles is by styling the infoboxes with CSS, and any CSS of coloring you embed will apply to all infoboxes used here. (I hope anyone gets what I mean.)
kBh6dCt.gifPinkgirl234 Sweet Treat 5DbANvV.png 14:48, October 20, 2015 (UTC)
Similar to what Bobogoobo said, I would only approve of converting the infoboxes if the core functionality of our current infoboxes is carried over and has the same functionality as before. I also approve of trying to be as mobile friendly as possible but losing out on the core functionality of the infoboxes to do this is a no from me. B0lGGoQ.gifOz   14:52, October 20, 2015 (UTC)
Well guys, I just want to let you know that I restarted the work in the PIs at pt.mlp wiki, and with the help of Sannse I could be able to change the colors of the episodes PI to the currency episodes info we use. Matheus Leonardo VSTF 21:38, October 21, 2015 (UTC)
Hey again guys :) I'm so glad this has led to a lot of discussion! Lemme suggest here that the goal is to provide you with a working example that you can compare to an existing infobox. So it would help us a lot if you could nominate a particular infobox you'd like to see us mockup. I'm thinking {{Infobox character}} because it's on more pages than any other and has a relatively large feature set. Any objection to that? — CzechOut @fandom 03:49, October 22, 2015 (UTC)
Makes sense to me. ~Bobogoobo (talk) Lyra_speaks_S2E25.png 03:58, October 22, 2015 (UTC)
I doubt the portable infoboxes will ever be feature-complete with our heavily customized infoboxes, so the best thing Wikia can offer is making the portable infoboxes more customizable so we can implement our changes ourselves. Throwy 16:48, October 28, 2015 (UTC)
Better no CzechOut, the Staffs and I are facing a terrible nightmare with the music template at Pt MLP Wiki, and the reason for all this headache in the custom headercolor; we're having a hard time to figure out how to make the headercolor works in css. I sugest you guys start with a more basic template.Matheus Leonardo VSTF 09:22, October 22, 2015 (UTC)
This might be the last update I'm doing in this forum for a long time, but it's an important one; I just had a discussion with Sannse about the problem with the headercolor in the music template, and that was her answer:
  • So I talked to an engineer, they said it's possible to do using inline styles. The problem is that doing that kinda takes away a large part of the good of changing over. The CSS is supposed to be on the .css page to help with the portability.
  • So his recommendation is to wait for now, there may be a solution in another version. They are constantly finding oddities in infoboxes and working on the code to incorporate them (or some, not every one is likely to get in, but this one is being looked at)
What does it means? It's possible change the headercolors the same way we do now, but it will be better if we wait for an update. Matheus Leonardo VSTF 21:54, October 22, 2015 (UTC)
Sorry for the necro, but I thought that you might be interested: the Polish wiki is now doing a live test of portable Infoboxes for episodes and songs. I've took this opportunity to update their looks a little, but with some more effort I could have made them look as closely to original as possible. We've sacrified the unique colors for song infoboxes in favor of unified colors for each season, which we also extended into episode infoboxes. Unless some mayor unfixable issue is brought up, we'll probably keep them.
    Later this month we might start working our way into character infoboxes. We would rather preserve the ability to have them in unique colors and we'll try to engineer our hack into doing just that without having to rely on the javascript.

PS: You might note that the YouTube player on Polish wiki looks different and loads with a delay — this is unrelated to the portable infoboxes. This was indeed done to improve mobile experience (not just on wikiamobile skin, but on Oasis and Monobook also) even before the conversion and these infoboxes should work even with the older Flash-based YouTube players. Vengir (talkcontributions) 11:50, December 19, 2015 (UTC)
Hey Vengir, I'm sure that you know that the Portuguese Wiki is also working with this new template style, and we already done a big progress in making our heavily original templates and the new portable ones look just like the same, at least the episodes template and other templates that doesn't have the custom headers, though looking at the templates you've made, they look so much better than ours, I was planning to share my experiences with this kind of template in this wiki in order to help everybody who want this, but maybe (if that's ok for you) we can share our experiences, learn with each other and try to figure out a code that allows every wikia has your own custom portable infobox; or in a more extreme case, allows all mlp wikias to have the same design of custom portable info. Matheus Leonardo VSTF 22:15, December 19, 2015 (UTC)
Sounds like a good idea – few wikis do any major alterations anyway – if they can do that, they shouldn't have problems modifying them to their needs (and we could always help with some specific cases). Migration of an already existing design is pretty simple, just some translation skills and somebody who has access to the CSS page editing.
    I guess you didn't want rounded mid-infobox headers (only the top title header). If so, then remove border-radius declaraion from .portable-infobox .pi-header – you've got .pi-title just for that (and I see you have included that too). During my today's development of character infobox I've successfully bypassed the custom article-level color problem. The infobox itself still needs further development before it's ready to be rolled out, but you can see the demo on my test wiki. Vengir (talkcontributions) 23:11, December 19, 2015 (UTC)
Hmm, I think we could use your theme method to solve the problem we're having with the music template at the Portuguese MLP Wiki, I'm going to make some test runs at the Brazilian EG Wiki (which is kinda my test wiki) and see how it fits. Matheus Leonardo VSTF 23:57, December 19, 2015 (UTC)
I've successfully converted the character infobox portable-ish (see the link I've put in last time). The appearance section in particular is hilariously bodged in together, but it actually seem to work. We'll test it further to ensure no major errors occur. This project was based on Polish character infoboxes specifically, also used by Portuguese and Russian wikis. Vengir (talkcontributions) 13:05, December 21, 2015 (UTC)
Congratulations for your success Vengir. I wasn't having much lucky with your code at my test wiki though, I'm gonna try a few shots with this new code and let you know about my progress. Matheus Leonardo VSTF 13:19, December 21, 2015 (UTC)
I saw your attempts. Here are the two important things to correct. First, when you place your CSS outside Wikia.css/Common.css, you need to import it first into that CSS. You can find the necessary import statement in Wikia.css on my test wiki. Alternatively just copy the entire CSS from the separate sheet directly into the main sheet (but keeping it separate will be cleaner). Secondly, change back the theme-source="character2" attribute back into theme="character". The theme-source attribute requires the user to specify the theme each time the template is called. This is useful when you need to make the infoboxes look slightly different depending on the season, group, etc., but you don't need it here. The theme attribute will give the infobox a specific theme chosen by the template developer. The CSS I wrote relies on the infobox having "character" set as the theme and thus should have theme="character" set in the opening infobox tag. Vengir (talkcontributions) 14:59, December 21, 2015 (UTC)
Well, the Portable Info I'm working with already looks way better than before, though there still a lot to do to make this info look way more better. Matheus Leonardo VSTF 22:47, December 21, 2015 (UTC)
Ah, yes, that LUA function. In Polish infoboxes we are holding each voice actor in a separate parameter and it's classifications in yet another… it was probably done to reduce the amount of wikitext/HTML the end user had to learn. I've build this LUA function to allow adding new actors infinitely without having to update the template whenever an arbitarily set limit is exceeded. However, it relies heavily on the way the parameter names are formatted, which means that it does need some serious rewriting to port outside Polish. If you don't need any of that functionality, you can just allow the users to input and format the list themselves (just like it's done here on English wiki). Vengir (talkcontributions) 23:18, December 21, 2015 (UTC)
Hey Ven, I just want to let you know that I just finished the work in my translation of your code for the character infobox, and it worked wonderfully as you can see here, but I still have one teensy-weensy-eensy doubt about it. Do you think it's possible use the same code that allows the character portable info change its header color into the music one? Matheus Leonardo VSTF 22:08, December 24, 2015 (UTC)
Yes, I think this idea can be extended into any infobox. It might need some additonal changes though. Or you can alternatively try using theme="character" in the song infobox directly. Vengir (talkcontributions) 22:17, December 24, 2015 (UTC)
Vengir, I'm happy to say that I finally managed to apply the custom header color in the Songs portable template, but the video section still a problem. Matheus Leonardo VSTF 16:24, December 29, 2015 (UTC)
The Youtube2 template requires a small bit of javascript to function properly. The version of the code used on Polish wiki was specifically written to only work in the main namespace (copy it from there if you don't mind such limitation), but here I'll show you a modified version that works in all namespaces (but not in the edit preview). I wrote it like that because HTML-5 players work faster in general and the old Flash is unsupported on mobile browsers. The link is there for wikiamobile skin users, who have neither Flash, nor site javascript enabled – so I would advise writing a link description for it. Remember about the changes in modifying wiki javascript introduced this year (code review, special preference option). Vengir (talkcontributions) 17:10, December 29, 2015 (UTC)
//Code for Template:Youtube2. Replaces specially marked YouTube links with embeeded videos. Intended as a successor to the outdated flash-based youtube tags.
while ($(".youtube-placeholderlink").size() > 0) {
    currentItem = $(".youtube-placeholderlink")[0];
    embeedId = $(currentItem).attr("data-id");
    $(currentItem).replaceWith('<iframe width="340" height="191" src="'+embeedId+'"frameborder="0" allowfullscreen></iframe>');
And it's done. All 3 infoboxes on Polish wiki are now portable, and we did that before we hit 2016! Now, there is a minor difference in Edge browser (which is a low priority, maybe I'll fix it one day) and some more in Internet Explorer (which I probably won't even bother to fix, even if it's for IE11), but Firefox and Chrome get it right. I did a little revision log in my sandbox. The current version is 1.0b – as you can see, I've already got something planned for 1.1., namely to properly rewrite a band-aid appearance section, but as of today, it seems to be working pretty much perfect (except the aforementioned Internet Explorer, where it's still perfectly readable, just a little less pretty). It was also quite bold change in terms of the design, but well, why not change it a bit if possible. Vengir (talkcontributions) 21:04, December 31, 2015 (UTC)
PS: A little higher Bobo expressed the desire to be able to specify different template layout for mobile and desktop skins. This is now possible. Whatever you put inside element with class="hidden" will not appear on mobile skin. If you want an element to only appear in mobile skin, add display:none as its style through CSS (inline style should also work). Vengir (talkcontributions) 21:17, December 31, 2015 (UTC)
Well Vengir, the js code you wrote is already alive at my test wiki, and it works wonderfully. And now I'm sure that I can start making the first test at the Portuguese MLP Wiki. Matheus Leonardo VSTF 23:46, January 1, 2016 (UTC)
Community content is available under CC-BY-SA unless otherwise noted.