I’ll be the first to admit that I get a little obsessed with projects that aren’t really going to improve my life all that much. Those projects can be fun to blog about, though, so I present you my brief obsession for this Sunday afternoon.
You may have noticed on this blog that some posts have header images, and some don’t, and that they get styled differently based on whether there’s an image or not. It pulls the header images from one of two places: the post thumbnail (which I can’t edit from MarsEdit) or the first image in the post content with a class of “headerimg”. As long as I’m blogging in MarsEdit (or TextMate for that matter), I’m stuck with the latter option. Because the whole header image deal is handled through PHP in my functions.php file, I can’t really preview how it’s going to look; rather, I get a header image stuck somewhere before, in or after my content. In TextMate, I have a little more “scriptability” at my disposal, and the previews I’ve created there are quite accurate. As far as I can tell, I can’t pre-process content before the template is generated, so I had to try something else… My solution, for now, is jQuery in the preview template. I load the jQuery library up top (inside the header) using Google’s Ajax API:
Then, at the bottom, I just start polling for an image with the right class to show up. I know it’s brute force, but this isn’t exactly public-facing, and it doesn’t seem to cause any hiccups in my writing. I have this right before my closing body tag:
I’m sharing this just to toss the idea out there, not because I think there’s anyone else with the exact same template setup as mine.
That lets me just select an image (or pending upload tag) and run the script to add the necessary class.