As you may have noticed, a couple of posts showed up over night, the last few in the rather wee hours of the morning. This was the byproduct of my discovering another new WordPress plugin a couple hours ago, called Postie.

Postie is a plugin designed to make it easier to post entries by email, which can potentially (such as in my case) come from a cell phone with images attached. It has a lot of cool features like letting you specify the tags for new posts (something I can’t do when posting through Flickr), as well as automatic thumbnail creation, the ability to rotate the picture by requesting it from the phone, and a bunch of other nice touches.

For the short term, I’m going to be giving Postie a try for moblogging, instead of using Flickr like I have in the past. The only noticeable change to you, the reader, is that the template is slightly different, and there is not (for the time being) a gallery of all the past moblog photos in one place. (Previously you could visit my photostream on Flickr)

Not to worry. You can already view the most recent posts by using the Categories feature of WordPress, located on the right side of the page. Head on over to Moblog (or click on “Moblog” at the header of this post) to see all recent mobile posts. These categories are automatically updated when new posts are made.

Of course, you know me… I’m not having fun until I’m sifting through the code to figure out what makes it tick, and adding my own little tweaks and modifications. So over the past couple hours I made a few little changes that other WordPress users might be interested in. For most other ordinary people, consider this your forewarning that this post is about to degenerate into code samples 🙂

One thing I really wanted from Postie was the ability to automatically add the necessary HTML code to activate SmartBox on the images I post from my phone. This also led me to getting rid of the JavaScript call for popping up a new window when clicking on a thumbnail. I ended up solving these features by making both of them optional, and adding appropriate configuration options to config_form.php. You can add these features by making the following changes:

In postie-functions.php, around line 396, replace the original

if ($thumbImage) {
. . .
}

block with the following code:

if ($thumbImage) {
    $marime=DetermineImageSize($file);
    $marimex=$marime[0]+20;
    $marimey=$marime[1]+20;
    //Edit: Removed $mimeTag, as I don't really need that cluttering up
    // my posts unless something goes wrong.
    $newAttachment = '
ctype_parameters['name'] . '"';
    }
    $newAttachment .= '>
' . "n";
    $attachments["html"][] .= $newAttachment;
    if ($cid) {
        $attachments["cids"][$cid] = array($config["URLPHOTOSDIR"]
            . $fullImage,count($attachments["html"]) - 1);
    }
}

Then, around line 1785, add these two lines, to set defaults for the new config options:

    if (!isset($config["USE_POPUP"])) { $config["USE_POPUP"] = true; }
    if (!isset($config["USE_LIGHTBOX"])) { $config["USE_LIGHTBOX"] = false; }

Finally, in config_form.php, you need to add these two entries. I like them around line 233.

One of the cool things about trying new open source software is having the opportunity to tinker with it when things don’t work quite the way you like, or quite the way that you would have done them. This week, I installed a WordPress blog and spent a couple hours playing with various features and community-written plugins. One of my instant favorites is a plugin called LightBox, which displays large versions of your images in a DHTML overlay when a visitor with a compatible browser clicks on a link to an image. You can see it in use in other posts on this page, though I have not had time to update my blog archives for using it just yet.

Colin, I’m already bored! Show me something cool or shut up already!… Ok, fine, go here.

A while after discovering LightBox and getting it installed, I discovered LiteBox, a derivative based on the moo.fx library and prototype.lite. I soon switched over to this, to save on download time.

But then I found a few things to nitpick. For one, if you link to a really big image, say, a 1280×1024 screenshot, the lightbox dutifully expands to 1280×1024 pixels, but this shoves the all-important “Close” button way off the bottom right edge of your screen. Seeing pretty pictures pop up over the blog is cool. Scrolling around looking for the button to get rid of them is not.

Another annoyance for me, was that I post a fair number of pictures from my cameraphone via Flickr’s email 2 blog feature, via Verizon’s PIX messaging to email addresses. This works quite well, but only puts a smallish 240px preview into my blog. I attempted to edit Flickr’s blog layout to access the 500px version that I know exists, but for whatever reasons, this does not work for me. Flickr tops out at providing a 240px thumbnail. Not bad, but I just don’t like having you, my fair reader, leave my site to view a bigger version of the pictures I post (assuming you even do). It feels like a discontinuity.

So a bit last night, and more this afternoon, I sat down and hammered out my own release of the LiteBox plugin. I call it “SmartBox”, and it pretty handily resolves these issues. You can see it in use here on my blog. Try clicking on a picture like one of the fountaincam snapshots, just to see the lightbox effect as originally intended.

Now, take a look at any picture posted from Flickr, such as my Grandma’s Strawberry Jam. If you mouseover the thumbnail, you’ll see the link heading off to flickr-land to view the full size image there. But try clicking on it, and up pops a 500px larger version, instead of directing you to Flickr’s website. Very nice. The link, if you check again, has been dynamically rewritten to point to a bigger copy of the image that Flickr for some reason won’t just post automatically for me.

Finally, take a look at these two examples: If you follow this link: Waterfall near Medford, OR (no lightbox) you’ll see a tall, narrow image that is almost certainly taller than your browser window. With the old LiteBox, that would have popped up full size when clicking on a LiteBox-enabled link. That would be annoying. So would following this link: Crater Lake Edge (no lightbox), a short but very wide image. Note: your browser may resize the image for you: hover your mouse over it and look for a zooming cursor (Firefox) or an “expand” button (IE6) to see that the image is actually pretty large.

Instead, try these new SmartBox-enabled links, which automatically scale the image size to fit:

Waterfall

Crater Lake Edge

For extra fun, try resizing your browser window (maximize it, for example), and click those again. Fancy.

Nice, yes?

If you have a WordPress blog and are interested in using this on your own site, you are more than welcome to. I have done my best to package a WordPress plugin. The most I can say at the moment (with zero other testers) is that it works for me, with WordPress 2.1.3. Pay attention to the readme file for installation and set up instructions.

You can obtain the plugin by downloading this ZIP package and extracting it into your WordPress plugins directory: smartbox-0.3.zip
Or, by checking out the code from subversion:
svn co http://svn.mccambridge.org/smartbox