Use the following template for a nicely presented post:
{{Forum post|Write your message here!|~~~~}}
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 <br /> tag. Citations leave a string of garbage in the output so I had to strip them out, which is why anything after a "<" 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
- 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.
- 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.
- 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.
- 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.
- With a few minor adjustments, I got it to work in he monobook skin also. Append "?useskin=monobook" to any wiki URL to see what the page looks like in Monobook. Append "?useskin=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.
- 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.
- Tabbers are reported to work with the new infoboxes, but I haven't tried one yet.
- 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.
- 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.
- 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.
- 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.
- 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?
I prefer the old-style infobox, but then, I dislike change at the best of times, so eh. It looks better in the Mobile skin at least.
Shouldn't the image be fixed to the specified size? Most are set at 250 pixels (the max size of the old infobox, and this should stay as a grandfathered default). I'd hope that image size can be specified and kept constant in the new infobox. Automatically shrinking or blowing up the image will appear very untidy across different pages, and very small images will look awful if expanded like this.
I tried putting in a really huge image (File:Map - Faerun - 3E.jpg) and a really small image (File:AL-Qadim Expert.png) and the new infobox took both in stride. It did not stretch the smaller image to fit the box. On the other hand, I'm not sure we could make it bigger even if we wanted to, without going into the CSS to do it. The "active viewing area" seems to be a few pixels wider in the new box, which is why images seem a bit bigger (subject to the H vs W note I made above).
Wikia makes the new infoboxes take up the whole screen when viewed on a mobile device I think. I can see it when I use the Mobile Preview button in the editor. I wouldn't worry about screen shots, it is what it is and we don't have much control over it, except to use the new infobox scheme.
I checked on an actual mobile device – well, my Android pad – and the new infobox is much better than the old. Well, anything's better than the old mobile-skin infobox, so eh. But logging out only showed me the Oasis skin in the Android browser, so I imagine anything pad- or tablet-sized will work like a desktop PC as far as wiki skins go for anonymous users. Actual mobiles or Apple devices might work differently.
In the mobile skin, the image is resized to its maximum horizontal width to fit the orientation of the screen. On a vertical screen, the longsword image looks fine. But on a horizontal image, it's blown up huge, the low resolution is revealed, and the bottom is cut off, as it is actually bigger than the page can show until the infobox is shown in full. It also seems to distort the page when the infobox is shrunk again. The image weirdness is my biggest concern with the new infobox. The image shouldn't be blown up past its size or the borders of the screen. But maybe that depends on Wikia people.
Jandor: Welcome back!
[[Image:]] link instead of a [[File:]] link for the image parameter in the infobox. I'm not sure why this is yet, I'm waiting to hear an official response to my forum post at Community Central. I will let you folks know as soon as I do.
Good news! The Powers That Be have been listening and I believe a fix for the problem will happen on Thursday (2015-09-10). I would hold off on firing up the bots until after we see if that takes care of everything. Apparently the [[Image:]] tag is deprecated but still supported, so they just have to add it to their filter and Images will come through like Files do now. Please stand by for further developments.
Ahhh, so this is the reason for the vanishing images... thanks, Movie :)
But it's an annoying problem for another reason: clicking on the image in the updated template will bring up a full-page image, not the details page for the image. For example, for the {{Book}} template at "Summer in the City", clicking on the image will show only the expanded image, not File:ADDcomic33.jpg. For the {{Item}} template at Ilbratha, clicking the image shows the full image, not File:Ilbratha-Dragon407.jpg. Instead, you need to edit the page, copy the filename, and search for File:filename. That's very inconvenient when trying to view or update image details.
var portbox = document.getElementsByClassName("portable-infobox");
if (portbox.length > 0) {
var list = portbox[0].getElementsByTagName("FIGURE");
var i;
for (i = 0; i < list.length; i++) {
list[i].className += " article-thumb show-info-icon";
var img = list[i].getElementsByTagName("IMG")[0];
img.className += " thumbimage";
var node = document.createElement("A");
node.href = "/wiki/File:" + img.getAttribute("data-image-name");
node.className = "sprite info-icon";
if (list[i].getElementsByTagName("FIGCAPTION").length <= 0) {
list[i].appendChild(document.createElement("FIGCAPTION"));
}
list[i].getElementsByTagName("FIGCAPTION")[0].appendChild(node);
}
}
and the following to your User:BadCatMan/monobook.css file:
.sprite.info-icon{
background-position:-1227px 0;
height:18px;
width:18px;
}
.sprite{
background-color:transparent;
background-image:url(http://slot1.images.wikia.nocookie.net/__cb1441875458/common/skins/shared/images/sprite.png);
background-repeat:no-repeat
}
.article-thumb.show-info-icon .info-icon {
margin-right: 0;
}Once you do this, images that are contained in the new portable infoboxes will have an "info icon" (an i inside a circle) that appears in the lower right corner of the image when you hover your mouse over it. Click the icon and voila, you are taken to the File: page for that image. Does that give you back the capability you lost? This is a mashup of old techniques that I hope will continue to be supported. My code is probably held together by bubble gum and bailing wire, but it works! Try it out and let me know if you have any problems.
I like seeing all edition info at once, so I vote no. {{Spell}} is one of our more complex infoboxes and will be one of the last to be converted, so we have plenty of time to decide.
Okay, let me know when you want me to put UnseenServantBot to work and the changes to make. There's also User:Jandor's StoneGolemBot.
If I can automate it (and trust it do the right thing!), I can run it any time, which is easier with simple changes. Semi-automated and manual changes are more time-consuming (though faster than editing directly through the webpages). We can discuss time-zones and hours if it comes to it.
As a separate issue, the style of the tabber is completely different than a normal tabber outside an infobox. I have kludged up some CSS to make it look like the original style, so I'd like to hear opinions on that also. See this demo page for examples. Yes, I know Orc is not a class, it was just a convenient cut and paste.