locaine/lcn-include-assets-bundle

Include JS and CSS files in Symfony 2 as you did in Symfony 1 (use_javascript/use_stylesheet)

Maintainers

Details

github.com/FaiblUG/LcnIncludeAssetsBundle

Source

Issues

Installs: 2 494

Dependents: 1

Suggesters: 0

Security: 0

Stars: 1

Watchers: 3

Forks: 0

Open Issues: 0

Type:symfony-bundle

1.2.0 2016-08-17 15:20 UTC

MIT e858ea83c84e6eeff2d416885e8a2e55ff65709c

  • Jonas Fischer-Maeck <info.woop@jonasfischer.net>

twigsymfony 2

This package is not auto-updated.

Last update: 2024-04-27 13:48:28 UTC

README

Step 1: Download the Bundle

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.

Step 2: Enable the Bundle

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(),
        );

        // ...
    }

    // ...
}

Step 2: Install Assets

app/console assets:install

Usage

layout.html.twig

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###

PHP

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);

TWIG

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###

Usage in public bundles

If you are developing a shared bundle and want to make it easy to use, you can easily test if LcnIncludeAssetsBundle is installed.

PHP

if ($container->has('lcn.include_assets')) {
    $this->container->get('lcn.include_assets')->useJavascript('/myFile.js');
}

TWIG

{% if lcn_include_assets_available is defined and lcn_include_assets_available %}
    {{ lcn_use_javascript('/myFile.js') }}
{% endif %}