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>
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
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.
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.
