OpenSense Labs: Smart Trim your Content and Modify Teasers

28/07/2018



Smart Trim your Content and Modify Teasers
Raman
Fri, 07/27/2018 – 20:56

Teasers provide a brief summary or a short description of an article (or any other content). They give a visitor an insight and a quick overview of the content. Hence, it becomes crucial for a teaser to be eye-catchy in order to get that one click from the reader. It should leave them with a sense of curiosity and intrusiveness.

Drupal, out of the box, provides a teaser view mode and three formats for the text fields – Default, Summary or Trimmed and Trimmed. However, the trimming feature is very limited and allows only the number of characters to be configured.

Trimming options for text fields out of the box

We can use a contributed module, Smart Trim to take this trimming functionality to another level. Let us have a look at it.

Downloading and Installing Smart Trim

The module has dependencies on a few core modules including Field, Filter, User, System, and Text. Once you have made sure these are enabled, you can download and install it using any of the below methods.

$ drush dl smart_trim && drush en smart_trim -y

or

$ drupal module:download smart_trim && drupal module:install smart_trim

or

$ composer require 'drupal/smart_trim:^1.1'

After downloading the module using composer, enable it from the admin UI available at admin/modules.

Enabling Smart Trim module using admin UIEnabling Smart Trim module using admin UIModifying Teasers of Content using Smart Trim

The module declares a new field format, Smart trimmed, with a set of configurable options. To modify the teasers of your content, follow the below steps.

  1. Navigate to Manage → Structure → Content types → {your-content-type} and select the Manage Display tab.
     
  2. Next, select the view mode from the sub-tabs. You may do it for any of your view modes, but for now, let us do it for the teaser view mode.
     
  3. Change the field format of the required field to “Smart trimmed” to take advantage of the module. You can do this for any of the text fieldsSelecting Smart trimmed text formatSelecting Smart trimmed text format
  4. Click on the gear icon to bring down the configuration options for the format. Here, as you can see, we get a lot more options than the standard trimmed format.Configuring the format settingsConfiguring the format settings
  5. You can now configure the following settings as per your preference
     

    Configuration

    Default Value

    Description

    Trim Length

    600

    The number of units of text in the Smart Trim mode (including HTML markup)

    Trim Type

    Characters

    Use characters or words to count the trim length

    Trim Suffix

    Suffix characters at the point of Trimming

    Wrap Output

    False

    Add a

    tag to wrap the trimmed content

    Wrap Class

    Trimmed

    CSS class of the wrapper

    tag

    More Link

    False

    Show a more link

    More Class

    More-link

    CSS class of more link

    More Text

    More

    Text for more link

    Summary

    Use summary if present, and do not trim

    Use a provided summary or the trimmed content

    Strip HTML

    False

    Strip off the HTML added in the WYSIWYG for the trimmed content

    Honor a zero trim length

    False

    Allow a trim length of zero units

  6. Click on “Update”, followed by the “Save” button to save the changes

Now, go back to your view or the page where the configured view mode is being used. You will observe that the changes have been successfully applied.

Teaser of an article with Smart trimmed field formatTeaser of an article with Smart trimmed field format

Looking at the source code of the page, we can see that the

wrapper tag has been added with the configured CSS classes. You can now also add custom CSS for these classes in your Drupal theme.
Observe the CSS classes applied to the div tag and more linkObserve the CSS classes applied to the div tag and more linkSumming Up

The Smart Trim module blends smoothly and proves to be one of the must-have modules or your Drupal site. Its easy configuration allows site builders to quickly add a new field format and harness the full power of the teaser view mode.

In case of any query or suggestion, don’t forget to leave a comment down below.

blog banner
Green blog banner
blog image
grey blog banner with orange scissors
Blog Type
Tech
Is it a good read ?
On

قالب وردپرس