Skip to main content

Using a CKEditor Field as Card Title

This article is part of a series on Card Element previews:

  1. Using a CKEditor Field as Card Title (current article)
  2. Using an Image as a Card Title

The problem

One of my favorite features in Craft CMS 5 is the element cards. They preview the content of an Entry. With at least the title and a status.

But some designs ask for having simple formatting in the title. For example, adding some bold or italic text in it can make certain parts of the title stand out or enhance readability. Therefore, we replace the default title field by a simple CKEditor field.

Since the output of that field contains HTML, the HTML tags will also be shown in the element card preview. A bit messy for a neat editor experience. 

Entry type without filter
Ckeditor field
Before

Luckily, there is a fix.

The solution

We can add Twig filters to the Title Format field in the Entry type details. In this case, when we add the striptags filter, only the text will be displayed in the preview.

Entry type with filter

Adding the "striptags" Twig filter to the Title Format field.

After filter

The result is the title without the tags.

Entry type with multiple filters

To finish it off, we can add an extra filter to have a space for every new line.

After multiple filter

The final result. We can sleep again.