A Better Version of The Teaser

Submitted by D2D on Thu, 05/14/2020 - 13:51

I don't know why someone smarter than me didn't post this somewhere or if the issue is unique to the Mayo theme that I use on most of my sites, but I have never been happy with the format of the "Teaser" provided by CKEditor, and when I started experimenting with Gutenberg, the situation got worse.


Whoever chooses fonts in Drupal 8 and/or the 2 editors must be very young or does not ever read the websites.  The default fonts are too small, and those in the teaser can't be adjusted.  To make matters worse, if you try to add a thumbnail image to the teaser, it looks awful.  I suppose I could adjust the sub-theme CSS on my sites, but I am moore comfortable using Drupal's graphic tools, and it's a lot quicker and more flexible.


To add Teaser that you can control, try this:

             1.   Add a Text (Formatted, Long) field.

             2.   Label the field something like Summary.

             3.  Move the new field to be above the body in "Manage Form Display.

             4.  In the Content tab in Manage Display, hide the field.

             5.  In the Teaser tab in Manage Display hide everything but the new field.

             6.  Now if you use a view similar to the default Front Page, the Font, Size, Text Color, and Highlight can all be adjusted (assuming that you have activated then for the text format you are using.


A thumbnail image can be added to the teaser in a similar manner.  Add an image formatted as a thumbnail and display it only in the teaser.


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.