How to call a javascript only for specific page/template

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

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.

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

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

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 …

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

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

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

1 Like

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!

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

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

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

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

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

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

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!

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

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:

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

Yep we use it on our site and love it :wink: I think it deserves to be more known though !