#136

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Miscellaneous
  • Utility

Google PageSpeed suggests to inline assets https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example and there is no simple way to do so in OctoberCMS (|theme filter generates URL for remote assets access).

This plugin provides easy way to include inlined assets in your code:

Instead of:

<link href="{{ [ 'scss/styles.scss' ]|theme }}" rel="stylesheet">

Use:

<style>{{ [ 'scss/styles.scss' ]|inline }}</style>

And that's all. :)

Standard OctoberCMS's asset minifier is used internally so there are no additional considerations on how to organize your JS, CSS assets (also all OctoberCMS configuration options also apply here: https://octobercms.com/docs/markup/filter-theme). You can just switch from |theme to |inline without modifying your asset's code.

Try other

For more developer tools from the same author, please check:


Icon by: http://freedesignfile.com/370721-rocket-icon-vector/

Introduction

Google PageSpeed suggests to inline assets https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example and there is no simple way to do so in OctoberCMS (|theme filter generates URL for remote assets access).

This plugin provides easy way to include inlined assets in your code:

Usage

CSS

Instead of:

<link href="{{ [ 'scss/styles.scss' ]|theme }}" rel="stylesheet">

Use:

<style>{{ [ 'scss/styles.scss' ]|inline }}</style>

JavaScript

Instead of:

<script src="{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/javascript/app.js'
]|theme }}"></script>

Use:

<script>{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/javascript/app.js'
]|inline }}</script>

And that's all. :)

Summary

Standard OctoberCMS's asset minifier is used internally so there are no additional considerations on how to organize your JS, CSS assets (also all OctoberCMS configuration options also apply here: https://octobercms.com/docs/markup/filter-theme). You can just switch from |theme to |inline without modifying your asset's code.

1.0.5

Add MIT license text (thank you https://github.com/gergo85 )

Jul 13, 2018

1.0.4

Do not use PHP 7.1 syntax, provide better backwards compatibility

Jul 12, 2018

1.0.3

Handle external paths starting with '$' or '~'

Apr 04, 2018

1.0.2

Fix error that prevented loading @framework.extras and other aliases

Apr 04, 2018

1.0.1

First version of InlineAssets

Mar 31, 2018