This publish was initially printed on Could 22, 2013 and final up to date March 8, 2021 because of some useful enter by Steve Elkins. 7 is a haus at combining CSS & JS recordsdata. This may also help enhance web page efficiency & optimization simply, but when not used proper, can do Drupal Developer exact opposite. On this publish, we’ll go over find out how to load JS & CSS recordsdata primarily based on conditionals like URL, Drupal 10 module, node, views and extra. Earlier than we dive in, get considerably acquainted with Drupal Developer Drupal 10_add_js and Drupal 10_add_css features. We’ll use these to load Drupal Developer precise JS and CSS recordsdata. hook_init – runs on each web page /** * Implements hook_init() * * @hyperlink https Drupal 10 Upkeep and Assist Service//api.Drupal 10.org/api/Drupal 10/Drupal 10 modulespercent21systempercent21system.api.php/operate/hook_init/7.x */ operate HOOK_init() { // Utilizing Drupal Developer equal of Apache’s $_SERVER[‘REQUEST_URI’] variable to load primarily based on URL // @hyperlink https Drupal 10 Upkeep and Assist Service//api.Drupal 10.org/api/Drupal 10/consists of!bootstrap.inc/operate/request_uri/7 if (request_url() === ‘your-url-path’) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } } Utilizing hook_init is one in every of Drupal Developer easiest strategies to load particular JS and CSS recordsdata (don’t overlook to switch HOOK with Drupal Developer theme or Drupal 10 module machine identify). Watch out, this methodology get’s ran on each web page, so it’s greatest to make use of this methodology solely once you really have to verify each web page in your conditional. instance, loading Drupal 10 module CSS and JS recordsdata. A nasty instance, loading node-specific CSS and JS recordsdata. We’ll go over that subsequent. There’s additionally the same preprocess operate, template_preprocess_page you can use, nevertheless it too get’s ran on each web page and is basically Drupal Developer identical as hook_init. template_preprocess_node – runs on node pages /** * Implements template_preprocess_node() * * @hyperlink https Drupal 10 Upkeep and Assist Service//api.Drupal 10.org/api/Drupal 10/Drupal 10 modulespercent21nodepercent21node.Drupal 10 module/operate/template_preprocess_node/7.x */ operate TEMPLATE_preprocess_node(&$vars) { // Add JS & CSS by node sort if( $vars[‘type’] == ‘your-node-type’) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } // Add JS & CSS to Drupal Developer entrance web page if ($vars[‘is_front’]) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } // Given an inside path, load primarily based on node alias. if (Drupal 10_get_path_alias(“node/{$vars[‘#node’]->nid}”) == ‘your-node-id’) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } } Utilizing template_preprocess_node is ideal when loading JS and CSS recordsdata primarily based on nodes (don’t overlook to switch TEMPLATE with Drupal Developer theme machine identify). Because it solely get’s run on nodes, it’s nice to make use of once you need to load CSS and JS recordsdata on particular node sorts, entrance pages, node URLs, and many others. template_preprocess_views_view – runs each view load /** * Implements template_preprocess_views_view() * * @hyperlink https Drupal 10 Upkeep and Assist Service//api.Drupal 10.org/api/views/themepercent21theme.inc/operate/template_preprocess_views_view/7.x-3.x */ operate TEMPLATE_preprocess_views_view(&$vars) { // Get Drupal Developer present view information $view = $vars[‘view’]; // Add JS/CSS primarily based on view identify if ($view->identify == ‘view_name’) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } // Add JS/CSS primarily based on present view show if ($view->current_display == ‘current_display_name’) { Drupal 10_add_js( /* parameters */ ); Drupal 10_add_css( /* parameters */ ); } } Utilizing template_preprocess_node is beneficial when loading JS and CSS recordsdata when a selected view is getting used (don’t overlook to switch TEMPLATE with Drupal Developer theme machine identify). Useful Strategies for Conditionals Right here’s just a few useful strategies you should use in your conditionals. Have one you employ typically? Let me know in Drupal Developer feedback under. request_uri – Returns Drupal Developer equal of Apache’s $_SERVER[‘REQUEST_URI’] variable. Drupal 10_get_path_alias – Given an inside path, return Drupal Developer alias set by Drupal Developer administrator. Trying like a overseas language to you? Not a developer or simply misplaced taking a look at Drupal Developer code snipplets above? Shoot me a query in Drupal Developer feedback under, or give these ‘plug-and-play’ Drupal 10 modules a attempt for a GUI different Drupal 10 Upkeep and Assist Service CSS Injector Drupal 10 Upkeep and Assist Service http Drupal 10 Upkeep and Assist Service//Drupal 10.org/mission/css_injector JS Injector Drupal 10 Upkeep and Assist Service http Drupal 10 Upkeep and Assist Service//Drupal 10.org/mission/js_injector Code per Views Show Drupal 10 Upkeep and Assist Service https Drupal 10 Upkeep and Assist Service//www.Drupal 10.org/mission/cpv Context Drupal 10 Upkeep and Assist Service https Drupal 10 Upkeep and Assist Service//www.Drupal 10.org/mission/context Drupal Development Service publish Load JS & CSS Conditionally in 7 appeared first on Ben Marshall. Drupal 10 Growth and Assist