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
Claudio –
The code is correct as written. The second defines the default, and as such should be the same for both options within a combo.
That being said, my current (soon to be released) version uses an improved bit of code, wherein the default option has a “true” parameter set, and all others do not need the last parameter at all.
I’ve been busy recently (buying and selling a home!), which is why it’s been so long without an update. I expect a new release very soon with one or two most-requested features rolled in.
Stephen,
I have a little problem here: the texts in pull-quotes are duplicating as you can see here. When I first installed the plugin, this didnt happen.
Do you have any clue about this problem?
Thanks.
Leonardo — I see the pull-quote but I’m not seeing the problem. What exactly is being duplicated? Also, what browser (and version), and OS are you using?
Stephen, its ok now. For some reason, the javascripts of many plugins I use were duplicanting, this affected not just de pull-quotes. I changed the theme and the problem was solved. Anyway, thanks for you attention.
Stephen,
I’ve just noticed that the alternate text is messed up when using accents. Is there a way to html_entity_decode the text ?
Thanks.
[...] can produce a variety of styles of pullquotes with CSS and if you are using WordPress you can even get a plugin that will do it for you. An example of a pullquote is shown just above (it was made with the WP [...]
Matt —
Sorry I didn’t respond earlier. I somehow missed your question and just now noticed it!
I would think that you can double-encode the character, though I haven’t tested it.
Example: &eacute;
However, this is certainly inelegant, and I will look into a fix. Thanks for the catch!
[edit: possibly use escape() and unescape() in the JavaScript...]
Stephen -
Only now getting back to the comment I left in December and which you replied to on Jan 1. (both are up above).
You say I need to “turn on the option” to allow for use of the “pullquote altPQ” option, but I don’t know where one would turn that on. Any hints?
I don’t want to use the option for “Successive quotes on one page alternate sides” because that means pullquotes, on my main page (where I may have many articles using pullquotes) won’t necessarily be on the predicted side of the in each given article.
So I don’t want to randomly alternate sides, I want to be able to specifically specify when the pullquote should be on the left instead of on the default right. But I don’t see where to “turn that on” as you suggest.
When I use the “pullquote altPQ” div, the pullquote just goes on the right as the noramal “pullquote” div does.
ADDITIONAL QUESTION/BUG-REPORT: The use of double hyphens, as in “–” inside a pullquote will cause it to err. At least when using the commented version (the one that allows me to use the quote on a different graf). A work around would be great since often I use pull-quotes to actually quote someone as in “Some great thing someone said. — Great Person named here”
BradBlog –
Aha, I misunderstood then. Currently there is no option to arbitrarily specify a side for a particular quote, but as you may notice above it is an oft-requested feature, and I expect to have it implemented in the next release (hopefully very soon).
Regarding the Bug Report: This is an obscure technicality of HTML rearing its head, and I’ve added a note regarding this to the instructions on the next version. Technically speaking, a double-dash ends an HTML comment, and that is what’s happening here. I might suggest using an encoded em-dash instead (e.g. — ).
Hmm… I’ll also add that info to the “Workarounds” section on this page. Thanks for the reminder!
Thanks for the quick reply (and for the workaround on the other issue) Question then is what the heck is the “pullquote altPQ” for then???
“[W]hat the heck is the “pullquote altPQ†for then???”
altPQ is used by the “alternate down the page” option. Basically, if that option is turned on, the script adds “altPQ” to the class of every second pull-quote div, which tells the CSS to put it on the other side.
Ah, thank you! Had thought it was for manual specification of placement on the alternate (from the default) side of the page.
Might request in your updated version (happy to test it, btw) that it do exactly that. Even if the “Alternate pullquotes on page” option is NOT selected.
Should give users far more control over placement. As mentioned, I can’t use the selection to alternate them on the page, because it means on the main page, where there may be other articles that use the pull-quotes, the quote ends up on a different side of the page than planned/hoped for.
New update folks!
JavaScript Pull-Quotes 1.4 includes the much-requested ability to specify a side for a particular pull-quote!
Just do you spans thus:
<span class="pullquote pqLeft">or<span class="pullquote pqRight">Also note that I’ve now got a sidebar image for you to put on your own site if you’d like to link to this page.
Enjoy!
[...] enough so that readers are engaged enough to go and read the entire text. I will start using using this plugin for WordPress that will do it for [...]
[...] dem Hinweis von Michael Gisiger auf das Plugin “Javascript Pull-Quotes” kommen die Artikel im paxx:zine jetzt optisch noch ansprechender daher. Dank den Zitaten aus [...]
[...] Nerdaphernalia [...]
Is there a way to stylize the pull quote – like to italicize or bold certain words? i haven’t downloaded yet – I am trying to figure out the difference between this plugin and the cafelamarck one. this one seems to allow for invisiblity, which is key.
thanks!
You can stylize text using CSS (a.k.a. Style Sheets). Any tags within a “pullquote” span appear in the large pull-quote, so A) any styling within the source quote appears in the pull-quote, and B) you could play with the Style Sheet to create certain effects. For example, you could do this:
<span class="pullquote">Why <span>hello</span> there!</span>and then style the “hello” by putting something like this in the style sheet:
blockquote.pullquote span {font-weight: bold;}I do not (yet) have functionality that creates the semi-random formatting that the cafelamarck plugin does, but as you point out, mine do disappear cleanly if the plugin is disabled. As for other differences, I believe this one has more display options, and a full Options page in the Admin screen. Mine also allows for text that differs from the <span>ed text, and a few other tricks. Enjoy!
Thanks.. aside from semi-random formatting – if I wanted a word or two to be bold in the pull-quote but not in the text, I would have to use the alternate text option, is that right? I’m just learning css/html as I go.. it’s all kinda new to me.
Actually I tried putting <em> tags and such in an “alternate text” comment, and got outwitted by WordPress’s encoding functions in the editor. I have that listed as a bug to be fixed — and since this plugin doesn’t have many known bugs, it’s pretty high on the list.
Until then you can format the pull-quote using spans as I did in my comment just above. That is, put a span (for example) within the text to be quoted, and then apply CSS to that tag within div.blockquote. See my comment just above.
Pages: « 1 2 [3] 4 5 6 7 8 9 10 11 » Show All