GuidesDiscussions

Asset

Suggest Edits

Asset Component is a port of Laravel 3 Asset for Orchestra Platform. The component main functionality is to allow asset declaration to be handle dynamically and asset dependencies can be resolve directly from the container. It however is not intended to becoma an asset pipeline package for Laravel, for such purpose we would recommend to use Grunt or Gulp.

Register

The Asset class provides a simple way to manage the CSS and JavaScript used by your application. To register an asset just call the add method on the Asset class:

<?php

Asset::add('jquery', 'js/jquery.js');
Asset::add('bootstrap', 'js/bootstrap.js', ['jquery']);

<head>
	{!! Asset::styles() !!}
  {!! Asset::scripts() !!}
</head>

<!-- or using show() method -->

<head>
  {!! Asset::show() !!}
</head>

The add method accepts three parameters. The first is the name of the asset, the second is the path to the asset relative to the public directory, and the third is a list of asset dependencies (more on that later). Notice that we did not tell the method if we were registering JavaScript or CSS. The add method will use the file extension to determine the type of file we are registering.

Dependencies

Sometimes you may need to specify that an asset has dependencies. This means that the asset requires other assets to be declared in your view before it can be declared. Managing asset dependencies couldn't be easier in Orchestra Platform. Remember the "names" you gave to your assets? You can pass them as the third parameter to the add method to declare dependencies:

Registering a bundle that has dependencies:

<?php

Asset::add('jquery-ui', 'js/jquery-ui.js', 'jquery');

In this example, we are registering the jquery-ui asset, as well as specifying that it is dependent on the jquery asset. Now, when you place the asset links on your views, the jQuery asset will always be declared before the jQuery UI asset. Need to declare more than one dependency? No problem:

Registering an asset that has multiple dependencies:

<?php

Asset::add('jquery-ui', 'js/jquery-ui.js', ['first', 'second']);

Containers

To increase response time, it is common to place JavaScript at the bottom of HTML documents. But, what if you also need to place some assets in the head of your document? No problem. The asset class provides a simple way to manage asset containers. Simply call the container method on the Asset class and mention the container name. Once you have a container instance, you are free to add any assets you wish to the container using the same syntax you are used to:

Retrieving an instance of an asset container:

<?php

Asset::container('footer')->add('example', 'js/example.js');

<footer>
  {!! Asset::container('footer')->scripts() !!}
</footer>

Versioning

Another option to increase response time is by utilizing browser caching, while there few ways to do this we pick last modified time as our way to version the Asset.

<?php

Asset::container()->addVersioning();

# or alternatively

Asset::addVersioning();

You can remove adding versioning number by using:

<?php

Asset::container()->removeVersioning();

# or alternatively

Asset::removeVersioning();

🚧

Versioning Limitation

This would only work with local asset.

Updated less than a minute ago