A Guide to SDC Variations with Paragraphs in Drupal 10
Single Directory Components (SDC) are like building blocks in Drupal. They bring together HTML, CSS, and JavaScript to create something you see on a webpage. The idea is to keep everything related to a specific element in one place, making it easy to find and manage.
To know more about the SDC component refer this blog SDC — Single Directory Component
Paragraphs Module:
Quoting from paragraphs module itself:
“Paragraphs is the new way of content creation! It allows you — Site Builders — to make things cleaner so that you can give more editing power to your end-users.
Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything you want from a simple text block or image to a complex and configurable slideshow”.
- To know more about paragraphs module refer to this link.
- To include the paragraphs module in drupal: composer require ‘drupal/paragraphs’
Use Case (SDC with Paragraph type):
Use SDC with Paragraph needs some module:
- SDC Display
SDC Display enables site builders to utilize the components available on the site within the Manage Display tabs of entities. With SDC Display, you can easily configure which component a specific field uses or choose the component for a particular view mode. This allows for more flexibility and customization in displaying content on your website.
Command to include SDC Display: composer require ‘drupal/sdc_display’
- Paragraphs View Modes:
This module includes a behavior plugin designed for the Paragraphs module. With this plugin, you can choose a different view mode for the paragraph directly in the content add/edit form.
Command to include Paragraphs View Modes: composer require ‘drupal/paragraphs_viewmode’
How to Integrate SDC component with Paragraphs:
- First create two SDC components(You can have one or more components). For example,
hero-banner-with-image.component.yml
hero-banner-without-image.component.yml
To see complete SDC components example refer to this github link.
- Create the Paragraph Type Hero Banner and Create hero-banner related field**.**
E.g. : Title, Description, image, CTA Button etc.
- Create the View mode in paragraph /admin/structure/display-modes/view:
- Enable that view mode in Hero Banner paragraph in manage display and see the custom display setting have view modes which you have create in previous steps:
- In Paragraph view mode manage display you can see the option Single directory components options. In Single directory components option enable the option(Render using a component):
You can see the SDC components list in SDC options:
- Now select the component which you want to render in paragraph view mode
After selecting the component you have to map the paragraph field to SDC component:
Same for other paragraph view mode you can select the other SDC Component which you want to render for that view mode.
- After Map the paragraph field to SDC component field then edit the banner paragraph and search the paragraph view mode and select the view mode which you want to allow when you create the content for banner:
- When all the above steps is completed then you have to enable the banner paragraph in block type and content type as a reference which you want:
- After following the steps mentioned above you can create the content and add the banner data and select the behavior (Paragraph View mode):
- The final result of a component after following the steps mentioned above will look like:
For ‘Default’ (Banner with image) View Mode:
For ‘Banner Without Image’ view mode:
Summary/Conclusion:
The integration of the SDC Display module with paragraph types and view modes in Drupal offers a promising approach to streamlining content creation and management. By leveraging SDC for reusable components and custom view modes for paragraphs, developers can enhance the flexibility and efficiency of Drupal websites. While specific integration details may require further exploration, the potential benefits of this approach are evident.
References:
Written by
Deepanshu Varshney — Frontend Engineer
This post was originally published on qed42.com
