Fun with MarsEdit, part I

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:

<div markdown=0>

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>

</div>

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:

<div markdown=0>

<script>
function fixHeader() {
	if ($('img.headerimg').attr('src') != undefined) {
		headerImg = $('img.headerimg').removeClass('headerimg').remove();
		postThumb = $('.postthumb:first');
		headerImg.prependTo(postThumb);
		postThumb.addClass('hasimage').removeClass('noimage');
	}
}
setInterval(fixHeader,2000);
</script>

</div>

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.

In addition to having Javascript at my disposal, MarsEdit is also AppleScript-able. I haven’t looked very far into that yet, but I did whip up a quick script for adding the “headerimg” class to my images (because I always forget which class I assigned for this):

<div markdown=0>

tell application "MarsEdit"
	set selectionContents to selected text of document 1
	set {astid, AppleScript's text item delimiters} to {AppleScript's text item delimiters, "/>"}
	if selectionContents is not "" then
		set textToInsert to (text item 1 of selectionContents) & "class=\"headerimg\" />"
	end if
	set AppleScript's text item delimiters to astid
	set selected text of document 1 to textToInsert
end tell

</div>

That lets me just select an image (or pending upload tag) and run the script to add the necessary class.