How to Use a Library in Your Theme in Drupal

Using external libraries in Drupal 8 is now easier

Karolbryksa / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)

Using an external library in Drupal 8 is much easier than it was with Drupal 7. I’ll be using for this example the Lightbox2 library. The example theme name will be testing_subtheme.

Before you start, you need to install Libraries API.

I won’t be covering in this tutorial how to install a module, so if you don’t know how to do it, follow the official documentation.

These are the steps:

• Go to https://github.com/lokesh/lightbox2/releases and download the zip/tar.gz last version.
• Extract it to the libraries folder and rename it to lightbox2. The path should be libraries/lightbox2.
• Edit testing_subtheme.libraries.yml and add this:

lightbox2:
  version: VERSION
  css:
    theme:
      /libraries/lightbox2/src/css/lightbox.css: {}
  js:
    /libraries/lightbox2/src/js/lightbox.js: {}

• Then, edit testing_subtheme.info.yml and add this:

libraries:
  - testing_subtheme/lightbox2

• Finally, clear the cache.
• Refresh the page and inspect the source code. You should see the CSS and JS files.

👉 Find out more about me here: https://sergioguardiola.net 🔥