How to trim body text (field_body)?

Question

I've created a view for a node which shows the content as rendered entity. Among others, I output the body field in the twig template:

{{ content.field_body }}

Now, I'd like to limit the text to 200 characters and put three dots. I've tested three different ways to do that, but nothing has worked. The problem is, that each way counts and trims the HTML characters too.

1: I've added the format "Trimmed" in "Manage display" => The text is limited but not correct. And I do not have the three dots.

2: I've trimmed the text in the twig template. But to count the text I have to render it first. Thereby, twig outputs the text as HTML (I see HTML tags on my page!)

{% set text = content.field_body|render %}
{{ text|length > 200 ? text|slice(0, 200) ~ '...' : text }}

3: I've tried to solve the problem in template_preprocess_node(). Here I have the same problem with counting the HTML markup too.

$body_text = $node->get('field_body')->getValue()[0]['value'];
$trimmed_text = substr($body_text, 0, 200) . '...';

How can I trim my text right?

Thank you very much for your help!

Answer 1

There's a few solutions you can try but take note truncating strings with html is generally a bad idea due to having potential unclosed or malformed tags.

1. Use |raw to output the html as html, may produce malformed tags:

{% set text = content.field_body|render %}
{{ text|length > 200 ? text|slice(0, 200)|raw ~ '...' : text|raw }}

2. Strip html first, cleaner:

{% set text = content.field_body|render|striptags %}
{{ text|length > 200 ? text|slice(0, 200) ~ '...' : text }}

3. Register a twig extension (untested):

https://gist.github.com/leon/2857883

Another helpful extension you can check out is the Text extension, which helps you prevent chopping up words:

http://twig.sensiolabs.org/doc/extensions/text.html

Answer 2

Improvements:

1. if you strip tags you should |trim to get rid of whitespace
2. trim on word boundary - see below slice() and split()
3. Use ellipsis (…) rather than "..."
4. |raw the output

{% set text = content.field_header_intro|render|striptags|trim %}

{{ (text|length > 200 ? text|slice(0, 201)|split(' ')|slice(0, -1)|join(' ') ~ '…' : text)|raw }}

Answer 3

You can now do this with the twig_extender module and use |truncate.

Here is an example of how to use it in the .twig template, note that I'm also using twig_field_value:

{{ content.field_name|field_value|first['#text']|truncate(15, true, '....') }}

note: I usually keep my devel settings (./admin/config/development/devel) set to use Symfony var-dumper and can figure out the chain with

ie: {{ devel_dump(content.field_name|field_value) }}

Answer 4

This is how I handled this.

Example:
field--node--body--article.html.twig

{% set mode = element['#view_mode'] %}
...
{% for item in items %}
  {% if mode == 'full' %}
    <div{{ attributes.addClass('texto') }}>{{ item.content }}</div>
  {% elseif mode == 'teaser' %}
    {# if there is something about trim_length in field formatter #}
    {% if item.content['#text_summary_trim_length'] %}
      {# first remove html tags then you slice with trim_length #}
      {% set texto = item.content['#text']|striptags|slice(0, item.content['#text_summary_trim_length']) %}
      <p {{ attributes }}>{{ texto }}...</p>
    {% else %}
      <p {{ attributes }}>{{ item.content }}</p>
    {% endif %}
  {% endif %}
{% endfor %}
...

Answer 5

There is a useful truncate function in the module Twig Tweak :

{{ node.field_summary.value|truncate(11, true, true) }}

Note that the third argument is not documented and add an ellipsis (...)