Possessed by urge to (slightly) recode thingswithbits.info, now using Links and hCards (& inhumed the news). Not esp. productive today.
Tag Archives: Things With Bits
This morning I launched the website for the 2011 Touch&Play Festival. Still a bit to do, and content is still being added, but festival director Daniel Hayes and I are rather happy. You can read about it more on my design blog.
customised flowplayer in wordpress
Last year while working on dasniyasommer.de and dealing with presenting video in an attractive way with much backend flexibility, I found Flowplayer. It’s remained my favourite video player, though with doing all my projects at the moment in WordPress, I went through a struggle the last days with it.
On another project I did recently, bedrohtevoelker.de (a simple transfer into WordPress using a template to make updating content easier), I used FV WordPress Flowplayer, but like all the plugins, and all the other players I’ve seen, there was little or no possibility to customise the controller or other background aspect.
I’ve been working on bringing Daniel Jaber’s website into WordPress in the last week. The original site, hand-coded falls apart in three quite important areas. Firstly, being html it’s a pain to update. Secondly, the combination of site structure and function make it a pain to get video and images to work properly, and thirdly, it breaks in the standard browser that things break in.
I thought I’d begin by first uploading all the text content, using Blueprint CSS again, which I’m customising more and more with each project, formatting this, and the general site structure and layout, deal with the image overlays, and then move onto the accordion menu and perhaps AJAX-ing the page loading after I’d done the video. The last couple of days have been video.
Much searching and trialling of plugins led me to think it was not going to be easy to recreate the video player as I’d coded it using this approach, so I started to look for both another workable option, and a fallback (ugh) in case there wasn’t.
Hallo WordPress PHP Execution Plugin. Though I did try the highly downloaded Exec-PHP first, it only allows pages to be written in HTML mode, not so good for people who just want to upload content. PHP Execution semi-allows this. in Visual mode, the PHP sits behind an image, so doesn’t get converted into junk. The semi-part is that if you edit a page in Visual mode, it breaks, but there is a cludge-ish workaround.
I started first by following the original article, adding the Flowplayer code to my page template, to make sure it worked and where it broke, then transferring it into a test-page and seeing the same. In the end, very little went askew. The plugin handles indented code formatting without letting WordPress stick a p or br tag between every new line, and respecting for the most part spaces as spaces, and the occasional addition of \ escapes was all the extra I added.
The only place it really gets affected is a matter of styling, where any line breaks between divs and other html markup, i.e. the last lines which create the player and controller have a br added between. Running all these lines into one fixed that, and the css I used in the original layout largely carried across to the new site – though I cleaned it up a little and took advantage of some CSS3 rounded corners.
Once this was all done, I decided to add a little pleasure for Daniel while editing a project page. The standard PHP Execution plugin covers the code in a small purple-ish ‘PHP’ graphic. I thought it’d be nicer, as the idea is for him to do everything besides the video in visual mode, to replace that graphic with a corresponding one representing the splash image for the player. A couple of minutes in Photoshop and then changing a couple of lines in the plugin’s css and happiness ensued.
Oh and the code below, using the CodeColorer Plugin, which works fine from ecto also.
I’m watching WordPress install under the tessellated layers of windows open. I can see command lines march upwards, not quite enough visible to make sense, but familiar. In the meantime, some words.
I’ve been working on two quite big projects so far this year, both of which I’ve had rather vertiginous experiences of learning, occasional strings of days of coding and between moments of joy and sternum-pressing uhhh’s of small failures or slight blind terror at not knowing the outcome of my next irreversible click, between this all a slow plodding towards an arrangement of things.
Dasniya asked me to help with… mmm maybe to say an idea for a website, like sliding around a page, like for example in Google Maps. A while ago now, she asked me. We talked about ideas for how it might look and I said something like, “To me, your notebooks are far more interesting than any layout, so…”
I discovered jQuery. Well, I discovered Ariel Flesler’s plugins, jQuery.ScrollTo and jQuery.Preload. And jQuery, and the possibilities of which I dimly comprehend. I considered the CSS grid system, opted for a shakey… honestly I do have a sense of how it works, but am surprised every time I add another row or column, surprised it stays together on different browsers, surprised it wasn’t more trouble, surprised it seems to happily take amendments and alterations without collapsing, sometimes to smile when I can consistently cause it to implode and in making mistakes understand how it survives.
The idea was simple, to have everything on one sheet, like an architectural drawing with multiple views, and for the sheet to slide between each page or view, and in doing so pass over other pages, the background being gridpaper from a notebook. I think now there are six rows and nine columns, but maybe more. (On a Mac with two-finger scrolling it’s more fun, though jQuery is possible to give this in a click-drag fashion, something for me to work on yet).
jQuery also led to Flowplayer. There is an abundance of horrible Flash video players around, and when version 3.1 arrived with bandwidth detection and other amazing stuff, I was rather happy at my time already playing with it. I would love to have say, two weeks to learn it better, or even a week…
(something else to work on…)
So my current love for CSS, HTML, jQuery comes from these weeks of learning and playing.
Yes, I could have done it in Flash, likely more elegantly also, but for me I like the feeling of this precarious assembly of things, that I can feel, when I think over it, the threads and seams, where one piece is sewn to the next.
I’ve said little about the content, which has been equally entrancing… caused many smiles and happinesses… perhaps better to read and see and play than for me to include other words.
So, while still becoming itself, I think I shall go and enjoy it once more.