Supporting WordPress shortcodes and captions in MarsEdit preview Supporting WordPress shortcodes and captions in MarsEdit preview
  • Home
  • Posts
  • Home
  • Posts

Web

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>

<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();">

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

<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:

  • cufón – fonts for the people A very impressive framework that embeds any font into a website, via javascript and the canvas element. Great cross-browser support.
  • mikeash.com: Method Replacement for Fun and Profit Method replacement and method swizzling in Objective-C.
  • Core Data Tutorial: How To Use NSFetchedResultsController | Ray Wenderlich
  • TwitThis – Use Multiple Twitter Clients on your iPhone Application The class TwitterClientManager loads a list list of supported Twitter clients is loaded from a plist file, which can be extended to support more clients in the future;
    Each Twitter client is represented by an instance of the TwitterClient class;
    The user can choose his preferred Twitter client at any time, and launch the application by a simple touch; the TwitterClientManager class stores the selected value in the user settings.
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:

  • Ten logo design tips from the field | Logo Design Love
  • 10 astonishing CSS hacks and techniques
  • Adaptive CSS-Layouts: New Era In Fluid Layouts? effective techniques to create 100%-functional adaptive CSS-layouts
  • WordPress Theme Development Frameworks If you build and develop WordPress themes often, you will probably be fed up of all the repetitive code writing, the constantly checking of your mark-up and all you really want to do is focus on the design and the project-specific features. The answer is a WordPress development framework
  • How to Draw Pixel-Perfect iPhone Toolbar Icons Using OmniGraffle
Read More

Links for May 21st through June 2nd

Links for May 21st through June 2nd:

  • 49 Decent Virtual Assistant & Personal Outsourcing Resources
  • PHP: Display Adobe PSD files on a web page "Any webdesigner know the PSD filetype, which is the Adobe Photoshop format. PSDs have a lot of great features, as such as layers, but they can’t being read by a browser. Unless you use this great PHP class!"
  • Iconfinder – Icon Search Made Easy
  • Typetester – Compare fonts for the screen
  • KNAppGuide KNAppGuide is a Cocoa framework for embedding “guides” into your application, visually inspired by Apple Guide from the System 7 and 8 era
Read More

Hi! I'm Michael Tyson, and I run A Tasty Pixel from our home in the hills of Melbourne, Australia. I occasionally write on a variety of technology and software development topics. I've also spent 3.5-years travelling around Europe in a motorhome.

I make Loopy, the live-looper for iOS, Audiobus, the app-to-app audio platform, and Samplebot, a sampler and sequencer app for iOS.

Follow me on Twitter.

Posts navigation

1 2 … 4 »
© 2021 A Tasty Pixel.