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.
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:
…changed to ‘body’ tag to…
…And wrapped a div around the main “#body#, #extended#” content with an
id
ofcontent
: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.