External Links in new windows

Methods for changing how external links work in Movable Type templates have been previously been published by Mark Pilgrim and others, but I recently made some changes to a Movable Type installation that forces all external links to open in a new window and uses CSS to add the external site icon, so I thought I’d share the code here.

Like Mark’s method, you’ll need to use the Macro plugin and insert some macro code into your template or into a template module that is included in your templates.

<MTMacroDefine name="links" ctag="a"><MTIfMatches expr="[MTMacroAttr name='href']" pattern="m|^http:|">    <MTMacroAttr name="target" value="_blank">    <MTMacroAttr name="class" value="offsite"></MTIfMatches><MTIfMatches expr="[MTMacroAttr name='href']" pattern="m|^http://.*.yoursite.com|">    <MTMacroAttr name="target" value="_top">    <MTMacroAttr name="class" value=""></MTIfMatches><MTMacroTag rebuild="1"><MTMacroContent></a></MTMacroDefine>

Find the part that says yoursite.com and change it to your site’s URL.

Then add a bit of CSS to your stylesheet to tell browsers what to do with the “offsite” class.

.offsite {    padding-right: 9px;    background: url(aoutside.gif) no-repeat right;     color: darkgreen;}

This class adds some space after anything that uses the offsite class. The space is there to provide room for the image, which is added using the backround property.

You’ll need to create or pick an image to use as your offsite icon. For this example, I’m using one of the micro icons from WebGragpics. You might also find some of the QBullets icons suitable.

Make sure the padding for the offsite class is big enough to hold whatever icon you decide to use.

Then update your templates to activate the macro. Change your entry body and extended entries tags to look like <MTEntryBody apply_macros="1"> and <MTEntryExtended apply_macros="1">