From version 1.3, content elements can be set with curated—and optionally customizable—teasers (in pages, articles and FAQ entries). Teasers can link to almost all content types and taxonomy terms.
Previous options
- A list with text links inside the text body
- In an article, select mentioned content that is rendered as a list of default teasers (using the content's components). This link then ensures that a teaser for the magazine article is automatically placed on the linked page.
New scenarios
- An editor wants to place teasers to content and the continue the article's copy text
- A project manager wants to design a teaser to a project partner's external website
- An FAQ article requires to motivate further reading on related pages
- A page with club information should refer to a membership application form and to a members overview with links that cannot be overlooked
Teaser components
By default, the essential elements are taken from the linked content, so you simply have to select the content.
- Title (name, headline)
- Subtitle (tagline, subheadline)
- Main image
- Teaser text (summary or the trimmed body text, profile text, description)
Examples
However, these teasers now seem out of context. We can change this and create a reference using the headings:
Placement of the teasers
All teasers are placed in a teaser section so that it is always possible to combine teasers in one area and highlight this area in terms of design. To do this, we select the "Add Teaser section" button under "Content elements". We then have three further buttons within this area:
- Teaser to content
- Teaser to term
- Teaser external
For the first two, only the selection of the corresponding existing content/term is required. The content must be published, otherwise it cannot be selected. For the external teaser, a link title must be entered in addition to the URL (starting with https://). The other fields in the collapsed areas are optional.
Design options
Style
Single teasers as well as the wrapping teaser section allow the selection of a style. OpenCulturas offers two styles by default (further can be configured in your setup): "Slight contrast" sets a light gray background (like show above). "Vivid contrast" sets a colorful background gradient.
Note for themers/designers
The selection of one of the two display options sets a CSS class. This class uses custom properties ("CSS variables"), which can be changed globally for the respective OpenCulturas instance at a location in the subtheme (_variables.scss) or CSS injector.
Note for developers
Paragraphs Behaviors can be used to provide further selection options. In order to maintain the update capability, please create a fork of the "OpenCulturas - Teaser" module in your instance and use it. If you would like to suggest an addition that can also be useful for other OC instances, please create a corresponding patch in an issue on Drupal.org.
Display type
The teaser section additionally allows to change the presentation layout: By default rendered one below the other, you can choose to present the teasers in a slider or (two) side by side.
Note for site builders
The display types make use of Drupal view modes ("displays"). You can add further view modes to the paragraph "Teaser section" that will be offered here (/admin/structure/paragraphs_type/teaser_wrapper/display).
Thanks to our member CMS Garden e. V. for this OpenCulturas contribution "Individual teaser design". Finally, we demonstrate the designed teaser for an external website:
