Skip to main content

Using a CKEditor Field as 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. 

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.

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

The result is the title without the tags.

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

The final result. We can sleep again.