What is it?
The Graceful Pull-Quotes plugin (formerly “JavaScript Pull-Quotes”) 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), Persian, 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.3
- 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!
209 Comments
Pages: « 1 2 3 [4] 5 6 7 8 9 10 11 » Show All
Great Post. Very helpfull information. Thanks, guys. Jürgen from Germany
New update, version 1.5
This is a big’un, folks. I’ve implemented Styles, similar to WordPress themes. Just go into the options screen and pick a style.
Also like WordPress themes, this is wide open to custom styles, so submit a Style today and I’ll put them up for everyone to see!
IMPORTANT UPGRADE NOTE: If you are upgrading from a previous version of the plugin, go into your Options panel and change the setting called “CSS class selector for alt-side pull-quote”. The previous default read:
pullquote pqAlt
Change it to:
pullquote pqRight
Hey Stephen, a great plugin for WordPress, and after three months, I need a little help. Running 1.3, the plugin worked perfectly. Today I upgraded to 1.5 and now, not so good. When I insert a pullquote, The pullquote shows up at the top of the page and is as wide at the container. I made the change to the CSS class selector as indicated above, but that didn’t change anything.
First, do you have any idea what might cause this, and second, if not, can you email me version 1.3 so I can delete and go back. Foolishly, I didn’t make a backup of the original file before the upgrade. Oh, in case. WP 2.1.2, Firefox 2.0.0.3, Windows XP Service Pack 2. Thanks again for a great plugin and for any help you might give.
Larry –
I think I have v1.3 on my other computer… I’ll upload it for you later.
In the meantime, can you give me a link? I’d like to try and figure out what’s going wrong. You might put a pull-quote in to an old post somewhere and give me a link to that (so few to no people will see the odd pull-quote in the old post….)
Off the cuff the width problem sounds as though the plugin is not finding the CSS file correctly, which would suggest a bug in the new “pick a style” code. I’m not sure what would cause it to show up in a different location, though.
Also… odd as it sounds, you might simply try hitting “reload” a few times on your browser, or better yet clearing your cache.
Stephen,
I added pullquotes to several old posts and it worked perfectly, just as always. I thought maybe the issue only showed up on non-published articles, so I tried that, and they showed up perfectly. I don’t have any idea why it didn’t work Friday right after the upgrade, but it seems to work properly now. Thanks for the magic fix. I appreciate it.
I have discovered another problem though. I installed it on another site I have that is also running AdSense. I am running the Adsense-Deluxe plugin and with it activated, the pullquote button does not show up in the write area. I am not using the visual editor. I deactivate Adsense-Deluxe and it shows up, re-activate, and it disappears. This may be a flaw in the other plugin, but I wanted you to know about a possible issue.
Thanks again for your response and help.
“I don’t have any idea why it didn’t work Friday right after the upgrade, but it seems to work properly now.”
As suggested at the end of my previous comment, your browser was probably caching a CSS file or something. Viewing it again later reloaded the file and you got the newer one.
Regarding the Adsense plugin:
It appears that this is a known problem with that plugin. I use a very popular bit of JavaScript called “Buttonsnap” to add the button to the editor, and Adsense conflicts with Buttonsnap. Thus that plugin apparently causes the same problem with a good number of other plugins that add buttons to the editor.
Reportedly the WordPress folks are adding native button hooks into WordPress in version 2.2, so I expect to do some work on the buttons when that is released.
Until then here are a couple potential fixes:
http://blog.hwa2u.com/...
http://www.maxpower.ca/...
[...] se puede quitar el valor de un enlace poniéndo en javascript (los buscadores no leen javascript) o por robots.txt Es habitual en algunos foros que los links [...]
[...] a Top Rated Articles page when you have enough good material 46. use strong visual images and text formatting plug-ins 47. turn off the computer 48. live 49. love 50. [...]
New version 1.5.1 is up!
WordPress Theme designers can now embed a custom pull-quote style within a theme. I’ve also laid the groundwork for translations of the Options panel; plus there are some cosmetic changes and minor bug fixes.
New update: 1.5.2
I’ve added a preview button so you can see what different styles look like without having to activate them first. This should make it easier to develop new styles, as well as encourage people to experiment a bit in using them.
Enjoy!
[...] dumb monkey look like a Pulitzer Prize winner! But I’ve decided to run it head-to-head with JSPullQuotes, a javascript implementation, to see which I like more (= is more easily customized). Currently I [...]
[...] note: Thanks to Nerdaphernalia for the pullquote plugin and Sabahan for the cool blockquote [...]
…..aside from semi-random formatting – Thnaks a lot.
Very nice that you sendet me a reply.
Peter from Germany
New update: v1.5.3
A few fixes and optimizations in this one. The biggest change is that styles can be contained in folders now, which allows for styles that include other files, such as images.
I really love this but I wonder how to include formatting like a break “ or html or anything like that.
Jane –
I haven’t worked that one out yet. I thought you might be able to do an “alternate text” quote with tags and such, but it seems the WordPress post editor “helpfully” mucks around with it. I’ll have to experiment with HTML encoding and try to find a combination that doesn’t break.
This is on my “bug” list. It goes hand-in-hand with fixing extended characters such as “é” in alt-text quotes. Now that
The short version is I need to figure out how to tell the post editor to leave comment contents alone.
[...] Visit [...]
Version 1.5.4 is out. The biggest change here is that it’s all ready for translation. If you’re bilingual and would like to help with translations, please fill out the .pot file that is included with the download, and send it back to me.
Get my email address here.
There was also a bit of reorganization and some minor code cleanup, but no major functional differences.
Enjoy!
Yo Stephen, an excellent bit of work, great Plugin… just installed yesterday, had it up and running in a matter of minutes…
A great addition to standard block quotes in WP and your “admin” page makes things so much easier for novices like me whjo know nothing of “coding”. Thx…
PS: Working well on Wp 2.2, thus far…
[...] All Geek To Me” Skip to content FeaturesJavaScript Function: dupeNode()OS X App: ImageTaggerWordPress Plugin: JavaScript Pull-QuotesWordPress Plugin: Subscribe to Comments « The newest thing from [...]
Pages: « 1 2 3 [4] 5 6 7 8 9 10 11 » Show All