How to call a javascript only for specific page/template

Kirby 2 Solved ✅
1

Hi,

I would like to know whether it is possible to load a particular javascript only on some specific pages.
for example, for a page named “gallery” associated with “gallery template” or “gallery snippet”, is it possible to add only for this template/snippet a javascript (for example gallery.js). Since this script is not supposed to be used for others templates/pages I don’t need to load it for others pages/templates.
In addition, is it possible for example to have a <div> to be displayed/visible depending on which the page/template is called.
To make it short, how to implement an option to have a specific header for the home page and an other header for all other pages.
Thank you in advance

1 Like
2

You could do sth like this, e.g. if your script is called in the footer:

if($page->template() == 'gallery')  {
  echo js('assets/js/somescript'); 
}

You can do the same in the header to show different headers or for different divs or snippets

if($page->template() == 'gallery')  {
  // show header a or div a
}
else {
  //show header b or div b
}

If not by template, the same can be done for specific page uids:

if($page->uid() == 'project')  {
  // show header a or div a
}
else {
  //show header b or div b
}
2 Likes
3

If the header is completely different you could also do it the other way round and include a different header snippet. Instead of …

<?php snippet('header') ?>

… you could include this to your gallery.php template

<?php snippet('header_gallery') ?>

Then duplicate the header.php file in your snippets folder, rename it to header_gallery.php and make your changes.

4

Thanks to both of you.
I will try the suggested methods

5

I’m using another, slightly different approach to custom assets:

templates/gallery.php

snippet('header', array(
    'css' => array('assets/css/gallery.css'),
    'js'  => array('assets/js/gallery.js')
));

snippets/header.php

if(isset($css) echo css($css);
if(isset($js)  echo js($js);
1 Like
6

You may also want to have a look at this post http://getkirby.com/blog/template-css, plan A @twirx has described above , but there’s also a plan B …

7

Thanks to @texnixe’s reference to the article above, I remembered that this is actually already implemented by the css/js helpers.

From the docs:

<?php echo css('@auto') ?>
<?php echo js('@auto') ?>

Template specific css files must be located in /assets/css/templates and named like the template.

5 Likes
8

Ah, that is exactly what I was looking for, just couldn’t find it … thanks @twirx

9

@hardboiled:
For your question, I have developed an approach some time ago.
Look at the concerning HowTo.

1 Like
10

Hello!

Is there a way to load more than one .js or an external .js (e.g. google) with

<?php echo js('@auto') ?>

Thank you in advance for your help!

11

With the @auto option, you can only load one js file per template, see the docs: https://getkirby.com/docs/cheatsheet/helpers/js

The file must exist in /assets/js/templates, each file must be named like the template it is meant for.

1 Like
12

Google scripts all require using the external URLs from the Google servers, so you would have to use something like this in your footer snippet:

<?php if($page->template() == 'mytemplate'): ?>
  <?php echo js('https://something.google.com/somescript.js') ?>
<?php endif ?>
1 Like
13

@texnixe Thanks for the clarification! :bouquet:
@lukasbestle That is a very helpful tip! Thank you very much! :sunglasses:

14

This is what I have been using lately, you can easily modify it to suit JS files.

<?php
    echo css('assets/css/main.css');

    $cssURI  = 'assets/css/' . $page->template() . '.css';
    $cssRoot = c::get('root') . '/' . $cssURI;

    if(file_exists($cssRoot)) echo css($cssURI);
?>
1 Like
15

Is there any reason you don’t use the @auto function explained in the docs and mentioned by @texnixe above?

you could have this:

<?php 
css('assets/css/main.css');
css('@auto');
?>

And if you like to keep it short,

<?php css(array('assets/css/main.css','@auto')) ?>

Note:

Template specific css files must be located in /assets/css/templates and named like the template.

2 Likes
16

Not at all, it’s all just preference.

One reason would be to have all CSS files in the same folder but I’d be lying if I said that is the reason for it. :wink:

1 Like
17

I was asking out of curiosity because I admit not using it myself! The reason is different though: I don’t like calling several css files and don’t usually have enough differences in css per page to justify in my opinion another file!
But this gave me a great tutorial idea to merge and mininify assets with template specific files too! Mmh gotta try this!

18

Don’t know if I understand you correctly, but it would make more sense to load an additional file rather than load the complete merged CSS file. The browser should actually cache your main CSS file and not reload it on the next page. This advantage would be counteracted by loading a completely new asset.

If you have several CSS files that should be loaded on every page, they should be merged anyway.

1 Like
19

Ah that’s right! I would have probably ended up finding this out after trying it myself, you just saved me some time :slight_smile:

20

However, you could nevertheless write a tutorial about how to merge assets :slight_smile:, although there is even a plugin for that: Kirby - KRB, minify and combine your assets on the fly

1 Like