How to include javascript file in kirbytag plugin

I’m writing an extended version of the video kirbytag and need to include some javascript code. As recommended in the docs my plugin folder structure is:


I read on the plugin-basic docs page that

Each asset in the assets folder of your plugin will be available at /media/plugins/superwoman/superplugin/ .

and this about timestamps and urls

Asset folder

Public URL

but don’t know where and how to import the js file.

This is my first plugin so I probably am missing something really obvious but can’t find an answer anywhere (neither here nor on other pages of the docs). Thanks for any help.

I’d like to bring the topic back up again.

I am currently testing some new plugins using the starterkit. Those have some css and js within my-plugin/assets/ and I expected them to be available under /media/plugins/my-plugin/my.TIMESTAMP.js but hey aren’t. I tried using js() to test if they just not copied there but just some kind of magic route, with no success. Even if they would have been copied there, I need to find out that timestamp or have a function at hand doing so.

Back in Kirby 2 times, I was able to load JS of my plugins, but I cannot remember how I did that and I don’t find anything on that for K3 in the docs.

Hm, I tested this in a Starterkit and it worked:

  • Created /site/plugins/gallery/assets/css/index.css
  • Added <?= css(['/media/plugins/starterkit/gallery/css/index.css']) ?> in the head of the header.php snippet.

The file doesn’t get a timestamp this way, though. Don’t know how to achieve that. Maybe via a CSS component?

strange, doesn’t seem to work on my local machine…
Does Kirby create a “real” file in media/plugins/… ? so if I look in the filesystem I can see it? (there is nothing beside page-images)

I don’t need the timestamp, but it’s documented here:

okay, I got it… I didn’t read good enough and used the folder-name instead of the plugin name in the path… sorry…
Now the file is generated, without the timestamp, and I can load it. Thank you!