---
title: Assets
---

# Assets

<div class="documentation__toc"></div>

## Introduction

The asset manager can be used via API or, more commonly, within views. To use the class outside of views you will need to include the `\Anomaly\Streams\Platform\Asset\Asset` class.

> Assetic is being deprecated. This document will assume it is still available for now.{.important}

### Laravel Mix

All addons are now generated pre-configured and ready to use `Mix`. The asset class as mentioned above will not act as a compiler in the future so it is wise to familiarize yourself with Mix.

[Laravel Mix](https://laravel.com/docs/mix){.link}

## Collections

Collections are used to organize the assets you are working with. Assets in a collection can be combined or used individually.

> Collections are _always_ named such a way that it reflects the desired output name.{.note}

The basic idea is that you add individual assets like `example.theme.awesome::scss/inputs.scss` to collections like `theme.css` and output them all together.

```twig
{{ asset_add("theme.css", "theme::less/fonts/fonts.less") }}
{{ asset_add("theme.css", "theme::less/theme/theme.less") }}
{{ asset_add("build.css", "theme::scss/theme/theme.scss") }}

{{ asset_add("theme.js", "theme::js/libraries/jquery.min.js") }}
{{ asset_add("theme.js", "theme::js/libraries/tether.min.js") }}
{{ asset_add("theme.js", "theme::js/libraries/bootstrap.min.js") }}
{{ asset_add("theme.js", "theme::js/libraries/prism.min.js") }}
{{ asset_add("theme.js", "theme::js/libraries/mark.min.js") }}
{{ asset_add("theme.js", "theme::js/theme/*") }}

<style type="text/css">
    {{ asset_inline("theme.css") }}
    {{ asset_inline("build.css") }}
</style>

{{ asset_script("theme.js") }}
```

```php
app(\Anomaly\Streams\Platform\Asset\Asset::class)
    ->add('theme.css', 'theme::example/text.less')
    ->add('theme.css', 'theme::example/foo.less')
    ->path();
```

### Looping Assets

There are also collections like `scripts.js` and `styles.css` that are standard in core to be looped over so that your field types and other systems can display assets without a fixed collection cache file. Since these assets might be different on every page.

```twig
<style type="text/css">
    {% for style in asset_inlines("styles.css") %}
    {{ style|raw }}
    {% endfor %}
</style>

<script type="text/javascript">
    {% for script in asset_inlines("scripts.js") %}
    {{ script|raw }}
    {% endfor %}
</script>
```

## Filters

Filters are used to mutate the content of the assets or provide commands to the asset manager.

> Filters can be applied to individual assets in a collection as well as the entire collection.{.tip}

```twig
{{ asset_add("collection.css", "theme::example.scss", ["min", "live"]) }}
```

```php
$asset->add("collection.css", "theme::example.scss", ["min", "live"]);
```

#### Available Filters

- `min`: minifies content
- `less`: parses LESS into CSS
- `styl`: parses STYL into CSS
- `scss`: parses SCSS into CSS
- `parse`: parses content with Twig. Uses an alternate comment syntax `{* *}` to prevent clashes with CSS selectors.
- `coffee`: compiles CoffeeScript into Javascript
- `embed`: embeds image data in your stylesheets
- `live`: refreshes content when LIVE_ASSETS is enabled
- `version`: appends an automated version ID to the published path

```twig
{{ asset_style('theme.css', ['version']) }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->path('theme.css', ['version']);
```

### Automatic Filters

`scss`, `less`, `styl`, and `coffee` filters are are applied automatically to matching files.

> Assetic is being deprecated. These flags will be removed when Assetic is removed.{.important}

You may wish to use files that use an alternate syntax like LESS for CSS or Coffee for Javascript. In most cases you do not need to manually add filters to compile these assets to relevant syntax for output. Simply add them along with your other assets.

```twig
{{ asset_add('theme.css', 'example::styles/example.css') }}
{{ asset_add('theme.css', 'example::styles/example.less') }}
{{ asset_add('theme.css', 'example::styles/example.scss') }}
{{ asset_add('theme.css', 'example::styles/example.styl') }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset
    ->add('theme.css', 'example::styles/example.css')
    ->add('theme.css', 'example::styles/example.less')
    ->add('theme.css', 'example::styles/example.scss')
    ->add('theme.css', 'example::styles/example.styl');
```

## Path Hints

To avoid having to use full paths to your assets there are a number of path hints available. Hints are a namespace that prefixes the asset path.

[Asset Hint Reference](../reference/hints#assets){.link}

```php
"theme::js/initialize.js"
// path-to-your-active-theme/resources/js/initialize.js

"anomaly.module.products::js/initialize.js"
// path-to-products-module/resources/js/initialize.js
```

### Registering Path Hints

Registering path hints is easy. Just inject the `\Anomaly\Streams\Platform\Asset\Asset` class into your service provider or function and use the `addPath` method:

```php
$asset->addPath("foo", base_path("example/path"));
```

Now you can use the path hint:

```twig
{{ asset_add('theme.js', 'foo::example/test.js') }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->add('theme.js', 'foo::example/test.js');
```

## Named Assets

Sometimes it's necessary to include assets in your addon that may be duplicated by other addons that share the library or script. You can name your assets to prevent further loading of the same assets elsewhere with the as:* filter. Named assets are unique across all collections.

```twig
{{ asset_add("styles.css", "anomaly.field_type.select::scss/choices.scss", ["as:jshjohnson/Choices.css"]) }}
{{ asset_add("scripts.js", "anomaly.field_type.select::js/choices.min.js", ["as:jshjohnson/Choices.js"]) }}
```

> The name provided is forced lowercase internally to normalize names.{.info}

### Required Assets

You can force named assets to be included by using the required filter if needed. This is helpful if a static collection includes the library that may be included dynamically later.

```twig
{{ asset_add(
    "build.css",
    "pyrocms.theme.accelerant::scss/theme/theme.scss",
    [
        "required",
        "as:t4t5/sweetalert.css",
        "as:jshjohnson/Choices.css",
        "as:rstacruz/nprogress.css",
    ]
) }}
```

## Clearing Asset Cache

You can use the `asset:clear` command to clear the asset cache files.

```bash
php artisan asset:clear
```

Optionally you can define whether to clear only `public` or `admin` asset caches.

```bash
php artisan asset:clear public
```


## Basic Usage

### add

The `add` method let's you add a single asset or glob pattern of assets to a collection.

|Argument|Type|Description|
|--- |--- |--- |
|`collection`|string|The collection to add the asset to.|
|`file`|string|The file or glob pattern to add to the collection.|
|`filters`|array|An optional array of filters to apply to the single asset or glob.|


```twig
{{ asset_add('theme.css', 'theme::css/inputs.css', ['parse']) }}
{{ asset_add('theme.css', 'theme::css/*', ['parse']) }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->add('theme.css', 'theme::css/inputs.css', ['parse']);
$asset->add('theme.css', 'theme::css/*', ['parse']);
```

### download

The `download` method lets you cache a remote resource on your server. This might be an edge case scenario but it sure it handy when you need it!

|Argument|Type|Default|Description|
|--- |--- |--- |--- |--- |
|`url`|string|none|The url to add the remote asset.|
|`ttl`|integer|3600|The number of seconds to cache the resource for.|
|`path`|string|{host}/{filename}|The path in downloads to put the cached asset.|

```twig
{{ asset_add(
    'theme.js',
    asset_download('http://shakydomain.com/js/example.js', 60*60*24)
) }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->add(
    'theme.js',
    $asset->download('http://shakydomain.com/js/example.js', 60*60*24)
);
```

### inline

The `inline` method returns the contents of a collection for including inline or dumping from a controller response.

|Argument|Type|Default|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|none|The collection return contents of.|
|`filters`|array|null|An optional array of filters to apply to the collection.|

```twig
<script type="text/javascript">
    {{ asset_inline('theme.js', ['min']) }}
</script>
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

echo $asset->inline('theme.js', ['min']);
```

### url

The `url` method returns the full URL to the collection output file.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the URL for.|
|`filters`|array|An array of filters to apply to the entire collection.|
|`parameters`|array|Query string parameters to append to the URL.|
|`secure`|boolean|Whether to return HTTP or secure HTTPS URL. Defaults to same as request.|


```twig
<script type="text/javascript" src="{{ asset_url('theme.js', ['min']) }}"></script>
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->url('theme.js', ['min']);
```

### path

The `path` method returns the URL path to the collection output file.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the URL for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|

```twig
<script type="text/javascript" src="{{ asset_path('theme.js') }}"></script>
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->path('theme.js');
```

### asset

The `asset` method returns the path with the root prefix included. This is helpful if you are installed and serving from a directory and not a virtual host.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the path for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|

```twig
<script type="text/javascript" src="{{ asset_asset('theme.js') }}"></script>
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->asset('theme.js');
```

### script

The `script` method returns a `<script>` tag including the collection output file.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the tag for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|
|`attributes`|array|An optional array of additional `key => value` attributes.|

```twig
{{ asset_script('theme.js', ['parse']) }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->script('theme.js', ['parse']);
```

You can also pass the URL of an arbitrary asset to include it as well.

```twig
{{ asset_script('public::example/test.js') }}
```

### style

The `style` method returns a `<link>` tag linking the collection output file.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the tag for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|
|`attributes`|array|An optional array of additional `key => value` attributes.|

```twig
{{ asset_style('theme.css', ['min'], ['media' => 'print']) }}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->style('theme.css', ['min'], ['media' => 'print']);
```

### scripts

The `scripts` method return an array of `<script>` tags for each asset added to the collection.

> Addons leverage the `scripts.js` collection for per page inclusion of assets. Be sure to include it in your theme!{.important}

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the tags for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|
|`attributes`|array|An optional array of additional `key => value` attributes.|

```twig
{% for script in asset_scripts('scripts.js') %}
    {{ script|raw }}
{% endfor %}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->scripts('scripts.js');
```

### styles

The `styles` method returns an array of `<link>` tags for each asset in the collection.

> Addons leverage the `styles.css` collection for per page inclusion of assets. Be sure to include it in your theme!{.important}

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the tags for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|
|`attributes`|array|An optional array of additional `key => value` attributes.|

```twig
{% for style in styles('theme.css', ['min']) %}
    {{ style|raw }}
{% endfor %}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->styles('theme.css', ['min']);
```

### paths

The `path` method returns an array of URL paths for each asset in the collection.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the paths for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|

```twig
{% for path in asset_paths('styles.css') %}
    {{ html_style(path) }}
{% endfor %}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->paths('styles.css');
```

### urls

The `urls` method returns an array of URLs for each asset in the collection.

|Argument|Type|Description|
|--- |--- |--- |--- |--- |
|`collection`|string|The collection return the URLs for.|
|`filters`|array|An optional array of filters to apply to the entire collection.|

```twig
{% for url in asset_urls('styles.css') %}
    {{ html_style(url) }}
{% endfor %}
```

```php
$asset = app(\Anomaly\Streams\Platform\Asset\Asset::class);

$asset->urls('styles.css');
```
