Quick Start

The easiest way to get up and running with Modifiers is to use a module such as Modifiers Pack, which ships a number of Modifiers to get you up and running. Modifiers Pack can be used on real websites. It is also a very good place to start and see how to implement Modifiers of your own.

In order to get up and running, please follow these steps.

Download and install Modifiers Pack and dependencies

This will pull down Modifiers, Paragraphs, Media, Color Field and Video Embed Field and number of other modules. 

Review the Modifiers Pack README for instructions on how to include the additional libraries which may be required.

Enabling Modifiers Pack will install config defining the “structure” of the various Modifiers. You will see them appears as individual Paragraph bundles. Theoretically Modifiers can be implemented as an entity - we have chosen to implement them as Paragraphs Bundles because the UI provided by Paragraphs is well suited to the task.

Configuring your site to use the Modifiers

The next important step is to enable Modifiers to work with your entities. We are going to assume that you would like to attach the Modifiers to the Paragraphs you have created, however, you may want to do this with Nodes, Custom Blocks or with other entities on your site.

Let’s assume that you have a Paragraph Bundle called “Hero”. Hero Paragraphs are quite simple, they just have a Body field and are used for displaying important content at the top of the page. You would like to add the ability to add Image Background Modifier and Parallax Background Modifier to the Hero. Lets see how this can be done.

You will need to create a field with a special name to attach the Modifiers: field_modifiers. The field must be called this name in order to work. You should make this field a Entity Reference Revision field, with unlimited values. This field will allow editors to attach zero, one or many Modifiers onto any Hero Paragraphs they create.

Step 1: Install Modifiers Pack

1. Install the module as described above.

Step 2: Setup the hero paragraph

1. Create the “hero” Paragraph bundle with a body field.
2. You can create whatever you like here. It is up to you.

Step 3: Add the field_modifiers on hero

1. Manage Fields of the “hero” Paragraph.
2. Add a “field_modifiers” Entity Reference Revisions field, unlimited. You must call it this name.
3. Select the Modifiers you would like to expose: Image Background, Parallax Background.
4. Save the field configuration.

Step 4: Enable Paragraphs on your content types

1. Manage Fields on Basic Page
2. Add a “field_paragraphs” Entity Reference Revisions field, Unlimited. This name can be whatever you like.
3. Select the Paragraph bundles you would like to expose: Hero.
4. Save the field configuration.

Step 5: Display the Paragraphs on your content

1. Manage Display, for Full Content, on Basic Page.
2. Add field_paragraphs into the content to be displayed.

Step 6: Create some content

1. Add a Basic Page
2. Fill in the required Fields such as Title.
3. Add a Hero paragraph and content.
4. During the Hero paragraph creation, you can add a Image Background Modifier. 
5. Select the image as Media and save the Modifier.
6. Save the hero Paragraph.
7. Save the Content.
8. View the Page.

Step 7: Check the node

1. You should see your hero content, with background image behind it!

Next Steps

Now that you have created some content with a Modifier, you will notice that the modifier code has altered the look and feel of the content. Generally speaking, Modifiers will alter the render array to achieve what they need to do, however, they will do the bare minimum, leaving it up to you, the site builder and themer, to add style as required.

You may notice, for example, that the background image has been applied, but there is no padding on the content. You can style it yourself using class below, or you can use Padding Modifier to allow adding different paddings by editors.