Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Trimming teasers and removing HTML tags for better display in views

Parent Feed: 

If you're making teaser views rather than field views,* you might have run into a problem with trimming a teaser when the body field has HTML tags in it. The use case here is having a long body field and wanting to show only some of that -- let's say 300 characters -- in a view. However, depending on your chosen character length, you may end up with a completely empty teaser, scratching your head about how it happened.

Here's the problem. When choosing how to set up the fields in your teaser view mode, you can choose one of the following core formatters on the Body field:

  • Default shows the whole body.
  • Plain text shows the whole body, but strips the HTML tags first.
  • Summary shows the contents of the summary field.
  • Summary or trimmed shows either the contents of the summary field or a trimmed version of the whole body. You can pick a character length for the latter.

It sounds like you'd want the "Summary or trimmed" option, but there's a catch: If a paragraph opens but doesn't close within the 300 characters you choose as your cutoff, it can wind up being unable to break in the right place and just show up empty instead. There's a long post about it in the Views issue queue (though this isn't really a Views issue). Since the trimming and plain text options are mutually exclusive formatters, you can't use plain text to remove those HTML tags before trimming.**

There's a CKEditor-related solution in that post that didn't work for me, but I was able to solve it with by downloading and enabling the Smart Trim module. This exposes a new formatter, Smart trimmed, that gives you more options on your Manage display > Teaser screen. Here's a screenshot of what I can customize with the smart trimmed formatter.

Screenshot showing trim length, trim units, suffix, read more options, summary options, and strip HTML option

The result is that you can check the "Strip HTML" option and set the character length at the same time, which neatly solves the problem.

As a bonus, you can even trim the summary field if necessary, using the summary dropdown. There are very few use cases for this, since summaries are usually deliberate descriptions of the content, but I did run into one on a recent site.

Please keep in mind that Strip HTML currently runs after the teaser is trimmed, though there may be an update to a dev version that will provide more options in a future release. This means that if you're measuring in characters, HTML in the body (like link markup) still counts toward your character limit even if it's not shown. If you measure in words, the difference is much less noticeable.

Notes

*You can completely avoid this problem by doing a field view. Under Rewrite Results on your field, you can check both "Trim this field to a maximum length" and "Strip HTML tags." If you've already done work to customize your teaser, though, starting over with a field view isn't necessarily practical. Plus, changing the teaser's settings themselves allows you to have a consistent display across multiple views using teaser mode.

**While you could probably strip all HTML tags from a particular content type's teaser with preprocessing, I like keeping it within the UI to allow for relatively simple tweaks in the future, and in order to be transparent about where changes are coming from. Advanced content administrators using the teaser view mode on the manage display screen have a reasonable expectation of being able to figure out how the teaser works without touching code -- that's why the formatters are here in the first place. I love preprocessing and it's frequently a good solution, but I like empowering clients to maintain their site in the future when I can.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web