Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Layout Builder Asset Injector module

Parent Feed: 

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;

}

 

Layout Builder Asset Injector Drupal module

| 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:

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

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.

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

 https://www.youtube.com/watch?v=3Ogya_66GDU&feature=youtu.be

| 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 

https://www.drupal.org/project/asset_injector

https://www.drupal.org/project/layout_builder_styles

Original Post: 

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

Evolving Web