How to include javascript file in kirbytag plugin

The CMS Questions
1

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:

site/plugins/bettervideo/index.php
site/plugins/bettervideo/assets/bettervideo.js
site/plugins/bettervideo/tags/bettervideo.php

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
/site/plugins/superplugin/assets/fields/myfield.js

Public URL
/media/plugins/superwoman/superplugin/fields/myfield.1520265293.js

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.

2

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.

3

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?

4

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: https://getkirby.com/docs/guide/plugins/plugin-basics#plugin-assets

5

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!