Pull Quotes via Custom Filters in Drupal 7

UPDATE: This was a good solution, but I decided I wanted a little more flexibility in my filter (like being able to specify attributes in any order) and I wanted to get rid of the required [/pullquote] closing tag. Custom Filter has its limitations (and working through the gui would’ve been a PITA), so I fired up Vim and made a custom filter using hook_filter_info(). I encourage you to look at this new post: Pull Quotes in Drupal 7 – Using hook_filter_info()

I’ve been working on a Drupal 7 site that requires some nicely-formatted pull quotes. The site editors need the ability to add them to their content easily through the “filtered” text fields throughout the site (e.g., body). After trying a few shortcode-type modules I decided I’d get the most flexibility and power out of a simple custom filter. If you haven’t checked out Custom Filter, you’ll want to familiarize yourself with this module before proceeding.

End Result

The shortcode (this term make the most sense here) I want to offer to the editor looks like this:

The HTML output I’d like to render (given the example above) looks like this:

Rather than explain the different options I’d like to offer, I’ll just include this screenshot of the help text that the editors will see:

 

Setup and Configuration

Step 1: Download and enable the Custom Filter module.

Step 2: Browse to Admin » Custom filters

Step 3: Click the ADD FILTER tab

Step 4: Fill and save the following information:

Type: pull_quotes

Name: Pull qutoes

Cache: checked

Tips (short), Tips (full):

Step 5: Click the name of the new custom filter to get into its rules Step 6: Click the ADD RULE tab Step 7: Fill and save the following information:

Name: Pull quote

Enabled: checked

Pattern:  /\[pullquote-?(left|center|right)\s?(author="(.*)")?\](.*)\[\/pullquote\]/i

PHP Code: checked

Replacement text:

Step 8: Add the custom filter (that you created in step 4) to the text formats in which you want to use pull quotes. For example, to add this new filter to the Full HTML text format I went to Admin » Configuration » Content authoring » Text formats » Full HTML, then I checked the Pull quotes checkbox and made sure the filter was in the right position in the filter processing order (in my case, at the end).

Step 9: Try it out! Hit a content type that allows you to use a text format you added the filter to, and try one of the examples.

Step 10: Add styling to your stylesheets to make the output look pretty!

Conclusion

Well, there you have it: a “custom” solution for nice-looking, easy-to-add pull quotes. I could’ve taken this further, but this is exactly what I needed.

Lastly, you may want to check out more examples of custom filters. The options are endless with this module and it could certainly bring a lot of convenience to your editing experience.