Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughLayout Builder Asset Injector module
Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface. Our recently contributed module - The Layout Builder Asset Injector module is definitely not a replacement for theming, but it provides site administrators with a quick and easy approach. The Layout Builder Asset Injector module allows site builders to add CSS and JS to the layout builder blocks.
| Benefits
-
It allows you to inject CSS and JS within the layout builder blocks without the need to add it in the codebase.
-
Append unique CSS and scripts specific to layout builder blocks
-
It provides content editors with basic knowledge of CSS and JS to style their individual layout builder blocks and add short JS scripts to modify the behaviour.
-
Instead of adding CSS and JS on a page level, this module allows you to inject them on an individual block.
| CSS Injector
CSS Injector allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme.
| JS Injector
JS Injector allows administrators to inject JS into the page output based on configurable rules. It's useful for adding simple JS tweaks without modifying a site's official theme.
Note: Block class will be appended automatically to each CSS.
For example when we add a CSS as given below:
h1.node__title {
background-color:red;
}
It will automatically append the class of the block for which CSS is added once saved.
.block-field-blocknodepagebody h2.node__title{
background-color:red;
}
| How does it work?
-
Enable the Layout Builder Asset module
-
After you enable the module, enable the layout option from the manage display section as shown below:
To understand Layout Builder in detail refer https://www.drupal.org/docs/8/core/modules/layout-builder
-
You can add your styling and scripts under the CSS and JS fields respectively
-
To make the styling and scripts specific to a block, add classes under the Classes text field. This class should be unique so as to reflect scripts and styling specific to a block.
-
On adding the CSS and JS and saving the configuration, it will automatically prefix the CSS with a custom class added.
Note: You don't need to add it manually.
| Implementing the Layout Builder asset injector module
Click here for the steps to install the Layout Builder asset injector module - https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules
| Developer support
Kishor Kolekar: https://www.drupal.org/u/kishor_kolekar
Harshal Pradhan: https://www.drupal.org/u/hash6
Abhishek Mazumdar: https://www.drupal.org/u/abhisekmazumdar
Hardik Patel: https://www.drupal.org/u/hardik_patel_12
Naresh Bavaskar: https://www.drupal.org/u/naresh_bavaskar
| Module download link
https://www.drupal.org/project/layout_builder_asset
| Alternative module links
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web