My third site for the month, with another finished this morning which I shall announce shortly, and another due end-of-month-ish, makes this the most keyboard-mashing few weeks I think I’ve ever had.
So, kitaonline.com is not a place where parents hand over their young children (though there is a number of the ankle-dwellers downstairs), it’s the Kleine Internationale Theater Agentur, who translate theatre works and do sub- and surtitles for performances; vaguely the same people who are also TEATRIS and Alte-Kantine Wedding, who reside downstairs in the old Uferhallen BVG Kantine, and whom I’ve helped out for their other two websites, as well as rehearsed/performed/taught with Dasniya there.
This site we began earlier in the year, with the idea for a “very simple site” which also had a table of all the projects they’ve done and all this in several languages. Lucky I’d a) done multilingual before and b) had been messing around seriously in DataTables so I was like a child waving around a something sharp with no idea of its sliciness, but wanting to find out.
Another kind of sliciness is WordPress (“used by 17% of the interwebz!”) and its multilingual support. Lack thereof, that is. Yes, it is well-fine internationalised, and swapping between individual languages is more-or-less basic, and it does each language very well, but two at the same time? Let alone seven. For a long time there’s only been one good free plugin, qTranslate, which I used to use without fail, and despite its shortcomings is very nice, light, fits in with the simplicity of the WordPress ethos. Shortcomings though. Like breaking on every WP update, and finally earlier this year with WP3.5 rendered useable only through some long hours of patching, which ultimately threw me into the maw of WPML. Which I can now say I can make work with everything I regularly use.
KITA, then. Where to begin? I started on the bones of WordPress’ TwentyTwelve theme. Just a habit, really, because I don’t want to have to endlessly write those bones, and also because I know if something doesn’t work, it’s not one of the fundamentals where to “doesn’t work” lies. Anyway, by the time I’m finished, there isn’t much of the original left. I’ve started using CodeBox to manage all my snippets (gah! I even downloaded Git the other night) earlier in the year, and it makes getting all the basics up and running a splendidly quick process (better than hacking around in a half-remembered project looking for the bit that does that something … umm what was it? … ). Of that original theme, I kept some of the basic styling and layout, and very tasty “responsive menu”, the one that for small screens swaps into a dropdown list, which ended up being massively useful.
That was for the gallery page. Oh yes, once again, Supersized. I’ve no idea how many times I’ve used this plugin for full-screen galleries, and now that I combine it with ACF’s Gallery Add-On, (and Genericons) I’ve got this well sorted. Only problem was long menu creeping all over nice images. So I rewrote some of the code for the responsive menu, and set it to work for the gallery page no matter what size the screen, and rolled the languages menu into it also.
Anyway, all this is just a nice diversion for what KITA is really about. DataTables! I love this plugin. It’s one of those ones that reward you the more you learn it, it’s insanely powerful for pulling chunks of data and spitting it out in a table which you can then do all kinds of stuff with. And getting Advanced Custom Fields to be the base for this is such a good way to do it.
The idea is each performance KITA has translated can be seen in the table, which can be searched and sorted. They’ve done hundreds of works in the last decade, so that’s a large mass of data to deal with (and I probably should have AJAXed the table but Ajax is what you clean baths with), so I spend some time pondering how to make it easy to add new projects and from that easy to disgorge it into the table.
It ended up being that each project is a separate sub-page (basically a bucket to hold the data and not really a page you’d go and visit) of the original language project page, What we did, with all the info going into ACF custom fields, and the seasons for each project are separate repeating fields. A Date field for the final performance filters whether a project will appear under ‘Current Performances’ or only on the projects table – yes, same data, in one place formatted as a nice line of text, in the other as a row in a table – and another field to declare what the Artist column should be sorted by.
At the other side, what you see uses a couple of the DataTables plugins: Fixed Columns, and Column Visibility; and then 300 or so lines of jQuery to do the fancy stuff. Lots of little things like taking the hash from an URL and putting it in the search field, sorting the artists based on that hidden field (because obviously sorting by ‘last name’ doesn’t work when there’s three names or only one and it’s the name of the company and as many exceptions to the ‘last name’ as there are names), removing ‘the, der, die, das, la, le, les…’ from the works’ titles for reordering the columns; responsive hiding or showing of columns based on browser width’ highlighting search terms; translations of all the non-data parts of the table; and everything that appears when it loads for the first time. Yes, code-y excitement.
What else? The address info is formatted using microformats hCard and Schema, which means it can be snagged as an Address Book card right off the page, (as well as being all semantic, y’all. Getting it to validate though, hawhaw, most amusing!. Probably should not try and jam the two formats together, no?) Using webfontloader for the fonts, lettering.js to make the title look nice (released under the excellent WTFPL). And it’s responsive! (Well, it tries to be.)
So, KITA — Kleine Internationale Theater Agentur is alive.
