Handling Assets For A Theme

Yii 2.0 General Discussions
1

I have created a theme from the following article Yii 2.0: Tutorial about How to Integrate Yii2 with fantastic theme AdminLTE in my advanced template of Yii2.

In backend\config\main.php I placed the following:




        'view' => [

            'theme' => [

                'basePath' => '@webroot/themes/adminlte',

                'baseUrl' => '@web/themes/adminlte',

            ],

        ],

I have everything working. I created a theme folder in the backend. Moved all the AdminLTE assets into a folder called adminlte. I created the views folder with the layout file main.php.

My issue is the AppBundle for the theme. I have it working from the backend\assets. I created the following AppBundle (named AdminlteAsset.php):




<?PHP

namespace backend\assets;


use yii\web\AssetBundle;


class AdminlteAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

        'css/site.css',

        'themes/adminlte/css/css/bootstrap.min.css',

        'themes/adminlte/css/font-awesome.min.css',

        'themes/adminlte/css/ionicons.min.css',

        'themes/adminlte/css/morris/morris.css',

        'themes/adminlte/css/jvectormap/jquery-jvectormap-1.2.2.css',

        'themes/adminlte/css/fullcalendar/fullcalendar.css',

        'themes/adminlte/css/daterangepicker/daterangepicker-bs3.css',

        'themes/adminlte/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css',

        'themes/adminlte/css/AdminLTE.css',

    ];

    public $js = [

        "//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js",

        "themes/adminlte/js/plugins/morris/morris.min.js",

        "themes/adminlte/js/plugins/sparkline/jquery.sparkline.min.js",

        "themes/adminlte/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",

        "themes/adminlte/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",

        "themes/adminlte/js/plugins/fullcalendar/fullcalendar.min.js",

        "themes/adminlte/js/plugins/jqueryKnob/jquery.knob.js",

        "themes/adminlte/js/plugins/daterangepicker/daterangepicker.js",

        "themes/adminlte/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js",

        "themes/adminlte/js/plugins/iCheck/icheck.min.js",

        "themes/adminlte/js/AdminLTE/app.js",

        "themes/adminlte/js/AdminLTE/dashboard.js",

        "themes/adminlte/js/AdminLTE/demo.js",

    ];

    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

    ];

}

Then in the main.php I have:




<?php


use backend\assets\AdminlteAsset;

use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use yii\widgets\Breadcrumbs;


/* @var $this \yii\web\View */

/* @var $content string */


AdminlteAsset::register($this);

?>

<?php $this->beginPage() ?>

<!DOCTYPE html>

<html lang="<?php echo Yii::$app->language ?>">

    <head>

Now this works however I like to keep all theme objects together and I would expect this to work from the backend\themes\adminlte\assets\ folder for the AppBundle. When I move the asset bundle (AdminlteAsset.php) to that theme assets folder and change the following:

AdminlteAsset.php




namespace backend\themes\adminlte;


use yii\web\AssetBundle;


class AdminlteAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

        'css/site.css',

        'themes/adminlte/css/css/bootstrap.min.css',

        'themes/adminlte/css/font-awesome.min.css',

        'themes/adminlte/css/ionicons.min.css',

        'themes/adminlte/css/morris/morris.css',

        'themes/adminlte/css/jvectormap/jquery-jvectormap-1.2.2.css',

        'themes/adminlte/css/fullcalendar/fullcalendar.css',

        'themes/adminlte/css/daterangepicker/daterangepicker-bs3.css',

        'themes/adminlte/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css',

        'themes/adminlte/css/AdminLTE.css',

    ];

    public $js = [

        "//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js",

        "themes/adminlte/js/plugins/morris/morris.min.js",

        "themes/adminlte/js/plugins/sparkline/jquery.sparkline.min.js",

        "themes/adminlte/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",

        "themes/adminlte/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",

        "themes/adminlte/js/plugins/fullcalendar/fullcalendar.min.js",

        "themes/adminlte/js/plugins/jqueryKnob/jquery.knob.js",

        "themes/adminlte/js/plugins/daterangepicker/daterangepicker.js",

        "themes/adminlte/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js",

        "themes/adminlte/js/plugins/iCheck/icheck.min.js",

        "themes/adminlte/js/AdminLTE/app.js",

        "themes/adminlte/js/AdminLTE/dashboard.js",

        "themes/adminlte/js/AdminLTE/demo.js",

    ];

    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

    ];

}

main.php




<?php


use backend\themes\adminlte\assets\AdminlteAsset;

use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use yii\widgets\Breadcrumbs;


/* @var $this \yii\web\View */

/* @var $content string */


AdminlteAsset::register($this);

?>

<?php $this->beginPage() ?>

<!DOCTYPE html>

<html lang="<?php echo Yii::$app->language ?>">

I get the following error:

Class ‘backend\themes\adminlte\assets\AdminlteAsset’ not found

Am I missing something or do theme related asset bundles must reside in the upper level assets folder?

2

As with many posts after some work I found my problem. I forgot the web directory in my use statement. I have it working now from the theme folder just fine. My scripts are now as follows:

main.php located in my /backend/web/themes/adminlte/views/layouts/ directory now has the following:




<?php


use backend\web\themes\adminlte\assets\AdminlteAsset;

use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use yii\widgets\Breadcrumbs;


/* @var $this \yii\web\View */

/* @var $content string */


AdminlteAsset::register($this);

?>

<?php $this->beginPage() ?>

<!DOCTYPE html>

<html lang="<?php echo Yii::$app->language ?>">

    <head>

        <meta charset="<?php echo Yii::$app->charset ?>">

AdminlteAsset.php located in my /backend/web/themes/adminlte/assets directory I have the asset bundle as:




<?php


namespace backend\web\themes\adminlte\assets;


use yii\web\AssetBundle;


class AdminlteAsset extends AssetBundle

{

With these changes it works just fine. Now I can place all my theme objects into the correct theme directory.