Skip to main content

How To Attach Library To A Specific Content Type

If you need to upload a library with module during its operation, in drupal its called attaching file.

Attaching a library can be done in several ways depending on your needs. 
Remember that the library is always registered by its module or theme name followed by the library name. 
In this case, it would be 'example/example'.

module: hook_element_info_alter()
module: hook_page_attachments()
theme: template_preprocess_HOOK()
twig: {{ attach_library('example/example') }}

in order to keep drupal application well performance it is important to upload a library only when its needed.
you can attach a library to entity, block, form, etc.
 

I found a way how to attach a library to specific content type using the hook method: _page_attachments

inside the method, I am using the routeMatch service of core module BigPipe (make sure its activated)

on pages which are not content display full-content the $node will be null.

 

function rwcenter_page_attachments(array &$attachments) {
	$attachments['#attached']['library'][] = 'rwcenter/content';
        
    $node = \Drupal::routeMatch()->getParameter('node') ?? \Drupal::routeMatch()->getParameter('node_preview');
    if (is_null($node)) {}
    else {
    	if ($node->getType()=='rwcenter') {
        	$attachments['#attached']['library'][] = 'rwcenter/content';
        }
    }        
}

An Asset library in Drupal is nothing but a YAML data structured inside a THEMENAME.libraries.yml file and they contain only CSS and JS files. 
They are the bundles of CSS and JavaScript files that present inside a module or theme and perform together for style and functionality.

The Asset Library in Drupal provides a centralized and organized repository for managing various types of digital assets.
Assets Library boasts various features designed to enhance usability, scalability, and flexibility.
Asset Library in Drupal is designed to support responsive web design, ensuring that assets are displayed consistently on various devices.
Drupal places a strong emphasis on accessibility, and the Asset Library follows these standards to ensure a positive user experience for all.
Drupal's Asset Library includes version control features, allowing users to manage and track changes to assets over time.
Performance Optimization

content:
  version: 1.0
  CSS:
    theme:
      css/rwcenter.css: {}
  js:
    js/rwcenter.js: {}

 

function hook_page_attachments

Add attachments (typically assets) to a page before it is rendered.
Use this hook when you want to conditionally add attachments to a page. 
This hook can only be implemented by modules.

If you want to alter the attachments added by other modules or if your module depends on the elements of other modules, use hook_page_attachments_alter() instead, which runs after this hook.

If you try to add anything but #attached and #cache to the array, an exception is thrown.

Parameters
array &$attachments: An array that you can add attachments to.

 

uploading library on theme for specific node:

function formation_preprocess_node(&$variables) {
  $nid = $variables['node']->id();
  if($nid === 150){
    $variables['#attached']['library'][] = 'formation/node-css';
  }
}
function rwcenter_page_attachments(array &$attachments) {
	$attachments['#attached']['library'][] = 'rwcenter/content';
        
    $node = \Drupal::routeMatch()->getParameter('node') ?? \Drupal::routeMatch()->getParameter('node_preview');
    if (is_null($node)) {}
    else {
    	if ($node->getType()=='rwcenter') {
        	$attachments['#attached']['library'][] = 'rwcenter/content';
        }
    }        
}