Donnerstag, 30. Juli 2015

Yii2: Bring the assets from your module to your view

If you want to ship assets (JavaScript, CSS files) from your Yii2 module to your view, you can do that elegant with a couple of simple steps.

1., Folder structure

We assume that your Yii2 module is located at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER

The assets are at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/assets

So the JavaScript files are at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/assets/js

2., Set an alias to your assets in your Module.php in your module (/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/Module.php)


3., Put your asset class into your assets folder to setup your "assets bundle"

We name a bunch of assets "assets bundle". Here you declare your files and make it accessible to your view.

4., Now you can access your assets from your view

We assume that your view's index.php file is located at /yii-base-folder/modules/YOUR-MODULE/views/ANY-VIEWS-SUBFOLDER/index.php

5., Conclusion

Now Yii2 puts your CSS and JavaScript files nicely into your HTML. By default the JavaScript files will be put nicely into the footer of your HTML. Also the CSS and JavaScript files will be copied into your web-accessible assets folder. The users from your webpage will not be allowed to get info about your Yii project folder structure. So the path to your JavaScript file will look like that: 

The path in your project's directory will be:
/YOUR-Yii2-PROJECT/web/assets/3598bbc6/js/YOUR-JavaScript-File.js

Also the PHP asset class will be copied from your module's folder:
/YOUR-Yii2-PROJECT/web/assets/3598bbc6/YourAssetsPhpClass.php

Don't forget to not modify the files at /YOUR-Yii2-PROJECT/web/assets/3598bbc6/ manually, because they're created automatically by the Yii2 framework.

6., Learn more

The "The Definitive Guide to Yii 2.0" is mostly the best first place to learn about Yii2. So you find more detailed information about the assets functionality at the assets chapter. I recommend also to read the excellent PHP class comments in the Yii2 core. Like f.e. /YOUR-Yii2-PROJECT/vendor/yiisoft/yii2/web/AssetBundle.php. Yii2 is one of the few OpenSource projects where the PHP code itself can often lead you to your goals.
Eingestellt von um

6 Kommentare:

  1. Cherman31. Juli 2015 um 19:40

    Hi, nice post. Thanks for sharing. I followed your tutorial and afterwards I want to compress and minify the assets of the module. I follow the guide but have some problems with background images in the CSS. Could you help?

    Thanks

    AntwortenLöschen
  2. Unknown1. August 2015 um 10:55

    Hi, thanks for your complement. You could consider compressing your background image with base64. Here's a discussion for this case:http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice

    AntwortenLöschen
  3. Cherman3. August 2015 um 08:35

    Hi Peter,

    Thanks for your reply. The problem I have is that the module has some images which are part of the module's assets. When I publish the assets, a folder is created (like assets/80f9c689) with the css, js and images. The CSS compressor (I'm using yui for CSS) replaces the URLs in the CSS with assets/80f9c689/images/icon.ong, which works well on my local environment. However, when I deploy to production, the server generates other folders for assets like assets/c65aa1d0. Since the CSS has references to the images generated in the local folders, the images are not displayed.

    Any idea how to overcome this?

    Thanks in advance for your help.

    AntwortenLöschen
  4. Unknown18. Dezember 2015 um 04:34

    Hi,

    sorry for the late reply.

    It seems to be a Yui implementation issue. Why are you re-generating the assets in production?

    AntwortenLöschen
  5. Cherman18. Dezember 2015 um 06:08

    It is done automatically by Yii, the web/assets is gitignored, each environment creates its own subdirectories. I still haven't found a solution to this

    AntwortenLöschen
  6. Unknown17. Januar 2016 um 11:55

    Sorry man, I've found everything about assets in the fantastic Yii2 guide for assets at http://www.yiiframework.com/doc-2.0/guide-structure-assets.html. May the guide will help you out?

    AntwortenLöschen

Abonnieren Kommentare zum Post (Atom)