Pull-Quote Triple Play

Recently I’ve been learning DOM scripting with the help of an excellent book called… well… DOM Scripting. (Creative, these computer types, eh wot?) As I went through the book, I had what I thought was a great idea for a script to auto-create pull-quotes.

DOM Scripting is an extremely flexible and powerful set of techniques within Javascript that allows the scripter to manipulate HTML (that is, web pages) in various ways, including adding markup and text, changing CSS settings, and a lot of other things. For this idea, I had it in my head that I could wrap the text to be quoted in a <span> tag with a class of “pullquote”, then use the DOM to take all such spans and turn their contents into pull-quotes.

Well darn it all if some guy named Roger Johansson didn’t go and save me the trouble by beating me to the punch. I actually laughed when I saw his post, because he uses precisely the methodology I was planning, and he pulls it off well — though, even more coincidentally, his first iteration had a limitation that mine would have had, and for the same reason! (I should note here that I’m not trying to take anything away from Roger — obviously I think it was a good idea, and he did clearly beat me to it.)

Almost immediately, a reader of his blog (going by the nom de web “Viper007Bond”) took the script and very neatly turned it into a plugin for WordPress. Better and better. It wouldn’t have been too terribly hard to incorporate it into a blog, but now it’s a total no-brainer.

Since I had been thinking directly along the same lines before seeing the script, I of course immediately had ideas of what might be done differently. I have a number of concepts that I will work on soon, but one of them is already done. I added code to Roger’s that excludes <a> tags from within “pullquote” <span>s — Not the content of the links, just the link itself. It occurred to me that having a link inside pullquote would not look so good, and in some cases could actually damage navigation within a page (in the cases of “name” links or navigational links pointing to “name” links). You can see it in action in this post from my other blog.

The modified script can be downloaded right here. This can easily be used with the WordPress plugin — just replace the “jspullquotes.js” file in the plugin folder with the modified copy. (Actually, this is an excellent quality of the way Viper007Bond made the plugin, as it is so easily updated when improvements are made to the original script!)

Some of the ideas I have for down the road include:

  • If a quote span doesn’t start with a capital letter, [C]apitalize it within brackets, as would be proper grammar for a quote
  • Allowing pullquotes that actually differ from the text in the span, such as excluding clauses within a long sentence. I actually think this will be easier than it sounds.
  • Make successive pullquotes in a single post alternate sides
  • Figure out how to make a preference screen within WordPress so that these various improvements1 can be easily turned on or off by the blog owner

That’s all I’ve got for now. Those links again are:

That’s it for now. See you next time!

1: This is important because, as experience tells us, “improvement” is often in the eye of the beholder.

This entry was posted in Webcraft and tagged , . Bookmark the permalink.

2 Responses to Pull-Quote Triple Play

  1. Viper007Bond says:

    Mmm, nice idea on the exclusion of links and I like your ideas for future improvements. If you’re willing to work together, just let me know. I’d be more than happy to throw together an options page for the plugin and such. 🙂

  2. Strider says:

    [UPDATE: I’ve done all of it. Thanks for the offer though! 🙂 ]

    Well… how about a control panel to turn the link skipping on and off?

    I’m going to go way out on a limb here and guess that from that starting point I could probably figure out how to mod it to include other settings. But as you’re clearly more experienced with making WordPress plugins (which is to say, I am not at all experienced in making them 😉 ) I’d be happy to work with you (and learn something along the way!)

    Soon I intend to add a page to this blog that shows all the various mods and whatnot I come up with, so that they’re showcased instead of being scattered across a bunch of blog posts. That way, the then-current version of the plugin will always have a page to call its own.

Leave a Reply

Your email address will not be published.