Creating Content Builder Using Paragraphs - Drupal

Content Builder Using 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

 

CSS or classes inside the body field's source.

 

Machine name: content_textarea_wysiwyg

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.

Content Builder Using Paragraphs

 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"
Content Builder Using Paragraphs
  • Add new field called "Class"

   Machine name: field_single_textfield

   Field Type: text

   Widget Type: text field

Content Builder Using Paragraphs
  • 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

Content Builder Using Paragraphs
  • 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

Content Builder Using Paragraphs

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

  • Create a new paragraph bundle

            Name: Gallery

            Machine name: content_gallery

Content Builder Using Paragraphs
  • 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.

Content Builder Using Paragraphs
Content Builder Using Paragraphs

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

Content Builder Using Paragraphs
  • 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

Content Builder Using Paragraphs
Content Builder Using Paragraphs

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

Content Builder Using Paragraphs
Content Builder Using Paragraphs
Content Builder Using Paragraphs

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.

Content Builder Using Paragraphs

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".

Content Builder Using Paragraphs
Content Builder Using Paragraphs
Content Builder Using Paragraphs

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

Content Builder Using Paragraphs

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

Content Builder Using Paragraphs

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

Content Builder Using Paragraphs

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

Content Builder Using Paragraphs
  •  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

Content Builder Using Paragraphs
Content Builder Using Paragraphs
Content Builder Using Paragraphs
Content Builder Using Paragraphs

 Final Result

Content Builder Using Paragraphs