Building the back-end for Card component
Create Paragraph Types (Entities)
We will use the paragraphs module to integrate our components with Drupal by creating custom paragraph types. However, components can be integrated using other entities types such as custom blocks, custom content types, etc.
Create a Card paragraph type
- Login to your drupal site with administrator previleges
- Click Structure | Paragraphs types
- Click the Add Paragraphs type blue button
- For label type Card and click Save and manage fields
Add the following fields and properties to the Card paragraph type:
| Field label | Field type | Field machine name | Allowed # of values |
|---|---|---|---|
| Image | Image | field_image | Limited 1 |
| Title | Text (plain) | field_title | Limited 1 |
| Rating | Text (plain) | field_rating | Limited 1 |
| Teaser | Text (plain, long) | field_teaser | Limited 1 |
Add the Card paragraph type as an entity reference field to Basic Page Content type
Paragraphs on their own are useless. In order to make use of the Card paragraph type we need to add it as an entity reference field to a content type or custom block. For the purpose of this training, we will use the Basic Page content type.
Click Structure | Content Types
Click the Manage Fields button next to Basic Page
Click the Add field blue button
From the Add a new field dropdown, select Paragraph
In the label field type Card and click Save and continue
Leave Type of item to reference as Paragraph
Change the Allowed number of values to Limited 1
Click Save field settings
Under the Reference Type fieldset, check the box next to Card and click Save Settings
Create a new node of type Basic Page
Now that we have added the Card paragraph type to the Basic Page content type, let's create a new node of type Basic Page and populate all the fields.
Our component is rendered however we still need to do a little more work so Drupal knows we have a component available we want to use.
Previous: Setup for components BE
Next exercise: Build Hero Paragraph type