 | This post originally appeared on Community Central and was cross-posted with permission. |
A House of Portal Cards - but not all devices are welcome...
The majority of Wikia wikis have strong character coverage. This is well shown by the prominent character portals with colorful little cards going to the popular or prominent characters or content of the wiki's subject. These character portals are usually done using a template many are familiar with despite its broken status in the mobile view. This makes the content inaccessible to half the wiki's readership who may not see the content or any content at all because it lacks portability. Why is the code flawed and how could it be done better so that it works for mobile readers too?
The Problem: Tables not Good Design[]
This is (but not for long, hopefully) done usually using customised yet minimal variations of a table-based template commonly known as {{CharPortalAAA}}. This template has multiple tables with a hackish mix of wikitext and HTML - and coding flaws are a-dime-a-dozen with it. (Recently, the code has produced alignment issues, parsing issues and other flaws.)
There is one iteration of the template's code below, which has one MediaWiki table with another HTML table chucked inside, lots of nested div tags that are hard to follow and crushed width if there's more than four images - and that's at a glance (hit "show" to view, the code is unseemingly long):
Wish to sate your curiosity about the code? Click "show".
{| style="background:#000000; border:1px solid #black; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;-webkit-border-radius: 4px 4px 4px 4px;"
|- align="center"
|<div style="position:relative; height: 78px; width: 130px; ">
<div style="position: relative; top: 75px; left: 0px; width: 130px; overflow: hidden; line-height: 12px; z-index: 4; text-align: center;"><table cellspacing="0" cellpadding="1" style="background:#000000;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;" align="center"><tr><td> [[{{{articlename}}}|<font color=#FFFFFF size="1">'''{{{name}}}'''</font>]] </td></tr></table></div>
<div style="position: absolute; top: 0px; left: 0px; height: 78px; width: 130px; overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px; font-size: 130px; overflow: hidden; line-height: 130px; z-index: 3">[[{{{articlename}}}| ]]</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|130px|{{{articlename}}}]]</div>
</div></div>
|}
This template usually gets surreptitiously chucked in another table with each character card in each row. There's another problem with this - if there are five of these chucked in another table as cells as they usually are, a good 20 pixels of each image will be hidden away as 130px is what the template cards show and the row must fit the page which is what, 600 pixels max? And such a massive template is going to be pretty slow to load as well.
The Complication: Mobile Incompatibility[]
He may be dead but is he portable?
There is one massive reason to ditch this template and fast - Wikia have phased out massive table templates in the mobile skin because of their uneven look in mobile browsers and a lack of portability. This makes any articles that use it blank at worst and missing the cards at best. Its this kind of code that needs to be updated so that it can keep up with the times and with Wikia.
There are a large portion of mobile Wikia readers so they are a major design consideration. There isn't much point serving up content when there is broken or non-portable code that obstructs it all - or even makes the whole page invisible. This template is usually used because there isn't really a solution...but that's about to change.
The Solution: A Gallery Template[]
I've written a decent solution that takes something that's meant to act as a true character portal and customises it to match the appearance of the original template - the Wikia gallery tag. I've named it {{PortalAAA}} in irony and will suggest that you ditch the above template for it. Its time to embrace the future and portability is part of that.
The gallery character portal needs three things, not including some nice character articles that can be linked to (lol).
- the base template which is linked here.
- some nice portrait images of characters at 145px width and 85px height.
- the CSS code in this thread.
The template shows the portrait images, links to the articles and is viewable even in the mobile skin. Thus, it is a good template for character pages and mainpages if need be.
This is the core template code - remember to update the colors to your wiki's skin or to your liking. This code is a gift, feel free to use and cite as and if you wish:
{{#tag:gallery
|{{{gallery}}}
|orientation=landscape
|position=center
|captionalign=center
|captionposition=within
|widths=120px
|columns=5
|bordercolor=#000
|captiontextcolor=#FFF
|bordersize=medium
|spacing=small
|hideaddbutton=true
|navigation=true
}}
<- change the bordercolor and captiontext color to the color scheme of the wiki
Here is the CSS to approximate the visual design of the original template:
.portal .wikia-gallery { margin: 0 0 12px 0; }
.portal .wikia-gallery-item { padding: 2px !important; }
.portal .gallery-image-wrapper { height:103px !important; }
.portal .thumb { height:104px !important;}
.portal .lightbox-caption { padding:1px !important; font-weight:bold; }
I appreciate that the use of !important isn't as optimal as it should be but there is inline gallery styling to override. The reassurance is that the mobile skin will ignore this code and there is no color scheme to worry about on the mobile skin as well.
The template code is used like so:
{{PortalAAA|gallery=
Filename.png{{!}}link=Articlename{{!}}Caption
}}
e.g:
{{PortalAAA|gallery=
JohnDoeP.png{{!}}link=John Doe{{!}}John
JaneDoeP.png{{!}}link=Jane Doe{{!}}Jane
}}
Feel free to link to this blog or the original template on my home wiki when you port it, but if not then knock yourself out with this sweet template and don't bother. :D
| The gallery template in action: | To request improvements or help: |
|---|---|
|
NB: The template does not support nesting the caption in the corner of the image without further CSS modification of the caption. This modification is possible despite requiring manual adjustment to all the CSS code involved.