What is it?
The JavaScript Pull-Quotes plugin is an add-on for WordPress that allows you to easily insert pull-quotes into your posts and pages. It uses client-side JavaScript specifically because, as a purely visual effect, it seems appropriate to avoid “doubling up” the text for people on text-only browsers or older browser that probably won’t properly handle the CSS involved. If a browser has JavaScript turned off, or otherwise somehow can’t handle the pull-quotes, then they should be completely invisible and out of the way.
How do I use it?
The plugin will look for any text that is inside a tag with a class of “pullquote”, and turn it into a pull-quote. <span class="pullquote">This sentence is a pull-quote, for example</span> — though in a real post the span tags will not be visible to readers as they are in this case! Via separate plugin you can add an automatic “Pull-quote” button to the post editor screen (see “extras” in the download); otherwise you should be able to add the <span> manually.
If you like, you can specify a particular side for a particular quote. To do this, simply set the span’s class to “pullquote pqRight” or “pullquote pqLeft”. This will put that one pull-quote on the chosen side completely independently of any other side-related options in use.
There is a options panel in the WordPress admin screen that allows you to set various options. I recommend you check it out before adding any pull-quotes to posts — you can find it under the Presentation section.
In the aforementioned options panel there is a control to select a style for pull-quotes, much like selecting a Theme in WordPress. There is also a preview button, so you can see what a particular style looks like without having to activate it first.
Sometimes you have a sentence with some subsidiary clause that you don’t want to include in the pull-quote. We’ve got you covered. If you have some text that you want to quote, but leave out extraneous, repetitious, or just plain unnecessary text, you put the alternate text in an <!-- HTML comment --> immediately inside the span. This last part is important — <span class="pullquote"><!-- You can put any alternate text you want in the comment -->the comment must be the very first thing inside the span</span>: no spaces, quote marks, or anything else comes first. (Again, the spans and comments will not be visible to your readers — this is just for demonstration purposes!).
Using alternate text in this way is of course completely optional If you like to keep things simple, just put the quotable text in a span as noted above and you’ll be fine. That’s about all there is to it.
Features
- The plugin is fully language-aware and ready for localization. German (Thanks Mattias), French (Merci Ben), and Italian localizations are included.
- Styles menu. The Options panel has a drop down menu that allows you to choose a visual style for your pull-quotes. Styles are easily customized and open for third-party contributions (similar to WordPress Themes).
- Preview styles without activating them
- A pull-quote style can be embedded in a WordPress theme. If the active theme has a file called “jspullquotes.css” in it, that will be used automatically.
- You can specify a side for a particular quote. To use, set span class to “pullquote pqRight” or “pullquote pqLeft”
- Successive pull-quotes can alternate sides
- Optionally strips links out of the quote text
- Have pull-quotes that differ from the “auto-quoted” text
- Allow user to choose default side
- Advanced options to specify the HTML tag and CSS classes to be used
Installation
Download the file, unzip it, and put the jspullquotes folder into your blog’s wp-content/plugins/ directory. Next activate it in the WordPress Plugins panel.
Download
- jspullquotes.zip v. 2.2
- jspullquotes.zip v. 1.7 (for WP versions lower than 2.5)
Is this download worth something to you? If you have found this system useful, please consider making a donation. Even as little as a dollar is appreciated:
Comments and suggestions are welcome.
Share the Love
If you like this plugin, please spread the word! I’ve made one o’ them handy sidebar link images that you can download and put on your own blog. Please link it to this page, of course! Here’s the image; just right-click and save:
Or, if you have the plugin installed, you can simply paste the following into your sidebar (you may need to change the image “src” path, depending on your site):
<a href="http://striderweb.com/nerdaphernalia/features/wp-javascript-pull-quotes/"><img src="/wp-content/plugins/jspullquotes/extras/jspullquotes.png" alt="JS Pull-Quotes" title="JavaScript Pull-Quotes" height="15" width="80" /></a>Acknowledgements
Thanks to Roger Johansson and “Viper007Bond” for laying much of the groundwork that led to this plugin. See the readme.txt file included with the download for further details.
Thanks to Mattias for the German translation, Ben for the French, and to my wife’s friend Toni’s cousin Ralph for the Italian.
Last but not least, thanks to the fine folks at WordPress who made this all possible.
Troubleshooting/ Work-Arounds
- If you want to use this effect on a non-WordPress website, I suggest you check out the original script on Roger’s site, or my “no links” version.
- PROBLEM: You install it and nothing happens when you add the span tags to your post. SOLUTION: It may be your theme. Check in the
header.phpfile — the following line must appear somewhere in the section of your page (usually toward the end):
<?php wp_head(); ?> - BUG: There are issues with accented letters within alternate text comments that need to be fixed
- You may have noticed “alternate text” pull-quotes throwing errors when you have a double-dash in them. This is an obscure technicality of HTML rearing its head. Technically speaking, a double-dash ends an HTML comment, and that means the comment is ending earlier than you want it to.
- There is a bug in the JavaScript rendering of certain less common browsers, (such as older versions of Safari), which causes it to miss the alternate text. Assuming that some of your users probably do use these browser, you have two options:
- Do the alternate text as described. The buggy browsers will show the *actual* text in the span as though the alternate were not there.
- Put the comment alone in a pullquote span, just before the sentence you’re (sort of) quoting. Buggy browsers will not show any pullquote, but other browsers will work normally. Example:
<span class="pullquote"><!-- Darn that browser! --></span>Darn that Javascript-mangling browser!
153 Comments
Pages: [1] 2 3 4 5 … 8 » Show All
[...] [Download] [Plugin Page] [...]
[...] One feature that has been added is the pullquote.A pullquote allows a quotation from the body of the text to be highlighted to the side of the main text.Roger Johansson created the original javascript and css to provide the basic functionality. Stephen Rider then took this code and wrapped it up as a neat WordPress Plug-In. [...]
This Pullquote plug-in is very neat and simple. Great job. I have recommended it to clients that are using WordPress for blogging. If you check out my URL you will see that I have obviously implemented the functionality on my own site.
Thanks for some great work!
I just discovered a bug, folks. The alternate text doesn’t work in Safari. Working on a fix.
Also — a “choose default side” option is
imminentdone (working on that is what exposed the bug)Stay Tuned.
Just the plugin I was looking for. I’ll be starting a new site in a few weeks with mostly text, and pullquotes will make it look much better.
Isn’t there supposed to be a pullquote button in WYSIWYG? I didn’t get one. Other than that it works great.
Thanks,
Lowell
No button in the WYSIWYG editor (yet). The button in the plaintext editor is actually part of the code that was done by others before I got to it (see the History section on this page).
At some point I will probably take a crack at adding this. You’ll note it’s on my “in the works” list in the Features section.
[...] La segunda imagen es del plugin Javascript pull-quotes de Nerdaphernalia y quizá es un poco más completo. Pero tu eliges! [...]
Doesn’t seem to work with FCKeditor.
I’m not familiar with it, but FCKeditor appears to be a text/HTML editor. (The site is confusing. Are you meant to run it within your browser?)
This is a WordPress plugin.
If you mean you’re using that program to write your posts, and then drop them into Wordpress, you should be able to add a <span class=”pullquote”> to your text using any HTML editor. In this case, it looks as though you may have to use the “Source” button.
I’m sure support on that site can help you more than I can.
Hi! Thanks for this great plugin, but I’ve got a problem, which is seen in this screen-shot:
As you can see, the markup produces a blank line under the quoted text, which isn’t the case in your example. I’ve troubleshot [is this really the proper past tense version of the verb?] the issue by checking the post using Firefox 1.5.2 and Flock 0.7.6 on two different computers (WinXP Pro and OSX 10.4.8) with the very same result, no matter if the quotes are included in a published post or a draft.
Can you help me? This plugin seems to have the upper hand on this one, but please, let competition be your carrot (and blissful delight in helping a stupid user)
Thanks!
Somehow the screenshot disappeared from the post (despite being viewable from the preview box when commenting) so here’s a direct URL to it: http://niklasblog.com/wp-content/2006-11-02-pullquotese...
Not sure why that would happen. I’m guessing you don’t have an extra break within the <span>?
One other possibility is that there is something else in your site’s style sheets that is causing this.
Can you point me to an actual page where this is happening? I can only guess looking at a screenshot. (Stick a pullquote in an old post and give me the link…)
Hello, Stephen! Thanks for helping out! Here’s a sample, and you’re right, there’s no extra break within the : http://niklasblog.com/?p=1078
Got it — I’m using a too-common CSS selector “alt” for right-side pull-quotes. You also have an “alt” selector in your stylesheets, with a padding of 10px.
I’ll change the code to account for this - probably should make it a user option since anything’s possible….
Thanks a lot, Stephen. I’ll check it out when the plugin’s updated, and yet again, thanks!
Okay, a couple of rapid-fire updates:
I’ve fixed Niklas’ padding problem, worked in a workaround for the Safari bug, eliminated empty (no content) pull-quotes, added a link to edit the CSS file, and cleaned up the interface a bit. Whew! Version 1.2.2 is up.
Thanks a lot, Stephen! Up and running smoothly on my blog, making reading easier and a richer experience.
[...] wp-javascript-pull-quotes/ [...]
Heres my K-I-S-S take on a purely (X)HTML, CSS, semantic, and XHTML 1.0 Strict Validating way to create pullquotes.
http://www.askapache.com/2006/css/pullquotes-using-css-...
Great article and I really like the look of your end result, and the change from the outdated innerHTML method. When you can eliminate js, doit. NOTE: Im not anti-js, just a minimalist.
The issue with that is that it requires you to duplicate text in the markup. One of the core concepts of web standards — that is, proper use of (X)HTML, CSS, and JavaScript, is the idea of separating structure, visual design, and behavior.
So in a sense, you’re right, as I’m using JavaScript to create a purely visual effect, whereas your method maintains the visuals purely within the CSS. I’m breaking down the separation of design and behavior.
The problem with *your* method is that it improperly breaks down the barrier between structure and design by requiring the writer to duplicate the text for the pull-quote. With my method, the quoted text is — deliberately — only duplicated programmatically, and disappears entirely when it doesn’t work, such as in text browsers.
In other words, it “degrades gracefully” in browsers in which the effect doesn’t work; whereas your way will, under all circumstances, duplicate the text.
Pages: [1] 2 3 4 5 … 8 » Show All