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.
Local Continuous Integration Setup With Git Post-Commit Hook Script
I have lots unit tests, but I don’t have a Continuous Integration server setup, and I sometimes forget my tests are there.
I know. Bad me. I was up late last night getting some failing unit tests to pass again, after forgetting I even had unit tests. Ugh. This would have been much easier if I knew I’d broken a test when I broke it; as it was, I had to go back and try to remember what I was working on when they broke!
So, to stop that happening in the future, I fiddled around with my local repository and whipped up a script that automatically runs tests in the background, on a separate temporary cloned version of the repository.
If build or tests fail, I get a nice little Notification Center message which I can click to see a report and build log. Then I can fix it and amend the commit as necessary.
It’s a script that’s invoked by a Post-Commit git hook, and it’s run in the background using nohup so it doesn’t make me wait and mess with my workflow. It just all happens transparently in the background.
Here’s how I did it.
Read More »