Apologies for everybody who saw this post before it was fully baked. I was testing the style for the iG-Syntax Hiliter plugin. Seems to be working okay, and even though I can tweak the options under the appropriate tab in my admin panel, I think there’s some other page I can use to tweak specific settings (as the plugin comes with a set of images that I don’t see surfaced anywhere). No matter, the plugin came in handy here – and will definitely be used again in future code displays.

I hate big-ass blog headers. The first thing I do when I see a gigantic image sitting front an center on a Web page is flick my scroll wheel to move down to the meat of the page. Yes, they can be aesthetically pleasing – but they can also be a gigantic waste of space. As such, I haven’t really ever had an interesting blog header. My most recent design (admittedly limited due to the overly-complicated template design of BlogWare’s system) had all the important and relevant information sitting there. You know who I am, right? This time, I wanted to do something a bit more dynamic – a bit more interesting. To get what I wanted, I needed to slap two few tools together: a simple photo thumbnail repository engine and a syndication format interpreter.

I’ve been looking around for a great RSS plugin for WordPress, and still can’t find anything close to satisfactory (read: configurable, powerful). I’ve been a registered CaRP user for years, and (what do you know) it also happens to be a PHP script. I’ve gotta convince Antone to turn CaRP into a full-blown WordPress plugin, though it has abolutely no UI to begin with. I know how to use CaRP, I’m learning how to work within WordPress, and I know just about enough PHP to tweak what I need to tweak in a script.

You’ve seen a few images show up inline in recent days, having been posted through email via the Postie plugin. It’s not generating thumbnails (or RSS, let alone an album), so I’m turning to my friend Flickr. Unfortunately, it only outputs 8 square thumbnail images per feed pull (and I really wanted 10). No matter, Flickr and CaRP have helped me get the job done. For CaRP, I’m employing these options:

[php]CarpConf(‘cborder’,”);
CarpConf(‘iorder’,'image’);
CarpConf(‘maxitems’,12);
CarpConf(‘bitems’,’

‘);
CarpCacheShow(‘http://www.flickr.com/services/feeds/photos_public.gne?id=49503157467@N01&format=rss_200′);[/php]

Of course, now I needed to define the CSS. Putting the images there (alone) is nifty enough, but I’m the kind of guy who loves combining fun with functionality. My name needs to be there, but I’m still not sold on slapping up a tagline in that position. As a visitor, I’d expect to click the name to return to the root of this site – so it had to be hyperlinked. Cake. Almost. I ran into some issues with positioning of my small nav icons, but (amazingly enough) the code works in both browsers. I think I’m the only blogger who optimizes his pages for IE, though? Anyway, here’s the CSS:

[css].headertext { font: 75px Georgia; left: 0px; position: absolute; text-decoration: none; }
.headertext a, .headertext a:hover { color: #FFFFFF; text-decoration: none; }
.headerwrapper { left: 50px; position: absolute; top: 15px; }
.headerwrapper img { border: 0px; float: left; margin: 0px; padding: 0px; }[/css]

The result is what you see at the top of my blog. As I upload a new image, the older ones will get pushed off to the right (and eventually pushed out altogether). Been looking for a way to rip 10+ images out of my feed without futzing with the API. Anyway, it’s there now – and you’re more than welcome to take this code and do it on your site, too (although you’ll have to adapt the PHP script if you don’t use CaRP). That should be easy enough to do, even if you have to work backwards from the source of any given page here.

New Flickr Photo Header