Supporting WordPress shortcodes and captions in MarsEdit preview
I noticed that WordPress these days uses a shortcode to define image captions, of the form:
[caption id="" align="aligncenter" width="630" caption="Image title goes here"]<img src="http://domain.com/imgpath/../image.jpg" width="630" height="420" />[/caption]
I’ve recently redone our blog template at Technomadics, and while setting up the new preview template in MarsEdit, thought I’d take a stab at implementing support for captions, too, via some javascript in the template.
I was successful! Here’s how I did it:
Added the following to the “head” section:
var prior_content; function watch_for_changes() { var check = function() { var elt = document.getElementById('content'); if ( elt.innerHTML != prior_content ) { elt.innerHTML = apply_filters(elt.innerHTML); prior_content = elt.innerHTML; } setTimeout(check, 100); }; setTimeout(check, 100); } function apply_shortcode(source, name, callback) { return source.replace(new RegExp('\[' + name + '\s*([^\]]*)\]((.|[sn])*?)\[/' + name + '\]', 'g'), function(match, paramString, content) { params = new Object(); reg = /([a-z]+)="((:?="[^"]+"|[^"])*)"/gi; while ( (match = reg.exec(paramString)) != null ) { params[match[1]] = match[2]; } return callback(params, content); }); } function apply_filters(html) { html = apply_shortcode(html, "caption", function(args, content) { return '<div>' + content + '<p class="wp-caption-text">' + args.caption + '</p></div>'; }); return html; } |
…changed to ‘body’ tag to…
…And wrapped a div around the main “#body#, #extended#” content with an id of content:
<div id="content"> #body# #extended# </div> |
Basically, it polls the content area for changes, and when triggered, runs it though a filter. The above is extensible, and by adding additional “apply_shortcode” calls from “apply_filters“, more shortcodes can be simulated.
Every now and then I find myself needing to automate some web requests, either to download using something a little more robust than a web browser, scrape some web content, or to maintain a session. That automation can be a bit of a pain if there’s a form submission involved, because it means opening up the page source, finding the form and any connected javascript code, and figuring out what fields are submitted.
Under Snow Leopard, I can right-click on an image in Finder, click ‘Send Image to Image Hosting’, type in a title, then paste the URL that’s automatically been put onto my clipboard into a tweet.