I have been trying to have images run some javascript when clicked on my blog, normally simple enough but difficult when using the otherwise great editor, MarsEdit, as your blog tool.
After a log of playing I finally worked out to make this work…
I eventually worked out that the media chooser will only accept valid HTML, everything else is wiped. This meant my only way to add javascript was to put some text in the macro to be replaced on page publish, again this was slightly problematic as it had to be within a HTML tag that I needed for the actual image.
I went with the class tag and I look for a keyword.
class=”highslide” onclick=’return hs.expand(this, {slideshowGroup: 1 })’
In that way the IMG_REPLACE_ME section becomes the javascript text I want to include. As class is known by MarsEdit for images it allows me to add this into an image template, I don’t have to go near the HTML to edit the posts (my goal!)
For the text change I am using the Simple Text Replace plugin, there other others that work at runtime but I wanted to update the entry as it is written into the database, not take the performance hit of a regular expression scan every time I loaded a page.
Finding the correct regex ended up being a major exercise, WordPress makes it impossible to type a ” on a form page for SQL injection projection I guess, and single quotes are converted to double quotes by the macro editor. I also wanted the double quotes in my resulting strings, again impossible to type on the wordpress form used by Simple Text Replace to enter the expressions. I realised that the double quotes were in the string from MarsEdit, I grab them into a match group and use that in my output template.
Text to be replaced
class..(.)([a-zA-Z0-9]+),IMG_REPLACE_ME..
Replacement
class=$1$2$1 onclick=’return hs.expand(this, {slideshowGroup: 1 })’
My macro string above becomes…
class=”highslide” style=”float: left;” title=”View from Karasawa Hut” onclick=”return hs.expand(this, {slideshowGroup: 1 })”
Of course, any javascript you like can be added the same way.
Update
I determined a simpler way of doing this, there is a leftover tag that has been deprecated but the macro editor still believes it is current and leaves it alone. This is the longdesc attribute, I use it to store the title and source which I then use the replacement plugin to convert to a shortcode. I am using a shortcode to render the javascript that pops up the colourbox for the image rather than directly adding javascript as I haven’t decided which colourbox I prefer and want to be able to change it without having to edit all my posts.
Search
longdesc..(.)([\.\:\/\&\;\-a-zA-Z0-9_]+) ([a-zA-Z0-9 ]+)..
Replace
[sc:show_pic src=’$2′ title=’$3′ item=’this’]
After using a shortcode I can just change the shortcode value. For shortcodes I am using the shortcoder plugin. Unfortunately shortcoder wraps any code it inserts in HTML comments, which are illegal within a HTML element, look through the plugin and remove the source code lines ‘shortcoder content here….’ and the closing comment tage just after it, it is easy to find. Something to be aware of is that shortcoder only supports lower case text for it’s parameters if you use any upper case they won’t be filled in.
Hopefully one day we’ll be able to add shortcodes or javascript directly into the media manager of marsedit, and all these tricks can go away!