1

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:

image

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?

1

The documentation was not very clear

{{ craft.app.assetManager.publishedUrl('@poptin/poptin/resources/img/poptinlogo.png', true) }}

This is how it is will publish that file to the public path for use.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.