Front End Resources

If your plugin has any CSS, JavaScript, images, or other front-end resources, you can place them in a resources/ subfolder within your plugin’s folder.

Craft provides a helper function, UrlHelper::getResourceUrl('path/to/file.ext'), which returns the URL to a resource file. Templates have a similar function: {{ resourceUrl('path/to/file.ext') }}. The URL returned by these functions will work even if the craft/ folder is placed above the web root.

By default, Craft will search for the resource file in its own craft/app/resources/ folder. If it can’t find the file there, it will check if the first segment of the resource path is set to a plugin handle. If it is, Craft will look for the resource file within that plugin’s resources/ folder.

So if an image were located at craft/plugins/cocktailrecipes/resources/images/gin.png, it would be accessible via UrlHelper::getResourceUrl('cocktailrecipes/images/gin.png') and {{ resourceUrl('cocktailrecipes/images/gin.png') }}.