Replace #attached library array values with provider-namespaced strings.Replace hook_library_info() by *.libraries.yml file.I'll also talk more about API changes as they relate to themers, it's probably safe to do that now as Drupal 8 is most likely heading toward a beta within the next few months and it seems like many of the major core API changes have been done.
In future Drupal 8 related articles, I'll get in to setting custom configuration for your Drupal 8 theme, this comes in real handy and we'll be using YAML with the added addition of using Drupal 8's CMI layer. In effect, this replaces the old method where we used to add JS directly in the info file.
#Drupal 8 add font kit code
You'll be able to do this by adding this code to your theme's. This is probably a good method for an off the shelf contrib theme but if you need more granularity, say you only want to add certain scripts for specific conditions or a content type, then a preprocess hook may still be the way to go. (Thanks to for this tip.) This is still in Drupal 8 dev and won't appear until the next alpha. info.yml file with the libraries key so in this case, you could forego using a hook. Recently, a new method of attaching your library can be done by adding the namespace to your theme's. This is new in Drupal 8 Alpha 10 and it threw me off for a while until I found a core issue that documented this change. 'foobar/foobar-corescripts' where previously it had an array associated with it. (Note, this tip was given to me by who pointed out that this is better than hook_preprocess_page where you also need to use drupal_render() for attached to work.) function foobar_page_alter ( & $page ) Īttaching the library above implements provider-namespaced strings i.e. The next step is to attach the library we created with a theme preprocess function in combination with the #attached method. Create a folder called js and place an empty file called script.js inside it. Create a folder called css and place an empty file called style.css inside it. The name -corescripts can be anything you want as long as it matches when you go to attach it in your. We still have to create the folder and file structure for the CSS and JavaScript code. In addition, we are calling a theme relative script in the theme's js folder, scripts.js. With YAML, indentation spaces are relevant so you'll need to get that bit right. This will make it available for anonymous users. With the above code, we'll be adding the core scripts jquery.js, drupal.js, ajax.js and to our theme. So in my case my theme name is foobar so the file name would be. You'd do this by creating a *libraries.yml file in the root of your theme. Here is a basic example of how you can add jQuery to a theme and a few dependencies. YAML is an acronym for "Yet Another Markup Language" or " Ain't Markup Language" and has become a core method for streamlining code in Drupal 8. Now, in true Drupal 8 fashion, we do this with a. Exit nested arrays, enter YAMLĪt first one added core libraries using hook_library_info which was a mess of PHP nested arrays in your theme's. No doubt, that jQuery is missing for anonymous users will be a source of confusion for some front end developers and themers. To add an additional layer of complexity to all this is the fact that the manner in which this is done has changed dramatically in recent weeks. This seems like an odd choice by core but my guess is that is was done for Drupal 8 to be more minimalistic and nimble on its feet.Īt any rate, if you have a contrib theme, most likely the first thing you'll do is add all of these back in. That's because off the shelf, Drupal 8 core themes don't require javascript for anonymous users.
#Drupal 8 add font kit how to
One of the biggest challenges has been figuring out how to add jQuery and other core scripts into the theme. With every new Alpha of Drupal 8, I've had to adjust many bits of theme code to adhere to these new APIs. One of the challenges for contrib is Drupal 8 has been a constant moving target in terms of API changes. The script itself is just a basic test that should hide my main menu using JQuery, put into the 'strict' format the themeing guide mentions is required.Note: all, or parts of this article may be out of dateįor the past six months, I've been in the process of porting my contrib theme, Gratis, to Drupal 8. All of the dependencies I listed in my library are being loaded, but not my script itself. I clear the cache, log off to see the non-logged-in page (the admin view has a LOT of extra scripts and css files that it calls) and look at the source to see if my script is being loaded. theme file with a hook implementation (I'm not really a PHP developer, so I mostly did a copy/paste job from the example in the guide) libraries.yml file: base:Īnd finally creating a. info.yml file: #js librariesĪnd defining it in my. I followed the instructions in the Drupal 8 themeing guide, including it in my. I'm attempting to include a custom javascript file to manipulate my menu's in the Drupal 8 theme I am building.