8

I want to add the following code in my section of the front page using a Drupal 8 sub theme of Bartik.

Can anybody help how to do it? What is the best way to do it in this new twig version of theme? Where is page.tpl?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>
7

On you THEME.libraries.yml:

global-styling:
  version: VERSION
  header: true // <--- To the header!!!
  css:
    theme:
      css/mystyle.css: {} // if you want add custom css
  js:
    js/stepcarousel.js: {}
  dependencies:
    - core/drupal // for use drupal.js
    - core/jquery

On you THEME.info.yml:

name: THEME
base theme: Bartik
...
libraries:
  - THEME/global-styling
...

and Clear Cache

Where is page.tpl?

Here: core/modules/system/templates/page.html.twig

If you want use it, copy to theme folder inside templates, like this:

 THEME
   templates
     page.html.twig

Change all you want and Clear Cache

6

In Drupal 8, stylesheets and JavaScript files are attached as libraries:

You add a yourtheme.libraries.info to your theme (or custom module) folder:

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  css:
    theme:
      css/power-slider.css: {}
  dependencies:
    - core/jquery

And then attach the library to a render array. For example, this attaches the library to all pages:

function yourtheme_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'yourtheme/power-slider';
}

This approach has the advantage of being reusable. You define the necessary paths once and you can re-use them in different places in your code.

See:

This answer was very much inspired by berliner's answer.

1

In Drupal 8 client resources like CSS and JavaScript files are attached to render arrays:

$element['#attached'] = array('js' => array(PATH_TO_JS));

Where $elementcan be an output render array or a form element.

Alternatively, you can register a library by defining it in a *.libraries.info file

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  dependencies:
    - core/jquery

and then attach the library to a render array like this:

$element['#attached']['library'][] = 'NAMEOFTHEMODULE/power-slider';

The latter approach has the advantage of being reusable. You define the necessary paths once and you can re-use them in different places in your code.

  • 1
    After you wrote this hook_library_info() was replaced with a *.libraries.yml file. See drupal.stackexchange.com/a/109029/12010 and drupal.org/node/2216195 – batigolix Oct 9 '14 at 15:13
  • i dont think it is really outdated. it needs some editing, that is all. ill give it a try – batigolix Oct 15 '14 at 7:18
  • I updated the answer – batigolix Oct 15 '14 at 7:27
  • @batigolix, nice edit. However, it probably better that you post the updated answer as your answer, instead of changing berliner's code (code edit tend to be rejected as too intrusive). – Free Radical Oct 15 '14 at 7:29
  • OK, I added the updated version as a new answer. you're right: I had to change more than I thought was necessary initially. – batigolix Oct 15 '14 at 8:15

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.