So I am trying to build a simple plugin for Craft CMS and I am wish to use my assets in the twig template like css, js, images etc.
From what I have read and understood from Asset Bundles, I have created and registered my asset bundle and I am using it in the template now.
<img src="{{ alias('@poptin/poptin/resources/img/poptinlogo.png') }}"/>
This is one of the img tags in the template and it translates to:
<img src="/Users/rohan0793/Code/craftcms/vendor/poptin/poptin/src/resources/img/poptinlogo.png">
Which is perfect in terms of path, since that is where the image lives. And yet I see an image not found icon in my browser window like so:
I am not sure what I am missing or doing wrong here. Any ideas anyone?
Additional details
PoptinBundle.php
use craft\web\AssetBundle; use craft\web\assets\cp\CpAsset;
class PoptinBundle extends AssetBundle
{
public function init()
{
// define the path where your publishable resources live
$this->sourcePath = '@poptin/poptin/resources';
// define the dependencies
$this->depends = [
CpAsset::class,
];
// define the relative path to CSS/JS files that should be registered with the page
// when this asset bundle is registered
$this->js = [
'script.js',
];
$this->css = [
'styles.css',
];
parent::init();
}
}
The main plugin file Poptin.php
<?php
/**
* poptin plugin for Craft CMS 3.x
*
* Create advanced website popups and forms, and improve your website's conversion rate within a few minutes.
*
* @link poptin.com
* @copyright Copyright (c) 2020 Poptin
*/
namespace poptin\poptin;
use Craft;
use craft\base\Plugin;
use craft\services\Plugins;
use craft\events\PluginEvent;
use craft\web\UrlManager;
use craft\events\RegisterUrlRulesEvent;
use yii\base\Event;
/**
* Craft plugins are very much like little applications in and of themselves. We’ve made
* it as simple as we can, but the training wheels are off. A little prior knowledge is
* going to be required to write a plugin.
*
* For the purposes of the plugin docs, we’re going to assume that you know PHP and SQL,
* as well as some semi-advanced concepts like object-oriented programming and PHP namespaces.
*
* https://docs.craftcms.com/v3/extend/
*
* @author Poptin
* @package Poptin
* @since 1.0.0
*
*/
class Poptin extends Plugin
{
// Static Properties
// =========================================================================
/**
* Static property that is an instance of this plugin class so that it can be accessed via
* Poptin::$plugin
*
* @var Poptin
*/
public static $plugin;
// Public Properties
// =========================================================================
/**
* To execute your plugin’s migrations, you’ll need to increase its schema version.
*
* @var string
*/
public $schemaVersion = '1.0.0';
/**
* Set to `true` if the plugin should have a settings view in the control panel.
*
* @var bool
*/
public $hasCpSettings = false;
/**
* Set to `true` if the plugin should have its own section (main nav item) in the control panel.
*
* @var bool
*/
public $hasCpSection = true;
// Public Methods
// =========================================================================
/**
* Set our $plugin static property to this class so that it can be accessed via
* Poptin::$plugin
*
* Called after the plugin class is instantiated; do any one-time initialization
* here such as hooks and events.
*
* If you have a '/vendor/autoload.php' file, it will be loaded for you automatically;
* you do not need to load it in your init() method.
*
*/
public function init()
{
parent::init();
self::$plugin = $this;
// Register our site routes
Event::on(
UrlManager::class,
UrlManager::EVENT_REGISTER_SITE_URL_RULES,
function (RegisterUrlRulesEvent $event) {
$event->rules['siteActionTrigger1'] = 'poptin/default';
}
);
// Register our CP routes
Event::on(
UrlManager::class,
UrlManager::EVENT_REGISTER_CP_URL_RULES,
function (RegisterUrlRulesEvent $event) {
$event->rules['cpActionTrigger1'] = 'poptin/default/do-something';
}
);
// Do something after we're installed
Event::on(
Plugins::class,
Plugins::EVENT_AFTER_INSTALL_PLUGIN,
function (PluginEvent $event) {
if ($event->plugin === $this) {
// We were just installed
}
}
);
/**
* Logging in Craft involves using one of the following methods:
*
* Craft::trace(): record a message to trace how a piece of code runs. This is mainly for development use.
* Craft::info(): record a message that conveys some useful information.
* Craft::warning(): record a warning message that indicates something unexpected has happened.
* Craft::error(): record a fatal error that should be investigated as soon as possible.
*
* Unless `devMode` is on, only Craft::warning() & Craft::error() will log to `craft/storage/logs/web.log`
*
* It's recommended that you pass in the magic constant `__METHOD__` as the second parameter, which sets
* the category to the method (prefixed with the fully qualified class name) where the constant appears.
*
* To enable the Yii debug toolbar, go to your user account in the AdminCP and check the
* [] Show the debug toolbar on the front end & [] Show the debug toolbar on the Control Panel
*
* http://www.yiiframework.com/doc-2.0/guide-runtime-logging.html
*/
Craft::info(
Craft::t(
'poptin',
'{name} plugin loaded',
['name' => $this->name]
),
__METHOD__
);
}
public function getCpNavItem()
{
$item = parent::getCpNavItem();
// $item['badgeCount'] = 5;
$item['icon'] = '@poptin/poptin/icon.svg';
// $item['subnav'] = [
// 'foo' => ['label' => 'Foo', 'url' => 'plugin-handle/foo'],
// 'bar' => ['label' => 'Bar', 'url' => 'plugin-handle/bar'],
// 'baz' => ['label' => 'Baz', 'url' => 'plugin-handle/baz'],
// ];
return $item;
}
// Protected Methods
// =========================================================================
}
This is how I have registered the bundle in my twig file:
{% do view.registerAssetBundle("poptin\\poptin\\PoptinBundle") %}
Edit:
In one of the places in the asset bundle docs, it says "If you have a one-off file that you need to get the published URL for, but it doesn’t need to be registered as a CSS or JS file on the current page, you can use craft\web\AssetManager::getPublishedUrl()"
$url = \Craft::$app->assetManager->getPublishedUrl('@ns/prefix/path/to/file.svg', true);
But how do I use this code in my twig template?
