<p>The documentation was not very clear</p>

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

<p>This is how it is will publish that file to the public path for use.</p>

CC BY-SA 4.0
2020-06-08T08:00:29.617Z
2020-06-08T08:00:29.617Z
Rohan
<p>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.</p>

<p>From what I have read and understood from <a href="https://docs.craftcms.com/v3/extend/asset-bundles.html#registering-the-asset-bundle" rel="nofollow noreferrer">Asset Bundles</a>, I have created and registered my asset bundle and I am using it in the template now.</p>

<p><code>&lt;img src="{{ alias('@poptin/poptin/resources/img/poptinlogo.png') }}"/&gt;</code></p>

<p>This is one of the <code>img</code> tags in the template and it translates to:</p>

<p><code>&lt;img src="/Users/rohan0793/Code/craftcms/vendor/poptin/poptin/src/resources/img/poptinlogo.png"&gt;</code></p>

<p>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:</p>

<p><a href="https://i.sstatic.net/WNzzt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WNzzt.png" alt="image"></a></p>

<p>I am not sure what I am missing or doing wrong here. Any ideas anyone?</p>

<p><strong>Additional details</strong></p>

<p>PoptinBundle.php</p>

<p>

<p>use craft\web\AssetBundle;
use craft\web\assets\cp\CpAsset;</p>

<pre><code>class PoptinBundle extends AssetBundle
{
    public function init()
    {
        // define the path where your publishable resources live
        $this-&gt;sourcePath = '@poptin/poptin/resources';

        // define the dependencies
        $this-&gt;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-&gt;js = [
            'script.js',
        ];

        $this-&gt;css = [
            'styles.css',
        ];

        parent::init();
    }
}
</code></pre>

<p>The main plugin file Poptin.php</p>

<pre><code>&lt;?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-&gt;rules['siteActionTrigger1'] = 'poptin/default';
            }
        );

        // Register our CP routes
        Event::on(
            UrlManager::class,
            UrlManager::EVENT_REGISTER_CP_URL_RULES,
            function (RegisterUrlRulesEvent $event) {
                $event-&gt;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-&gt;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() &amp; 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 &amp; [] 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' =&gt; $this-&gt;name]
            ),
            __METHOD__
        );
    }

    public function getCpNavItem()
    {
        $item = parent::getCpNavItem();
        // $item['badgeCount'] = 5;
        $item['icon'] = '@poptin/poptin/icon.svg';
        // $item['subnav'] = [
        //     'foo' =&gt; ['label' =&gt; 'Foo', 'url' =&gt; 'plugin-handle/foo'],
        //     'bar' =&gt; ['label' =&gt; 'Bar', 'url' =&gt; 'plugin-handle/bar'],
        //     'baz' =&gt; ['label' =&gt; 'Baz', 'url' =&gt; 'plugin-handle/baz'],
        // ];
        return $item;
    }

    // Protected Methods
    // =========================================================================

}
</code></pre>

<p>This is how I have registered the bundle in my twig file:</p>

<p><code>{% do view.registerAssetBundle("poptin\\poptin\\PoptinBundle") %}</code></p>

<hr>

<p>Edit:</p>

<p>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()"</p>

<p><code>$url = \Craft::$app-&gt;assetManager-&gt;getPublishedUrl('@ns/prefix/path/to/file.svg', true);</code></p>

<p>But how do I use this code in my twig template?</p>

<plugin-development><templating><craft3><php>
Images not showing even after bundling them with asset bundle
# Images not showing even after bundling them with asset bundle

(Asked by: username_0 on 2020-06-08)

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.

This is one of the img tags in the template and it translates to:

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
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?

**Tags:** plugin-development, templating, craft3, php


---

## 1 answers

### Answer by username_0 on 2020-06-08. Score: 1 | Accepted answer

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.


---

