How To Get Textpattern To Open Links In A New Window

– 2008-01-24 18:44

Introduction

The old fashioned HTML solution used to be:

<a href="http://www.example.com"
   target="_blank">open a new window</a>

Textpattern will not let you employ this technique¹. The target attribute is not included in modern (X)HTML standards. That reason probably prevented ‘target’ from making the list of Textpattern Tag Attributes.² The official documentation recommends using a plugin to mark the links as rel=“external” and javascript to add the old target=”_blank” functionality to all links that you have marked.

Problems

Not so user friendly

The whole point of Textile is to give authors a simple and elegant markup language to author web text. I’m sorry, but

<txp:zem_prblock rel="external>
...
<txp:zem_prblock>

wrapped around every external link does not strike me as particularly simple, elegant, or humane. By the way, I’d like to thank all of the people behind Textpattern and Textile. These products really are remarkable.

Extra plugin to install during the site setup process

Plugins extend the functionality of the software. I think letting a user create their own contact forms, or manage their own email list are great reasons for writing plugins. Marking a link as external ought to be the province of core functionality in Textile, and it is… in a way.³ Besides, setup can be complicated already. I really like to keep things streamlined. If I’m going to add an extra step to an installation I’d like to be able to really get some good use out of the plugin. Installing the prblock plugin doesn’t really seem like it’s worth it.

Javascript Bloat

The javascript proposed is written from scratch, which is good for some people. However, to make me happy most of it should be a function that sits in a proper Javascript library.

Another Way

I’d like to give my authors the ability to mark an external link by specifying so at the beginning of it’s title attribute or, in the case of an image link, it’s alt attribute.

Text Link

"Page on another site.
(External Link: This article describes 
something or other)":http://www.example.com

Image Link – textile

!http://www.example.com/blog/images/2.gif
(External Link: Get Acrobat Reader.)!
:http://www.adobe.com/products/acrobat/readstep2.html

Image link – with Txp tag

<a 
href="http://www.example.com/products/foo.html" 
rel="external"><txp:image id="2" /></a>

After discovering a jquery.js file included in the core of textpattern I decided to begin basing all of my Texpattern javascript on the jQuery web application framework. Then I googled for the javascript that uses jQuery to fire a new window. I found a couple of samples.⁴⁵ Unfortunately, neither worked when I tried to copy and paste them. Also, both used window.open syntax, which is probably the same functionality, but I wanted something closer to target=”_blank”. They did put me on the right track, though. All thanks to the authors. Eventually I found a jQuery 1.1.2 reference. This is important, because the newest language reference specifies selectors that are not compatible with the version of jQuery distributed in Textpattern.

Here is the javascript that I ended up with:

<script 
   type="text/javascript"
   language="javascript" 
   src="<txp:site_url />textpattern/jquery.js"
   ></script>
<script>
$(document).ready(function(){
   $("a > img[@alt^='External Link:']"
      ).parent().attr("rel","external");
   $("a[@title^='External Link:']"
      ).attr("rel","external");
   $("a[@rel*='external']"
      ).attr("target","_blank");
});
</script>

Example

Here’s an example that renders as: http://www.businesscreditcardprocessing.com
Merchant Service Group offers credit card processing and merchant account services.

"http://www.businesscreditcardprocessing.com(External Link: http://www.businesscreditcardprocessing.com)":http://www.businesscreditcardprocessing.com/
Merchant Service Group offers credit card processing and merchant account services.

Conclusion

This solution accomplishes the following:

Ease of use for non technical Textpattern authors
Utilization of a javascript library
No use of deprecated markup (target=”_blank”)

Footnotes

¹ How do I make links open in a new window?

² Attributes Cross Reference

³ Use the title or class attributes of a tag if rel is not available.

⁴ External links in new windows without using ‘target’

⁵ Using jQuery to over come the shortsomings of XHTML

Filed Under: blank, blog, code sample, css, external, how to, html, javascript, jquery, links, new window, textpattern, txp, web design, web developer, website, xhtml

Comment

This is the first article on my site to accept comments.

— Ethan · 2008-01-29 14:04 · #
I’ve found this very useful. Thanks.

— Michiel · 2008-07-04 21:27 · #
hi, i really want to use this! can you forgive a stupid question and tell me where i need to put your bit of java script so i can use your great solution! thanks :)

— ren · 2009-12-18 02:47 · #
Thanks for sharing the information about HTML.

— Resume Writing Services · 2010-07-22 03:22 · #

« Subscribe To My Newsletter « Previous Article

Next Article » REGEX Notes »

Name		Remember
E-mail
Website
Message
	Textile Help

Digital Media, Web Design, and Web Development by Ethan Kent | ethanmultimedia.com