Managing Assets

• Posted February 21, 2017
• Addon Development
• Beginner

---

Introduction

PyroCMS leaves it up to you to use the strategy that fits best for managing and displaying assets for your project. In this article we will take a high-level look at what some common options look like so you can mix and match as needed.

Asset Service

Pyro comes with an service for managing assets right out of the box built on Assetic:

{% verbatim %} {# Base Theme Components #} {{ asset_add("theme.css", "theme::scss/bootstrap/bootstrap.scss") }} {{ asset_add("theme.css", "theme::scss/font-awesome/font-awesome.scss") }}

{# Specific Build Files #}
{{ asset_add("build.css", "theme::scss/theme/theme.scss", ["live"]) }}

{# Core Theme Components #}
{{ asset_add("theme.js", "theme::js/vendor/jquery.min.js") }}
{{ asset_add("theme.js", "theme::js/vendor/tether.min.js") }}
{{ asset_add("theme.js", "theme::js/vendor/bootstrap.min.js") }}
{{ asset_add("theme.js", "theme::js/vendor/vue.min.js") }}

{# Theme Scripts #}
{#{{ asset_add("theme.js", "theme::js/plugins/*") }}#}
{{ asset_add("theme.js", "theme::js/theme/initialize.js") }}

{# Include Asset Collections #}
{{ asset_style("theme.css") }}
{{ asset_style("build.css") }}
{{ asset_script("theme.js") }}

{# Include Styles Loaded From Outside #}
{% for style in asset_styles("styles.css") %}
    {{ style|raw }}
{% endfor %}

{% endverbatim %}

Compiling Assets

Generally speaking the asset service compiles automatically when it detects a change. You may, however, benefit from forcing the compile of specific collections on every load during development. To force a collection to compile simply add the live command to it:

{% verbatim %}{{ asset_style("build.css", ["live"]) }}{% endverbatim %}

Then add the following to your .env file:

LIVE_ASSETS=public

Package Managers

You can include packages from Bower or Node with the asset service by using the path hints associated for them:

{% verbatim %}{{ asset_add("theme.css", "node::bootstrap/less/bootstrap.less") }}{% endverbatim %}

You can also include it within a stylesheet of your own as needed:

@import "../../../../../bower_components/bootstrap/less/bootstrap";
@import "variables";

Public Assets

Especially when using automation tools like Grunt to compile assets it can be helpful to just compile them straight to the public directory for including with a normal stylesheet link. If you wanted to reference those files you can do so with public and asset path hints:

{% verbatim %}{{ asset_add("styles.css", "public::example.css") }} // public/example.css{% endverbatim %}

{% verbatim %}{{ asset_add("styles.css", "asset::example.css") }} // public/app/{REF}/example.css{% endverbatim %}

CDN Assets

You can of course still use CDNs as desired:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>