Add CSS/JS to particular view?

Question

I'm having trouble understanding how to attach a library to views. I want my assets to be included in /foo but not in /bar. I've read through the documentation on this more than once and from my understanding this is achieved by using preprocess, such as:

function my_theme_preprocess_page(&$variables) {
  if($variables['is_front']){
    $variables['#attached']['library'][] = 'my_theme/my_library';
  }
}

I'm new to Drupal so forgive my inherit ignorance, but what does $variables contain? 'is_front' is easy enough, but how do I apply this to views or content types?

Thank you all in advance.

Answer 1

but what does $variables contain?

A couple of render arrays and some values that be used by twig template. Your best option is check de documentation for each preprocess function to see what are included in $variables. Docs link template_preprocess(&$var) better explanation about preprocess functions and default list of template preprocess functions

but how do I apply this to views or content types?

For me the best option is your twig template file by including this line.

{{ attach_library('my_theme/my-library') }}

No matter how many times this will be 'attached' only one will be downloaded (or aggregate). And only will added if this particular template will be rendered.

More info about Twig debug is here

Answer 2

One way to do it via your theme:

Set up your js as a library in your mytheme.libraries.yml file:

library-name:
  js:
    js-file-location/js-file-name.js: {}

Call your library in a preprocess hook in your mytheme.theme file:

/**
 * Implements hook_preprocess_views_view().
 */
function mytheme_preprocess_views_view(&$vars) {
  $vars['#cache']['contexts'][] = 'route';
  if ($vars['view_array']['#name'] == 'view_name') {
    $vars['#attached']['library'][] = 'mytheme/library-name';
  }
}

You'll need to replace these parts with your own actual code:

• js-file-location - is it in a folder?
• js-file-name - include the extension, I've used .js in this example
• library-name - call it whatever you like
• mytheme - the machine name of your theme

Note the cache context in this example is set to cache per route. It's important to know about it but outside the scope of this question.

Source: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

Answer 3

I made a module for that for Drupal 8: Views Attach Library.

The Views Attach Library module is designed to attach multiple libraries (JS and CSS) to views by providing just a library name.

How to use?

Installation is as simple as copying the module into your modules/contrib directory, then enabling the module.

To add a library to a view follow below steps:

1. Create or edit view
2. Find Attach Library section
3. Click on add library or edit library
4. Add or edit library name in textfield.

Answer 4

As per the documentation of template_preprocess_page():

See the page.html.twig template for the list of variables.

To know if a page is a view, please refer to: hook_preprocess_page(): how to tell a views page?

The content type is available as a property of the $node variable: $variables['node']->type.

Answer 5

Using hook_views_pre_render() a library can be attached to a view with JS/CSS.

<?php
/**
 * Implements hook_views_pre_render().
 */
function hook_views_pre_render(ViewExecutable $view) {
  if (isset($view) && ($view->storage->id() == 'test_view')) {
    $view->element['#attached']['library'][] = 'custom/view.lib';
  }
}

Here 'custom/view.lib', custom is the module/theme name and view.lib is the library name.