Skip to main content

Drupal Pullquotes

Several powerful quotes with a pullquote sprinkled off to the side to draw a reader's attention

"Pullquotes", as described here, differ from blockquotes because they duplicate a section of text within the page, and pullquotes get styled in a way that draws the reader's attention to the quote. As such, one simple solution that I've been using is to allow content editors to select a section of text while editing and click a button in the interface to designate it as a pullquote.

TL;DR: Grab your copy on GitHub today.

A quick overview of what's needed

We'll walk through the various pieces required in order to get this working on your site, but it can be summarized in three basic parts:

  1. The module code for the ckeditor plugin
  2. Configuring at least one of your text formatters to include the pullquote button 
  3. Adding the js and css to your theme for the site

Adding the Plugin

At this point, I'm not planning to release this as a contrib module for Drupal. If you are interested in doing that, however, then please know you have my full blessing. On projects where pullquotes are required, I tend to simply add them to a small, custom module that includes all of the specific administration tweaks for that project. If you choose to download the GitHub repo, then you can simply drop the "pullquotes" folder into modules/custom/, and drush en pullquotes. If you want to add it to a different custom module, simply update the appropriate paths in src/Plugin/CKEditorPlugin/Pullquote.php.

Configuring a Text Format

The next step is to add the ckeditor button to one of your text formats at /admin/config/content/formats. See the image pictured below.

If the format includes "Limit allowed HTML tags and correct faulty HTML", then be sure to add <span class> to the allowed HTML tags, since that is how the plugin modifies the html and prepares it for your theme's javascript. Finally, export your configuration and commit it to your project repo.

The ckeditor button for pullquotes that needs to be configured in the text format

Theming the pullquotes

The last step is to modify the javascript and styles that your theme uses to display the pullquotes that have been added in the editing interface. As you can see from the GitHub repo, there are four files that will need to be updated or added to your theme:

  1. your theme info file
  2. your theme library file
  3. the javascript file that adds the markup
  4. the scss (or css) file

In our case, the javascript finds any/all pullquote spans on the page, and then adds them as asides to the DOM, alternating between right and left alignment (for desktop). The scss file then styles them appropriately for small and large breakpoints. Note, too, that the theme css includes specific styles that display in the editing interface, so that content creators can easily see when a pullquote is being added or modified. To remove a pullquote, the editor simply selects it again (which turns the pullquote pink in our theme) and clicks the ckeditor button. 

That wraps up this simple tutorial. You can now rest assured that your readers will never miss an important quote again. The strategy is in no way bulletproof, and so its mileage may vary, but if you have questions, feedback, or suggestions on how this strategy can be improved, please add your comment below.