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:
Then any section use our layout will be displayed like this:
Read this tuto If you want to add custom settings to layouts in Drupal 8 & 9.
