Display summary + read more links if body content is long, otherwise display body alone

Question

We have a content type which has a customized template. In general, the body content of these nodes is short -- one to two sentences at most.

In some cases, however, the body content is a paragraph or more.

If the body content is shorter than 200 words, we would like to display the body field as-is.

If the body content is longer than 200 words, we would like to display the summary with a customized "read more" link.

Besides digging into the content array and counting words in the template, is there a graceful way to do this with view modes or field templates?

At the moment our clunky solution is to render both display types and swap between them with javascript, but this displays the "read more" link even when the body content is short enough to be displayed without the need for a summary.

node--custom.tpl.php

<?php 
// Other fields above..

$summary = field_view_field('node', $node, 'body', [
    'label' => 'hidden',
    'type' => 'text_summary_or_trimmed',
]);

// Render summary of body, which is visible by default
print render($summary);

// Render full body as hidden with 'element-invisible' class (see field--body--timeline.tpl.php)
print render($content['body']);

?>

field--body--custom.php

<?php if($element['#view_mode'] !== 'full'): // Display trimmed version ?>
    <div class="<?= $classes; ?>">
    <!-- this is the summary field -->
        <?php foreach($items as $delta => $item):
            print render($item);
        endforeach; ?>
        <a class="fullTextButtonOn">Read More&hellip;</a>
    </div>
<?php else: 
    // Display full body text with the element-invisible class and hidden by default ?>
    <div class="element-invisible <?= $classes; ?>">
    <!-- this is the full body field -->
        <?php foreach($items as $delta => $item):
            print render($item);
        endforeach; ?>
        <a class="fullTextButtonOff">&hellip;Read Less</a>
    </div>
<?php endif; ?>

Resulting HTML on render

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
    <!-- this is the summary field -->
    <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
    <a class="fullTextButtonOn">Read More…</a>
</div>

<div class="element-invisible field field-name-body field-type-text-with-summary field-label-hidden">
    <!-- this is the full body field -->
    <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
    <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
    <a class="fullTextButtonOff">…Read Less</a>
</div>

Answer 1

Have you seen the Smart Trim module, that allows you to trim text fields to a given length, in words or characters, you can also add a read more link.

From the module description:

After installing and enabling Smart Trim, you should see a "Smart trimmed" option in the format dropdown for your text fields. This is located in the "Manage Display" section of "Structure->Content types. With smart trim, you have control over:

• The trim length
• Whether the trim length is measured in characters or words
• Appending an optional suffix at the trim point
• Displaying an optional "More" link immediately after the trimmed text
• Stripping out HTML tags from the field