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. 

Tags
Drupal

Up Next

Creating Reusable Dynamic Content Components

A screenshot showing the "up next" reusable tagged content block
This is part 2 in this series that explores how to use paragraph bundles to store configuration for dynamic content. The example I built in part 1 was a "read next" section, which could then be added as a component within the flow of the page. The strategy makes sense for component-based sites and landing pages, but probably less so for blogs or content heavy sites, since what we really want is for each article to include the read next section at the end of the page. For that, a view that displays as a block would perfectly suffice. In practice, however, it can be really useful to have a single custom block type, which I often call a "component block", that has an entity reference revisions field that we can leverage to create reusable components.
Tags
Drupal

Creating Paragraphs Entities for Dynamic Content

Logos with Paragraphs, Drupal and Atomic Design
The paragraphs module has become a central ingredient for many component-based sites in recent years. However, our content strategy also often requires components that display dynamic content (think "Read Next", or "Also of Interest"). In this tutorial, I'll demonstrate how we've been solving this problem, by building paragraph bundles that serve as configuration entities that we can then use as arguments that we pass to a view via the Twig Tweak module. You can see a working version of the dynamic content component we'll be building in the "Up Next" card grid at the bottom of this tutorial.
Tags
Drupal

Multiple MailChimp Accounts with Drupal

A couple of months ago, team ThinkShout quietly introduced a feature to the MailChimp module that some of us have really wanted for a long time—the ability to support multiple MailChimp accounts from a single Drupal installation. This happened, in part, after I reached out to them on behalf of the stakeholders at Cornell University's ILR School, where I work. Email addresses can be coveted resources within organizations, and along with complex governance requirements, it's not uncommon for a single organization to have internal groups who use separate MailChimp accounts. I'm not going to comment on whether this is a good or wise practice, just to acknowledge that it's a reality.
Tags
Drupal