2

I'm trying to include a Javascript gallery (jQuery lightGallery) on my new Drupal 8 site and wrote a field formatter for this purpose.

Now I need to add the jQuery lightGallery to pages using this field formatter and call the library when the page is ready. I am confused about how I am supposed to do this, though.

I defined the library in the module containing my field formatter, but I'm not sure how I attach it only on sites that contain the field.

The documentation of the library uses the jQuery $(document).ready function to call the libary, how would that work inside a Drupal module?

5

So for Drupal 8, in order to add JS or CSS files you first needs to defined a library that defines which files should be include. You need to create a module_name.libraries.yml file. That file could look something like this:

library_name:
  js:
    js/path.to.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings

There is documentation about the libraries files. Basically you list the files you want to include (along with some optional settings) and add depencies to other libraries that your library depend on if any (like jQuery).

After your library has been defined (remember to clear cache), you should add the library where needed. In your case that would be the form definition. You can add the library to any render array and Drupal will find them and add the needed js files to the page.

To add a library all you need to do this:

$render_array['#attached']['library'][] = 'module_name/library_name';

This can be done anywhere in the render array.

There is detailed documentation about this on Drupal.org documetation area.

  • Thanks for the answer, but I'm having trouble finding the correct place to add the #attached to the render array. I tried it in the viewElements function from the ImageFormatter I used as a base, but that doesn't work. I can't see a place where I have access to the render array in a field formatter. – Mad Scientist Aug 10 '15 at 16:47
  • 2
    You were correct. This should go into viewElements(). You could attach like here. public function viewElements(FieldItemListInterface $items, $langcode) { $elements = []; foreach ($items as $delta => $item) { $elements[$delta] = array( '#theme' => 'xxxxx', '#ratingvalue' => $this->viewValue($item) //Any other processing, '#attached' => array('library'=> array('module_name/library_name')), ); } return $elements; } @MadScientist – Tanay Sai Apr 24 '16 at 20:51
6

In your formatter's viewElements

public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = [];
foreach ($items as $delta => $item) {
  $elements[$delta] = array(
    '#theme' => 'theme_name_if_any',
    '#variablenametobepassed' => $this->viewValue($item) * 20, // any other preprocessing
    '#attached' => array('library'=> array('module_name/library_name')),
  );
}

return $elements;
}

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.