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
[...] Plugins: WordPress version 2.0.5 Akismet version 1.15Alt to Image Legend version 0.3Angsuman’s Feed Copyrighter version 1.0Author Image(s) version 0.9bdp-setup version 1.0Brian’s Latest Comments version 1.5.10Bunny’s Technorati Tags version 0.5Fancy Pullquotes version 0.1Get Author Profile version 0.5.1Google Analytics version 1.1Gravatar version 1.1Hello Dolly version 1.5Javascript Pull-Quotes version 1.2.2Menéame version 0.1 BetaMore Smilies version 2.1Respaldo de base de datos de WordPress version 1.8Show Top Commentators version 1.02Sociable version 1.2SpotMilk version 1.7time2read -UPDATED 20/10/04- version Viper’s Video Quicktags version 3.1.0 Beta 1WP-Stats version 2.04WP-UserOnline Widget version 2.04Zabaldu version 0.4 — the bdp-setup plugin– [...]
I get the following error when I try to access the plugin’s Option page :
Warning: call_user_func_array() [function.call-user-func-array]: First argumented is expected to be a valid callback, 'jspullquotes_subpanel' was given in /home/mjbiscay/public_html/wireless/wp-includes/functions.php on line 1329
Any ideas what’s wrong ? I’m using WP 2.0.5 and v1.2.2
Sounds as though the
jspullquotes_options.phpfile is missing. The first thought that jumps out at me is that you might have just installed thejspullquotes.phpfile alone. When you installed the plugin, did you put the entire jspullquotes folder in the plugins directory?Yes, all the files were uploaded to /plugins/jspullquotes.
v1.3b1 solved the issue though, thanks !
Final question and I’ll leave you alone ( :p ) : is there a way to tell the script when to put the pullquote on the right or on the left ? Apparently it’s all automatic, taken from the options.
It’d be nice to have a “pullquote-right” and “pullquote-left” class. Is there any way we can implement that Stephen ?
That shouldn’t be too hard, except for figuring out how it should interact with the “alternate down the page” option. Should the alternation be “reset” by a specific-side pullquote or should specifying a side override the one quote only and not affect anything else?
My first instinct is to say it should affect the one quote only, but then in alternating pages you could easily get a sudden run of three quotes down one side….
Or maybe I’m waaay overthinking things, as this plugin is purely cosmetic anyway… hmmm.
There is a new BETA version up, which adds a button in the WYSIWYG editor. Please give me feedback!!! Is it working properly for those who’ve tried it? Anyone having problems?
Currently the only issues I know if is that there is currently no actual indication that a pullquote is there until you actually publish and look at the post itself. (And the only way to remove a pullquote is to edit the HTML directly and remove the <span>) I’m working on it!
I am already using some styles for my blockquote. Unfortunately this plugin conflicts with those.
Is there a reason to convert <span class=”pullquote”> to an existing element name (<blockquote> in this case)??
The script takes the text within the <span> and duplicates it within a new <blockquote>. As the pullquote is a quotation, it seemed appropriate to use <blockquote>.
If your CSS is interfering with the script’s CSS, you should be able to explicitly reset the declarations that are being screwed up. In the Options panel there is a button to edit the CSS for the blockquotes. (If the other way around, you should be able to edit your own CSS in the same way.)
I see your point though. While I believe the <blockquote> tag is syntactically correct, perhaps an “advanced” option to use <span> or <div> is needed. As I was already going to add options to specify the CSS declaration used, this should not be too difficult to add (I hope
).
In the meantime, I think the next minor version of the plugin will have more specific “no assumptions” CSS that will cut down on problems such as this. Can you tell me what CSS you used that interferes? It might help me do this (you can email me privately for this).
[...] Javascript Pull-Quotes – Allows you to create flexible customizable pull-quotes without duplicating text in your markup [...]
This plugin looks great! I just need more control over manually setting my individual pullquotes alignment left or right. Matt mentioned this above. Anyone figure it out yet?
There are several things in the works. I worked out an infrastructure change that will allow for a number of changes I want to make, including options that manipulate the quote text (for capitalization and such….)
I also expect to get the per-quote right/left option working as people have suggested. I’m very busy lately, and might not get to it for a few weeks. Holidays, possibly moving. Lots of things on my plate lately. Rest assured this plugin is not forgotten!
hi there,
very nice plugin you made, I jsut have one question:
I also saw this plugin: http://www.cafelamarck.it/22/ and saw you posted there too, so you know it.
I like your advanced settings for the plugin but I would like my pullquotes to look like those generated by the other plugin…
could you give me a hand with that? It is not just about copying that other css style, because the other style somehow alternates, i.e. it makes certain words bolder, whatever…
“the other [plugin] somehow alternates, i.e. it makes certain words bolder, whatever…”
That’s interesting, I hadn’t noticed that before…. What that plugin does is take the quotes text and (semi-randomly?) add <b>bold</b> tags to some words. It is an interesting effect.
Coincidentally, something I’ve already done to the (as yet unreleased) next version will make implementing things like this much easier. Some details here: JavaScript Function: dupeNode()
In a nutshell, the groundwork has already been laid for new functionality that modifies the text within the pull-quote. So maybe this will happen down the road a spell.
I’ll be damned if I can get the “altPq” command to work.
Don’t know if it’s because I’ve set the display to “Right” (and thus, I’d hope that the “pullquote altPq” would display a quote on the left), but I can’t seem to figure it out.
Is it me, or have I found a bug?
Beyond that, of course, much appreciate the app!
Brad –
You do have to turn it on in the options panel (under the “Presentation” tab in the admin screen), but other than that it should work right out of the box.
Happy New Year!
Nicely done Stephen.
I love it.
I guess there’s a bug in line 30 of the “*_option.php” file. It must said:
>left
Would you please validate this?
Thanks and very good job! Your script is geat!
Claudio –
The double ‘>’ is correct. The first is the end of a bit of PHP, and the second is part of the HTML.
PHP segments begin with ‘<?php ‘ and end with ‘ ?>’
Thanks Stephen. I mean that the *_option.php file in line 30 says:
checkcombo(’def_side’,’left’,’left’)
but I believe that must say
checkcombo(’def_side’,’left’,’right’)
Regards.
Pages: « 1 [2] 3 4 5 6 7 8 9 10 11 » Show All