Drupal Paragraphs: Introduction and Example

Drupal Paragraphs are a powerful content organization tool. They allow us to break down content into smaller, reusable components. This means we can mix and match different elements, like text, images, and videos, creating dynamic and engaging pages. With Paragraphs, we have more control over the layout and design of our content, making it easier to create visually appealing and user-friendly websites. It's like having a toolkit of building blocks to construct our pages exactly the way you envision them. Plus, since Paragraphs are modular, they make it simple to update and rearrange content without disrupting the entire page. This flexibility makes Drupal Paragraphs an excellent choice for content-rich websites where versatility and consistency are key.

How to install the Paragraphs module

Paragraphs module can be installed using the following composer and drush commands:

composer require 'drupal/paragraphs:^1.16'

drush en paragraphs

How to render Drupal paragraphs in the node template

One of the most common use cases of a paragraph is to add it in a content type as an entity reference field. This gives us the ability to add multiple blocks of content in a structured format.

Content Type Manage Field will look like this: 

Image

 Paragraph Type Manage Field will look like this: 

Image

We need to create a twig file in theme/templates folder with following name:

node--[content-type].html.twig

In this file, we can access and render the values of this paragraph field as follows

      
{% for key,items  in content.field_web_story_pages['#items'] %}
	{% set item = content.field_web_story_pages[key]['#paragraph'] %}
        {% set cover_image_url = item.field_story_image.entity.field_media_image.entity.uri.value %}
        {% set page_title = item.field_story_title.value %}
        {% set page_text = item.field_story_text.value %}
            {{ file_url(cover_image_url) }}
			{{ page_title }}
			{{ page_text|raw }}
{% endfor %}

Reference for more details