<script async src="https://usocial.pro/usocial/usocial.js?v=6.1.4" data-script="usocial" charset="utf-8"></script>
How to include in appAsset:
async
and
data-script ?
You should add the script inside your public $js array as follows for using inside the AppAsset
public $js = [
[
'https://usocial.pro/usocial/usocial.js?v=6.1.4',
'async' => 'async',
'data'=>['script'=>'usocial']
]
];
Note: if you want the async option to be turned on for all scripts
that are loaded via Assets then you can use the public $jsOptions
too
public $jsOptions = [
'async' => 'async',
];
Related
I have RTL layout for my yii2 application using airani\bootstrap\BootstrapRtlAsset. However, I want to customize the Bootstrap using this online tool.
The tool generates a css file which I want it to be linked directly before bootstrap-rtl.css comes from BootstrapRtlAsset.
The only way, that I know, to do that, is creating new AssetBundle in app/assets like the following:
<?php
namespace app\assets;
use yii\web\AssetBundle;
class ThemeAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/theme.min.css',
];
public $js = [
];
}
Then I should add it in the $depends of AppAsset:
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'app\assets\ThemeAsset',
'airani\bootstrap\BootstrapRtlAsset',
];
So is there any other way that allows me to replace app\assets\ThemeAsset with just the path of the css file css/theme.min.css without need to create new AssetBundle?
Use registerCssFile() Concept
http://www.yiiframework.com/doc-2.0/yii-web-view.html#registerCssFile%28%29-detail
You just need to modify the file: frontend/assets/AppAsset.php, add one line.
public $css = [
'css/theme.min.css',
... Your other css ...
];
i've been trying to load a simple CSS (custom.css) from the frontend and backend of my project and I't has been a real pain.
The css is located in:
frontend/views/web/css/custom.css
It loads without problems in the frontend... this is the AppAsset file located in the frontend:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
'css/custom.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
So I just thought that the AppAsset file located in backend should look like this:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main backend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/custom.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
But all I get when loading the backend index is this:
http://localhost:8888/backend/web/css/custom.cssFailed to load resource: the server responded with a status of 404 (Not Found)
Sorry for the noob question and thanks in advanced. Just want to share a css between frontend and backend.
One direct way to do this is to have a common web accessible folder under app root. Something like /assets, which you can access from both BackEnd and FrontEnd. You would need to edit your .htaccess to allow this as well.
Yii2 will publish assets only if $sourcePath is set, and $basePath and $baseUrl are not set(!)
Therefore:
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $sourcePath = '#app/assets/app';
public $css = [
'css/openbook.css',
'fontello/css/fontello.css',
'fontello/css/animation.css'
];
public $js = [
'js/plug.openbook.js',
'js/plug.interpret.js',
'js/plug.drop.message.js'
];
public $depends = [
// 'yii\web\YiiAsset',
// 'yii\bootstrap\BootstrapAsset',
];
}
in the main layout:
use frontend\assets\AppAsset;
...
AppAsset::register($this);
If you want to load a share resource i.e js or css , in YourAsset class sourcePath must be "#yourSource/web/",
for example if you want to load a css file in frontend which is located in common/web/css/ directory , your AppAsset or any other custom asset class resides in common/ must have following variables initialize
public $sourcePath = "#common/web";
public $basePath ="#common";
Note : "#ewbroot" path & $baseUrl ="#web" will locate to your current accessing path, in this case it is frontend
& will load it
"localhost/yii-application/frontend/css/filename.css"
so you must omit it.
you can register the file on any view or layout itself
<?php $this->registerCssFile('http://domain.com/frontend/web/path/file.css');?>
or
you can also add the full path in asset bundle
public $css = [
'http://domain.com/frontend/web/path/file.css',
];
We wish to load the following:
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="/css/good-browsers.css" />
<![endif]-->
How can I setup the bundle assets, to conditionally loading a certain css file?
The answer targeted answer this for TWO different resources.
return [
// ...
'components' => [
'assetManager' => [
'bundles' => [
'yii\web\YiiAsset' => [
'jsOptions' => ['condition' => 'lt IE 7'],
],
'yii\bootstrap\BootstrapAsset' => [
'jsOptions' => ['condition' => 'lt IE 7'],
],
],
],
],
];
In this case, however, they both are related to: 'yii\web\YiiAsset'. How can load them conditionally?
You should be able to do this by creating two asset bundles instead of one and then use the $cssOptions property on the IE bundle and have it depend on your generic bundle:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
'js/site.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'\yii\web\JqueryAsset',
];
}
IE bundle:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class AppIeAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site_ie.css',
];
public $js = [
'js/site_ie.js',
];
public $cssOptions = [
'condition' => 'IE',
];
public $depends = [
'\frontend\assets\AppAsset', // Depend on the regular app bundle
];
}
Main layout:
<?php
/**
* #var yii\web\View $this
*/
AppIeAsset::register($this);
?>
blablabla
Edit:
I see that you're trying to do it the opposite way - it should still be rather simple as all you have to do is change the name of your IE asset (to not cause confusion) and change the condition.
I am doing a web app on Yii2 framework. Defined (extended) new AssetBundle
class NeonAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $css = [
'css/font-icons/entypo/css/entypo.css',
'...',
'...'
];
public $js = [
'js/be_in_head_tag.js',
'...',
'...',
];
}
When rendered, CSS files are being published in <head> tag, and JS files at the bottom of <body> tag. It is ok.
But I want a single be_in_head_tag.js file to be published in <head> tag. And when I use $jsOptions it moves all JS files into the <head> tag.
Is it possible to make options only for one file?
One of the variants make that file into a separate asset class:
class HeadPublishAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $js = ['js/be_in_head_tag.js'];
public $jsOptions = ['position' => \yii\web\View::POS_HEAD];
}
And add a dependency to your base class like:
class NeonAsset extends AssetBundle {
...
public $depends = ['app\assets\HeadPublishAsset'];
...
}
I'm pleased to say that the ability to do this at the file level has been added to Yii2 at some point. It doesn't however appear in any of the documentation examples. I've tested and confirmed...
class NeonAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $css = [
'css/font-icons/entypo/css/entypo.css',
'...',
'...'
];
public $js = [
['js/be_in_head_tag.js', 'position' => \yii\web\View::POS_HEAD],
'...',
'...',
];
}
Options included in the $js array are now passed to the relevant method and result in the file being included in the selected part of the html file.
I don't know if there's an official way of doing it (probably not as it would make the specification of the options object overly complicated), however there's another easier way compared to the accepted answer which doesn't require you to create another AssetBundle.
All you need to do is create another array, for example:
public $head_js =
[
"path/to/src.js"
];
Then override the registerAssetFiles function like so:
public function registerAssetFiles($view)
{
foreach($this->head_js as $js)
{
$options = [];
$options["position"] = \yii\web\View::POS_HEAD;
$url = Url::to($this->baseUrl . "/" . $js);
$view->registerJsFile($url, $options);
}
parent::registerAssetFiles($view);
}
I have read the docs, but can't make out how to do that for example I have a small script in file index.php in view folder medicine-issue-entry like:
<?php
$js = 'function refresh() {
$.pjax.reload({container:"#medicine_request_entry"});
setTimeout(refresh, 60000); // restart the function every 5 seconds
}
refresh();';
$this->registerJs($js, $this::POS_READY);
?>
Where I can put this code in a separate file and how to include that in the relevant file.
A detailed process will be greatly appreciated.
Thanks.
Ok I am using the basic template.
In AppAsset.php I have included like
public $js = [
'js/autorefresh.js'
];
and created a folder js in web folder and created a new file autorefresh.js with the following code:
function refresh() {
$.pjax.reload({container:"#medicine_request_entry"});
setTimeout(refresh, 60000); // restart the function every 5 seconds
}
refresh();
and in my index.php I have added the line
namespace app\assets;
use app\assets\AppAsset;
AppAsset::register($this);
But the same is not working, am I still missing something? As when I include the code in the file with registerJs it is working fine.
Note: on viewing the page source the file is correctly published and clicking on the link it show the script, but the code is not working.
Using the Basic Template for Yii2
Add your autorefresh.js script to the /web/js/ directory
function refresh() {
$.pjax.reload({container:"#medicine_request_entry"});
setTimeout(refresh, 60000); // restart the function every 5 seconds
}
refresh();
Add your script to the $js array inside AppAsset class located in /assets/AppAsset.php
<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
'js/autorefresh.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
Make sure that your AssetBundle is registered.
use app\assets\AppAsset;
AppAsset::register($this);
or
\app\assets\AppAsset::register($this);
NOTE: Your don't set the namespace of the index.php file.