Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

How to add custom settings to layouts in Drupal 8 & 9

 

The layout builder lets users change the way their content is presented. There was some projects in Drupal 7 which were similar to layout builder, but it was never as effective, or as user friendly like the Layout API. The layout, when set up, can affect a content type globally, or user can change layout per node.

The layout builder can be used in two ways. You can use it to create a layout for each content type on your site and you can also use it to create a layout for each individual piece of content.

Read this tuto If you want to read how to create custom layout in Drupal 8 & 9.

After you create custom layout it's possible to use a custom 'class' for a layout! This can be useful if, for example, you want your layout to have custom settings so that users can change the way the layout is rendered.

Here's an example layout class which provides a settings form to add classes to custom layout:

 

<?php

namespace Drupal\mymodule\Plugin\Layout;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Layout\LayoutDefault;
use Drupal\Core\Plugin\PluginFormInterface;

class MyLayoutClass extends LayoutDefault implements PluginFormInterface
{

  /**
   * {@inheritdoc}
   */
  public function defaultConfiguration()
  {
    return parent::defaultConfiguration() + [
        'layout_classes' => 'layout',
        'region_classes' => 'region',
      ];
  }

  /**
   * {@inheritdoc}
   */
  public function buildConfigurationForm(array $form, FormStateInterface $form_state)
  {
    $configuration = $this->getConfiguration();
    $form['layout_classes'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Layout classes'),
      '#default_value' => $configuration['layout_classes'],
    ];

    $form['region_classes'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Region classes'),
      '#default_value' => $configuration['region_classes'],
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function validateConfigurationForm(array &$form, FormStateInterface $form_state)
  {
// any additional form validation that is required
  }

  /**
   * {@inheritdoc}
   */
  public function submitConfigurationForm(array &$form, FormStateInterface $form_state)
  {
    $this->configuration['layout_classes'] = $form_state->getValue('layout_classes');
    $this->configuration['region_classes'] = $form_state->getValue('region_classes');
  }

}

 

Then your *.layouts.yml could look like:

custom_layout_2:
  label: Custom Layout 2
  category: Custom
  class: '\Drupal\mymodule\Plugin\Layout\MyLayoutClass'
  path: layouts/custom-layout-2
  template: custom-layout-2
  library: mymodule/custom-layout-2-library
  regions:
    main:
      label: Main content

 

And in your Twig template, you now have access to the {{ settings.layout_classes }} and {{ settings.region_classes }} variables. So, your layouts/custom-layout-2/custom-layout-2.html.twig could look like:

{#
/**
 * @file
 * Default theme implementation to display a one plus four grid layout.
 *
 * Available variables:
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 *
 * @ingroup themeable
 */
#}

<div class="custom-layout-2 {{ settings.layout_classes }}">
  <div class="main-region {{ settings.region_classes }} ">
    {{ content.main }}
  </div>
</div>

 

The form settings is like this:

custom layout classes

 

 

and after you submit the form your classes are added to twig file like this:

custom layout classes twig

 

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon