Overview

The Modifiers module defines a system for defining how modifications can be consistently applied to elements on a page. In short the modules provides a way to alter the look and feel of entities on the page. Modifiers work by leveraging the power of the Drupal theming system - altering the render array of entities before they are rendered to the page.

The power of Modifiers comes from being applicable to elements as defined by a selector. This means they can be applied to entities (Nodes, Blocks, Paragraphs, Users, etc), theme regions (header, footer, etc), View Modes (full, teaser, etc), classes in the WYSIWYG and anything you can think of and define.

Modifiers are developed by architects and programmers and used by site builders and editors. They are designed to make site building easy and pleasurable… and fast.

The module is comprised of a number of components which work together:

• A Modifier interface and plugin manager which defines what Modifiers do.
• An internal system which converts field content data into a simple array structure which is used to configure the Modifier instances.
• A hook into entity rendering, allowing for modifiers to attach to entities.

This module is a foundation for two other helpful modules:

• Look - Handle collections of Modifiers and apply them on a per page basis.
• Modifiers Pack - A number of Modifier implementations to get you up and running quickly with useful modifications such as colors, background images, parallax images, background video, shadows, corners and the like.

Please note that Modifiers is only an API module. It does nothing on its own. Modifier plugins must be implemented in order to make use of the module.

Features

The Modifiers module provides a couple of helpers which allows for easy use of the module.

modifiers-has-background class

Modifiers which add a background should be aware that it is likely that the content will need to have padding for aesthetic reasons. When this is required, it is recommended that the Modifier code drop a “modifiers-has-background” class onto the element. This will make it much easier to theme. Please refer to the implementation of Image Background Modifier to see this in action. 

This allows themers to add code similar to the following into the theme:

.modifiers-has-background {
  padding: 1rem;
}

Media queries to the rescue

As Modifiers are largely concerned with presentation, there will be times when you do not want the modification to be done on certain breakpoints. For example, maybe you do not want a Video Background to play on devices smaller than 768px. There are several examples of how this can be done in the Modifiers Pack modules.

Discoverable in the theme layer

Generally plugins are only discoverable via Drupal when implemented as modules. However, Modifiers are similar to Layouts in that they should also be discoverable when implemented in the theme layer. This allows themers to define their own implementation in the theme that they are working on.

This can be handy when you may be working in an environment which doesn’t allow the addition of new code. In these cases you can just copy across the modifier code to your theme. Please see the section below on how to do this.

Other modules

There are a number of other modules which can be helpful to us in conjunction with the Modifiers module.

Look

Manages collections of Modifiers and assigns them to selectors on a page. Helpful for when you want to modify theme regions and other elements which are not represented by an entity.

Entity Class Formatter

Allow editors to select a class to drop onto an entity, allowing the entity to be themed. This is a much simpler approach than Modifiers because editors only need to select a single option, rather than creating a Modifier.

Slack

Please drop by the Drupal slack channel for Modifiers if you wish to discuss them with other enthusiasts.
https://drupal.slack.com/messages/CCYNZ05CG/

Happy modifications!