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:

<script type="text/javascript">
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*([^\\]]*)\\]((.|[\s\n])*?)\\[/' + 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 '+
               'class="wp-caption ' + (typeof(args.align) != 'undefined' ? args.align : '') + '" '+
               'style="width: ' + args.width + 'px;">' + content +
             '<p class="wp-caption-text">' + args.caption + '</p></div>';
  });
 
  return html;
}
</script>

…changed to ‘body’ tag to…

<body onload="watch_for_changes();">

…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.

Read More

Post Grabber sniffs out POST data, generates curl scripts

Post Grabber screenshotEvery 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.

A little utility I just put together does that for you: Post Grabber detects POST data and generates an equivalent “curl” command that can be used in shell or Automator scripts.

Post Grabber works with its own internal browser, so it can intercept POST submissions directly. That means it works with HTTPS, unlike the traditional web sniffer approach.

Download the app, or see the source on GitHub.

Read More

Introducing The Cartographer Clipper: Clip any website to Google My Maps

The Cartographer Clipper I’m pleased to present The Cartographer Clipper, the perfect accompaniment to The Cartographer!

The Clipper is a bookmarklet that works in any modern web browser, and lets you clip information from any website — hotel directories, restaurant websites, even forum postings — to Google My Maps. Addresses are auto-discovered via some super-sleuthing magic, images pulled out and any selected text is placed into the description.

You can save to an existing map, or create a new one on the spot.

It’s great for doing travel or errand research — find a good hostel (or just the closest Apple store!), just click the “Clipper” button, then “Save”, and it’ll appear on your maps in The Cartographer, all automatically.

It’s free for use, and all it needs is any modern web browser, and a Google account.

Install The Cartographer Clipper here.

It’s still in beta, so do let me know if you have any trouble!

Read More

Links for May 30th through August 8th

Links for May 30th through August 8th:

Read More

Keeping blog visitors by showing meaningful search results in WordPress

I recently became disgruntled with the way my blogs displayed search results. By default, WordPress blogs will show searched posts exactly as they might appear on an index or archives page: Typically as an extract, or perhaps even as the full entry.

This doesn’t help at all if you’re looking for something in particular – It’s a much better idea to show the post within the context of the search query, as real search engines do.

See it in practice here.

This is a fairly easy thing to actually get working in WordPress. It’ll take just a couple of minutes, and will make a big difference to blog visitors. Here’s how I did it.

Read More

DIY Twitter image hosting

Twitter doesn’t yet come with its own inline image support, so we tend to be limited to using image hosting services, and linking to them with short URLs. So, services like Tweetpic host the image, and we direct traffic to them in return.

Thinking it’s better to keep things in the family, and take better advantage of that traffic, I put together an image hosting setup of my own. Now viewers come to my own site, instead of someone else’s!

It looks like this

The setup consists of an Automator service, and some PHP smarts on the site.

Send Image to Image HostingUnder 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.

Here’s how it works – this assumes a moderate level of understanding of PHP and assorted web administration.

Read More

Links for June 3rd through June 18th

Links for June 3rd through June 18th:

Read More

Links for May 21st through June 2nd

Links for May 21st through June 2nd:

Read More