Drupal : Hướng dẫn tạo Content Builder sử dụng Paragraphs

WYSIWYG allows you to create content in whichever way you like, as the name suggests “What You See Is What You Get” it’s fairly simple for developers to work around WYSIWYG, you can create different layouts. In general, WYSIWYG implies the ability to directly manipulate the layout of a document without having to type or remember names of layout commands. The actual meaning depends on the user’s perspective.

Although if you attempt to edit the content without any fair knowledge, you might break the div structure and it may not appear as you would have wanted it to.

For the same reason, I have created a custom content builder, which lets you edit the content without breaking the div structure with the help of different classes. It means, classes let you edit and create content with ease. I have built this with the help of “Paragraphs”, paragraphs allow site builders to make things cleaner so that they can give more editing power to your end-users. You can also add custom option fields and do conditional coding in your CSS, JS and preprocess functions so that end-users can have more control over the look and feel of each item. This is way much cleaner and stable than adding inline

Machine name: content_textarea_wysiwyg

CSS or classes inside the body field’s source.

For this example we are going to allow editors to add extra WYSIWYG, photo galleries.

Steps to create a content builder:

1. Install & enable paragraphs module, we use paragraphs to create each element e.g. WYSIWYG.

2. Create a new taxonomy term which will be used to create grid columns (by using classes).

• Goto Admin Menu -> Structure -> Taxonomy Add Vocabulary (/admin/structure/taxonomy/add) to create a new Vocabulary called “Grid Columns” with the machine name “content_grid_columns”

• Add new field called “Class”

Machine name: field_single_textfield

Field Type: text

Widget Type: text field

• While adding taxonomy, make sure to add classes correctly. For bootstrap theme use following classes: e.g. col-md-6, col-md-4

3. Create a paragraph bundles:

i. As per our example, to create the textarea (WYSIWYG):

• Goto Admin Menu -> Structure -> Paragraph Bundles -> Add Paragraph Bundle (/admin/structure/paragraphs/add)
• Create new bundle:

Name: Textarea (WYSIWYG)

Machine name: content_textarea_wysiwyg

• On the manage fields screen create a new field with the following properties:

Label: Body

Machine name: field_body

Field Type: Long text and summary

Widget: Text area with a summary

ii. As per our example, to create the Gallery:

• Create a new paragraph bundle

Name: Gallery

Machine name: content_gallery

• On manage fields, create a new field with the following properties. This will be title of gallery:

Label: Title

Machine name: field_title

Field Type: Text

Widget: Text field

• On manage fields, create another field with the following properties. This will be images for gallery:

Label: Gallery

Machine name: field_gallery

Field Type: Image

Widget: Image Allow “Number of values” to be “Unlimited” on image field.

 

 

iii. Create a main paragraph item which is used to pull out all paragraph bundles created.

• Create new bundle:

Name: Column

Machine name: content_grid_column

• Create a new field. This field should join to our newly created taxonomy term: “Grid Columns”

Label: Column Width

Machine name: field_paragraph_column_class

Type: Term reference

Widget: Select list

• Third field is used to pull in our different paragraph bundles. Select the available paragraph items for the page builder (Textarea (WYSIWYG), Gallery).

Label: Element

Machine name: field_paragraph_element_referenc

Type: Paragraphs

Widget: Embedded

4. Install & enable Entity Construction Kit module with its dependencies — Entity API & Chaos tools.

5. Goto Admin Menu -> Structure -> Entity Type -> Add Entity Type (/admin/structure/entity-type/add) to create a new entity called “Section”, with the bundle name “Section”. Machine name is kept as “content_builder_section” for entity type. This will create a section.

6. Add existing field called field_paragraph_element_referenc to “Section” bundle with label “Column”. In the field settings, select the Column paragraph & save. Allow “Number of values” to be “Unlimited”.

 

 

 

 

7. Install & enable Entity reference & Inline Entity Form modules.

8. We can now add our entity Section to all the content types required.

• Goto the content types & create a new field:

Label: Grid Section

Machine name: field_grid_section

Type: Entity Reference

Widget: Inline entity form — Multiple values

For the target type select our create entity: Section & the target bundle: Section.

For the field settings select: Allow users to add new Section.

• Add the existing field “Grid Section” for other content types.

9. Now that we have setup our entities & paragraph bundles, we need to do some preprocess work to make sure our grids actually work. To do this we alter the grids by using the column classes field we setup (Class (field_single_textfield))

• Create a new module named “content_page_builder”
• In our .module file: content_page_builder.module add a new include:

<?php
/**
* @file
* Code for the Content Page Builder feature.
*/
include_once ‘inc/content_page_builder.preprocess.inc’;
?>

Create a new directory called inc create a new file content_page_builder.preprocess.inc, with following code

<?
php
/**
* @file
* content_page_builder.preprocess.inc
*/
/**
* Implements template_preprocess_entity().
* @param $vars
*/

function content_page_builder_preprocess_entity(&$vars) {

/*
* Add grid class to each paragraph item.
*/
if ($vars[‘entity_type’] === ‘paragraphs_item’ && $vars[‘paragraphs_item’]->bundle == ‘content_grid_column’) {
/*
* Loop through available classes and set the content width accordingly.

*/
$class_tid = !empty($vars[‘paragraphs_item’]->field_paragraph_column_class[‘und’]) ? $vars[‘paragraphs_item’]->field_paragraph_column_class[‘und’][0][‘tid’] : ‘full’;

if (is_numeric($class_tid)) {
$term = taxonomy_term_load($class_tid);
$class = $term->field_single_textfield[‘und’][0][‘value’];
} else {
$class = ‘twelve columns’;
}
/* $additional_class_tid = !empty($vars[‘paragraphs_item’]->field_paragraph_additional_class[‘und’]) ? $vars[‘paragraphs_item’]->field_paragraph_additional_class[‘und’][0][‘tid’] : ‘none’;
if (is_numeric($additional_class_tid)) {
$term = taxonomy_term_load($additional_class_tid);
$additional_class = $term->field_single_textfield[‘und’][0][‘value’];
}*/

$vars[‘classes_array’][] = $class;

/*if (isset($additional_class)) {
$vars[‘classes_array’][] = $additional_class;
}*/

}
// Unset paragraphs title
if ($vars[‘entity_type’] === ‘content_builder_section’) {
$vars[‘title’] = NULL;
$vars[‘classes_array’][] = ‘row’;
}
// Remove user display name from paragraph items.

if (!empty($vars[‘content’][‘user_display_name’])) {

unset($vars[‘content’][‘user_display_name’]);
}
}
?>

Final Field view on content type

Final Result

Originally published