1

I'm beginning with D8, but I work a lot with D7 and Magento. I follow the developer documentation to add a library in my theme, and I don't understand why it's loading it on every page. I only want attach it to a brunch of page with a preprocess hook. Could you help me please?

In my theme.libraries.yml I add this at the end:

hover3d:
  js:
    js/hover3d.js: {}

In my theme.info.yml I add under libraries "theme/hover3d".

Here is specific information:

  • I deactivated JavaScript/CSS compression in the back office and in my settings.local.php file
  • My theme is a sub theme of bootstrap_barrio
  • My Drupal version is 8.6.3
  • There is no custom / contrib modules yet
  • I discover it by inspecting my page

js

  • I don't really understand how JavaScript parts are loaded, but I suppose it's with lazy builders which are called placeholder and in D8 for rendering JavaScript there are two (or more) which are js-placeholder and js-bottom-placeholder. I see in my HTML structure that in the js-placeholder is only loaded modernizer and in the js-bottom-placeholder all the others. I don't know if this is a correct JavaScript rendering procedure, so I keep it here if it can help you.
5

In my theme.info.yml i add under libraries "theme/hover3d".

That's why it's loaded on every page. libraries in the theme info file is:

A list of libraries (which can contain both CSS and JavaScript assets) to add to all pages where the theme is active.

To add it contextually, attach it to a relevant render array. For example:

function MYTHEME_preprocess_node(&$variables) {
  // Library will only be loaded when a node is rendered on the page.
  $variables['#attached']['library'][] = 'theme/hover3d';
}

See Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme for more information.

  • Oh that's why ! I thinked that only global-styling and global-js was globally loaded i misunderstands the docs. Thanks – Kpone Nov 22 '18 at 16:48
  • Yeah global-* is quite confusing – Clive Nov 22 '18 at 17:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.