Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:
$ composer require locaine/lcn-include-assets-bundle "~1.1"This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.
Then, enable the bundle by adding the following line in the app/AppKernel.php
file of your project:
<?php
// app/AppKernel.php
// ...
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ...
new Lcn\IncludeAssetsBundle\LcnIncludeAssetsBundle(),
);
// ...
}
// ...
}app/console assets:install
In order to be able to add CSS and JS files from within any twig template file, you have to include the assets in your layout.html.twig file:
<html>
<head>
###lcn_include_stylesheets###
...
</head>
###lcn_include_javascripts###
</body>
This would include the assets for all positions (first, middle and last). If you need to include them at different positions within your layout, you can include them seperately:
###lcn_include_stylesheets:first###
###lcn_include_stylesheets:middle###
###lcn_include_stylesheets:last###
###lcn_include_javascripts:first###
###lcn_include_javascripts:middle###
###lcn_include_javascripts:last###
Example controller code:
//add stylesheet
$this->container->get('lcn.include_assets')->useStylesheet('/test_php.css');
//add stylesheet with optional position (default = middle)
$this->container->get('lcn.include_assets')->useStylesheet('/test_php_last.css', 'last');
$this->container->get('lcn.include_assets')->useStylesheet('/test_php_first.css', 'first');
$this->container->get('lcn.include_assets')->useStylesheet('/test_php_middle.css', 'middle');
//add stylesheet async
$this->container->get('lcn.include_assets')->useStylesheet('/test_php_last_async.css', 'last', true);
//add javascript
$this->container->get('lcn.include_assets')->useJavascript('/test_php.js');
//add javascript with optional position (default = middle)
$this->container->get('lcn.include_assets')->useJavascript('/test_php_last.js', 'last');
$this->container->get('lcn.include_assets')->useJavascript('/test_php_first.js', 'first');
$this->container->get('lcn.include_assets')->useJavascript('/test_php_middle.js', 'middle');
//add javascript async
$this->container->get('lcn.include_assets')->useJavascript('/test_php_last_async.js', 'last', true);Example Twig template code:
{# add stylesheet #}
{{ lcn_use_stylesheet('/test_twig.css') }}
{# add stylesheet with asset helper #}
{{ lcn_use_stylesheet(asset('test_twig_asset.css')) }}
{# add stylesheet with optional position (default = middle) #}
{{ lcn_use_stylesheet('/test_twig_first.css', 'first') }}
{{ lcn_use_stylesheet('/test_twig_middle.css', 'middle') }}
{{ lcn_use_stylesheet('/test_twig_last.css', 'last') }}
{# add stylesheet async #}
{{ lcn_use_stylesheet('/test_twig_last_async.css', 'last', true) }}
{# include stylesheets for all positions #}
###lcn_include_stylesheets###
{# include stylesheets for single position #}
###lcn_include_stylesheets:first###
{# add javascript #}
{{ lcn_use_javascript('/test_twig.js') }}
{# add javascript with asset helper #}
{{ lcn_use_javascript(asset('test_twig_asset.js')) }}
{# add javascript with optional position (default = middle) #}
{{ lcn_use_javascript('/test_twig_first.js', 'first') }}
{{ lcn_use_javascript('/test_twig_middle.js', 'middle') }}
{{ lcn_use_javascript('/test_twig_last.js', 'last') }}
{{ lcn_use_inline_javascript("console.log('lcn_use_inline_javascript - last');", 'last') }}
{# include javascripts for all positions #}
###lcn_include_javascripts###
{# include javascripts for single position #}
###lcn_include_javascripts:first###
If you are developing a shared bundle and want to make it easy to use, you can easily test if LcnIncludeAssetsBundle is installed.
if ($container->has('lcn.include_assets')) {
$this->container->get('lcn.include_assets')->useJavascript('/myFile.js');
}{% if lcn_include_assets_available is defined and lcn_include_assets_available %}
{{ lcn_use_javascript('/myFile.js') }}
{% endif %}