Theming in Paragraphs for Drupal 8

Theming

The default paragraphs template is in paragraphs-item.html.twig.
It uses theme suggestions for other templates, the following suggestions are available:

  • paragraph__[view_mode] (e.g. paragraph--default.html.twig)
  • paragraph__[type] (e.g. paragraph--image.html.twig)
  • paragraph__[type]__[view_mode] (e.g. paragraph--image--default.html.twig)

Filters - Modifying Variables In Twig Templates

Filters in Twig can be used to modify variables. Filters are separated from the variable by a pipe symbol (|) and may have optional arguments in parentheses. Multiple filters can be chained. The output of one filter is applied to the next.

Example: {{ ponies|safe_join(", ")|lower}}

The list of filters that can be used in Twig templates for Drupal consists of all the filters in the Twig engine as well as some Drupal specific filters.

List of Twig filters.

Theming differences between Drupal 6, 7 & 8

This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.

Template naming conventions

Drupal loads templates based on certain naming conventions. This allows you to override templates by adding them to your theme and giving them specific names.

After replacing a template you must rebuild the cache in order for Drupal to discover your new template.

You can debug Twig templates to figure out which templates are being used to output the markup for any given element.

Using Classy as a base theme

Classy is a theme in Drupal 8 core that is used as a base theme for Bartik and Seven. Its purpose is to provide many classes throughout the markup that help annotate and describe markup elements that render on the page. In the past, the extra effort that Drupal applies to elements in annotating them this way has been viewed as helpful by some and a hindrance by others. In Drupal 8, you now have the option of either including or excluding this extra help.

Theme folder structure

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme. Only the .info.yml file is required, but most themes and sub-themes will use other files as well. This page lists the files and folders that are found in a typical theme or sub-theme.

Pages

Subscribe with RSS Subscribe to RSS - theming