Changes at the top of the page

More or less since we moved this site from being a con­ven­tion­al sta­t­ic web site to a Word­Press envi­ron­ment based around the The­sis meta-theme, the head­er image has been ran­dom­ly select­ed: each time you vis­it­ed the site, you would see a dif­fer­ent image.

This is actu­al­ly very easy to do — there is a tuto­r­i­al here — and it’s worked well. How­ev­er, the oth­er day I thought it would be rather neat for the head­er to con­sist of essen­tial­ly a slideshow of the avail­able images, gen­tly crossfading.

One of the neat things about Word­Press is that there are a great many plu­g­ins out there, many of them free, which you can locate to do things like this. For the Radio Riel site, I used a plu­g­in called the Smart Slideshow Wid­get, for exam­ple (it replaced a rather fid­dly flash slideshow that I used on the old RR site). The wid­get appears in the left side­bar to dis­play a con­tin­u­ous and ran­dom­ly-rotat­ing set of logos for the sta­tion’s spon­sors. How­ev­er, this sys­tem only pro­vides a wid­get: you can’t use it for a head­er image.

Go and search Word­Press plu­g­ins for slideshows and you will find a great many, but most of them are a lot clev­er­er than I want­ed. I just want­ed to be able to stuff a set of images in a fold­er and have them dis­play for a set peri­od and cross­fade over a set time. I def­i­nite­ly want­ed to avoid flash (if I did­n’t, I already have the tools to cre­ate flash slideshows, but flash is… a pain). This left me essen­tial­ly with Javascript as the way to do the cross­fad­ing, and JQuery (already run­ning on this site) or one of the oth­er libraries will do that and lots more.

Many of the slideshow sys­tems used the stan­dard Word­Press media upload sys­tem, which again was rather more than I need­ed. I start­ed to install one of them and noticed that it messed with the Fea­tured Image fea­ture of Word­Press. This rather warned me off, as I am already mess­ing with the Fea­tured Image capa­bil­i­ty to get it to work with The­sis — I’m using Word­Press Fea­tured Image for The­sis Theme from The­sis­tut, and I did­n’t want to mess that up. And any­way, it was more com­pli­cat­ed than I needed.

I final­ly found what I was look­ing for in the form of Cimy Head­er Image Rota­tor from Mar­co Cim­mi­no. The plu­g­in gives you some use­ful dis­play options, such as a “Ken Burns Effect” instead of a sim­ple cross­fade — that’s the ros­trum cam­era effect used exten­sive­ly by film-mak­er Ken Burns, notably in his land­mark series The Civ­il War (and now appar­ent­ly a require­ment for any PBS doc­u­men­tary), where rather than sim­ply dis­play a sta­t­ic image, you gen­tly zoom in on it. The plu­g­in also lets you include a cap­tion and a link — either for all the images or for each.

The plu­g­in has an upload fold­er (and you can actu­al­ly upload addi­tion­al files right in the plu­g­in, which was a bonus) and once you’ve defined the para­me­ters you get a bit of code to copy and paste into the appro­pri­ate The­sis hook (if you’re using The­sis), in my case the hook after the head­er. I replaced the exist­ing ran­dom sta­t­ic head­er code with the new piece and it worked straight away.

Of course I want­ed to tweak it a bit. I need­ed to change the size and posi­tion of the head­er image pan­el a lit­tle, which was easy, and want­ed to alter the way the cap­tions were dis­played. The default is a lit­tle black lozenge (aka a round-cor­nered box) at the cen­tre bot­tom of the image with the text in white. I tried drop­ping the lozenge and using a CSS drop shad­ow in black behind the text to pop the cap­tion out of the image, whether it was dark or light, but the drop shad­ow was­n’t strong enough to do the job on real­ly pale back­grounds. Even­tu­al­ly I low­ered the cap­tion to just under the image and made it black.

More tricky (and unsolved cur­rent­ly), I want­ed to move the cap­tion to be ranged left  rather than cen­tred. Unfor­tu­nate­ly, the cap­tion is posi­tioned with respect to the entire brows­er win­dow, and I have the page cen­tred in the win­dow so if you enlarge the win­dow you get more air around the page equal­ly on either side. This is fine if the cap­tion is cen­tred, but if it isn’t, you can’t define the loca­tion of the cap­tion rel­a­tive to the image. I will sort this out anoth­er day. In the mean­time, enjoy the pics.