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 create custom 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.

in this tuto I'll show you how to create custom layouts with Layout API in drupal 8 & 9.

 

Create Custom Module

Go ahead and create a custom module called mymodule.

If you use Drush, just run the following command and fill in the prompts.

drush generate module

NOTE: The generate command only works in Drush 9 and up.

Or, you can do it the old fashion way.

1. Create a folder in modules/custom/mymodule.

2. Create a mymodule.info.yml file and add the following into it:

name: My Module
type: module
description: The description.
package: Custom
core: 8.x
core_version_requirement: ^8 || ^9

 

Create Custom Layouts

Create a mymodule.layouts.yml file in your theme or module.  Add information for your layout. It’s mandatory to add a machine name, label, category, template reference, and regions in this format.

Example:

In the template file, you can add regions that you create in the mymodule.layouts.yml file in the form of twig variables.

layout_oneplusfourgrid_section:
  label: 'Custom One plus four grid'
  path: layouts/oneplusfourgrid_section
  template: layout--oneplusfourgrid-section
  library: mymodule/oneplusfourgrid_section
  category: 'Custom grid'
  default_region: first
  icon_map:
    - [first, second, third]
    - [first, fourth, fifth]
  regions:
    first:
      label: First
    second:
      label: Second
    third:
      label: Third
    fourth:
      label: Fourth
    fifth:
      label: Fifth

 

Create a templates directory, where you will have templates for your layout. In my case it’s: layouts/oneplusfourgrid_section/layout--oneplusfourgrid-section.html.twig

In the template file, you can add regions that you create in the mymodule.layouts.yml file in the form of twig variables.

Example:

{#
/**
 * @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
 */
#}
{%
  set classes = [
  'layout',
  'layout--oneplusfourgrid-section',
]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>

    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
      </div>
    {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      <div class="layout__four-grid-group">
    {% endif %}

      {% if content.second %}
        <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
          {{ content.second }}
        </div>
      {% endif %}

      {% if content.third %}
        <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
          {{ content.third }}
        </div>
      {% endif %}

      {% if content.fourth %}
        <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
          {{ content.fourth }}
        </div>
      {% endif %}

      {% if content.fifth %}
        <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
          {{ content.fifth }}
        </div>
      {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      </div>
    {% endif %}

  </div>
{% endif %}

 

also add a file mymodule.libraries.yml which contained the style of the layouts.

Example:

oneplusfourgrid_section:
  css:
    theme:
      layouts/oneplusfourgrid_section/oneplusfourgrid_section.css: {}

 

 

The above code snippet produces the following icon map: 

custom layout icon

 

 

Then any section use our layout will be displayed like this:

custom layout

 

Read this tuto If you want to add custom settings to layouts in Drupal 8 & 9.

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