Front End Resources

Resources used by the front end of the application

Your plugin can provide front end resources by creating a folder in your plugin directory called resource/.

The resourcePath() and includeResouce() functions#

You can generate paths to resources in your resource directory by using the helper function of your primary plugin class resourcePath().

For example to generate a path to a image in your resource folder at img/icon.png

$path = enact()->with('Plugin')->getPlugin('YourPluginName')->resourcePath('img/icon.png');
// Or
$path = enact('Plugin')->getPlugin('YourPluginName')->resourcePath('img/icon.png');
// Or
$path = \YourPluginNamespace\YourPluginName::instance()->resourcePath('img/icon.png');


echo $path; // will be /admin/resource/:YourPluginName:/img/icon.png

You see that the path generated uses colons to specify that the resource is coming from a plugins resource directory, with the plugin name inside the colons.

You can also include a javascript or css resource by calling

enact()->with('Plugin')->getPlugin('YourPluginName')->includeResource('js/js.js');

Which will include the resource on the page.

Template function pluginResourcePath() and pluginIncludeResource()#

You can achieve the same functionality using the twig template functions.

<img src='{{ pluginResourcePath('YourPluginName', 'img/icon.png') }}'/>

{{ pluginIncludeResource('YourPluginName', 'js/some-script.js') }}