Ga naar de inhoud

Een CKEditor veld als card titel gebruiken

Een van mijn favoriete functies in Craft CMS 5 zijn de Element Cards. Ze tonen een preview van de inhoud van een Entry. Met minstens de titel en een status.

Het probleem

Soms vraagt een ontwerp om (eenvoudige) opmaak in de titel. Bijvoorbeeld, het toevoegen van vetgedrukte tekst kan bepaalde delen van de titel laten opvallen. Daarom vervangen we regelmatig het standaard titelveld door een eenvoudig CKEditor-veld.

Maar, aangezien de output van dat veld HTML bevat, zullen de HTML-tags ook worden weergegeven in de preview van de elementkaart. Een beetje rommelig voor een nette editorervaring.

We voegen een CKEditor veld toe als titel.

Aanpassen van een Entry, een titel veld met meerdere lijnen en simpele opmaak.

De preview voor de cards doen mijn ogen zeer.

Gelukkig is er een oplossing.

De oplossing

We kunnen Twig-filters toevoegen aan het Title Format veld in de details van het Entry-type. In dit geval, wanneer we de striptags-filter toevoegen, wordt alleen de tekst weergegeven in de preview.

Een Twig-filter toevoegen aan het Title Format veld.

Het resultaat is de titel zonder de tags.

Om het helemaal proper weer te geven, kunnen we een extra filter toevoegen om een spatie voor elke nieuwe regel te creëren.

Het eindresultaat.