dive into mark

Desired effect: we want offsite links to look different than local links. In addition, we want offsite links to be preceded by a specific image (a globe, in this case) to indicate that they point to another site.

Example of visual differences: Rebecca Blood. Example of images preceding offsite links: Dive Into OS X: Other OS X Resources.

Technique: we will use Movable Type macros to give offsite links a class="offsite", allowing visual customization via CSS. If that’s all you want to do, Brad Choate shows you how to do it. The following example builds on Brad’s example to also insert a real IMG tag before the offsite link.

Required plugins: MT-Macros, MT-Regex.

If you don’t already have one, create a new template module called macros and put this in it:

<MTMacroDefine name="links" ctag="a"><MTIfMatches expr="[MTMacroAttr name='href']" pattern="m/.+/"><MTMacroAttr name="class" value="local"></MTIfMatches><MTIfMatches expr="[MTMacroAttr name='href']" pattern="m/^http:/"><MTMacroAttr name="class" value="offsite"></MTIfMatches><MTIfMatches expr="[MTMacroAttr name='href']" pattern="m/^http:\/\/diveintomark.org\//"><MTMacroAttr name="class" value="local"></MTIfMatches><MTMacroTag rebuild="1"><MTIfMatches expr="[MTMacroAttr name='class']" pattern="m/^offsite/"><img alt="[offsite]" title="" src="/images/offsite.gif" width="11" height="11" /> </MTIfMatches><MTMacroContent></a></MTMacroDefine>

Where it says diveintomark.org, substitute your own domain name. Where it says /images/offsite.gif, substitute the path to your own image, and be sure to change the width and height of the image to match yours.

At the top of your templates, insert this line:

<$MTInclude module="macros"$>

And where you have this:

<$MTEntryBody$>

Change it to this:

<$MTEntryBody apply_macros="1"$>

You can now control the visual presentation of offsite links, by defining a rule like this in your stylesheet (probably styles-site.css, unless you’ve defined your own):

a.offsite {
  color: red;
  background-color: transparent;
}

Note that you should not define classes manually on your links. This macro figures out whether a link is local or offsite, and adds the appropriate class automatically (along with the IMG tag).

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)

§