Plugin's CSS not autoloaded by Kirby - Kirby 3

I’ve created y own plugin named galerie. Then add related CSS file to assets’ folder:

/site/plugins/galerie/assets/galerie.css

But no magic appears on website as CSS is not loaded. Do I missed something?

For the frontend, you have to link the files in the header.

OK, thank you. My understanding was this was an automatised task!

So this is a hard link to the file?

No, CSS/JS files in plugins are only loaded for Panel plugins, never in the frontend. That doesn’t really make sense, because we don’t make assumptions about your frontend workflow (like concatenating files, adding them to the top or the bottom etc.). Kirby is not Wordpress where every plugin adds its stuff and then you need another plugin to clean up the rubbish.

You can use the css() and js() helpers.https://getkirby.com/docs/reference/templates/helpers

1 Like

Ok for the explanations. In my case I created a tag and I thought on this tag’s call assets linking was automatically done. By doing this no assumptions are done as assets are used on plugin use only.

Sorry but can’t manage to make css() helpers work for plugin’s assets. There is not example on the docs for this case.

<?= css('/site/plugins/galerie/assets/galerie.css') ?>

You have to fetch it from the media folder, because the site folder is not publicly accessible.

https://getkirby.com/docs/guide/plugins/plugin-basics#plugin-assets

So it should be

<?= css('media/plugins/superwoman/superplugin/gallery.css') ?>

Replace superwoman/superplugin with the namespace and name of your plugin.

If you use subfolders within your assets folder, you have to include them in the path. Check the part of the docs I linked to.

1 Like

Thank you!

5 Years later - where would I look for infos to include plugin’s assets in the frontend? Manually move the css files to the media subfolder or is there a more native way? Thank you!

As shown above, see Custom plugins | Kirby CMS

1 Like