Exercise 10

Hero paragraph type

The same way we built the back-end for the Quote pattern, we will now do it for the Hero pattern.

Create a paragraph type

Before we can start populating the hero pattern with Drupal data, we need to create the framework for plugging the pattern with Drupal. We will do this by creating paragraph type with the same fields found in the hero pattern (image, heading, body, button).

1. Login to your drupal site as an administrator
2. Click Structure | Paragraph Types
3. Click Add paragraph types
4. Under the Label field type Hero then click Save and manage fields
5. Once paragraph type hero is created, click Add field
6. Under the Add a new field dropdown, select Text (plain)
7. Under label type Hero heading
8. Click Save and continue
9. Limit the number of values to one(1) and click Save field settings
10. Scroll to the bottom of the next page and click Save settings
11. Repeat steps 5 - 10 for the Hero body field. Use these settings:
    • Field type: Text (plain, long) (step 6)
    • Field label: Hero Body (step 7)
    • All other settings are the same as above
12. Repeat steps 5 - 10 for the Hero eyebrow field. Use these settings:
    • Field type: Text (plain) (step 6)
    • Field label: Hero Eyebrow (step 7)
    • All other settings are the same as above

Adding Image field

While still in the Manage fields screen, do this:

1. Click Add field
2. Under the Add a new field dropdown, select Image
3. Under label type Image
4. Click Save and continue
5. Scroll to the bottom and click Save field settings
6. Click Save settings

Adding Button field

While still in the Manage fields screen, do this:

1. Click Add field
2. Under the Add a new field dropdown, select Link
3. Under label type Button
4. Click Save and continue
5. Limit the number of values to one(1) and click Save field settings
6. Scroll to the bottom and click Save field settings
7. Click Save settings

Add Hero Paragraph type to Basic Page content type

A paragraph type alone is useless. In order for us to add data to the paragraph type we need to add the paragraph type to another entity such as a block or content type, as an entity reference field. Then we can create new content using the content type and this will allow us to fill in the hero paragraph fields. Let's do this now.

1. Click Structure | Content Types | Basic Page | Manage Fields
2. Click Add field
3. From the Add a new field dropdown, select Paragraph, which is located under Reference revisions
4. Type Hero as the field label and click on Save and continue
5. Ensure _Type of item to reference _is Paragraph and limit the Allowed number of values to one(1)
6. Click Save field settings
7. Under the Reference Type fieldset you will see Paragraph types
8. Check the box next to Hero and click on Save Settings.