AssetManagementBundle

An Asset Management Bundle for Symfony2

smoya
18
3
PHP

AssetManagementBundle Build Status

An Asset Management Bundle for Symfony2

##TODO:

  • Improve README Doc
  • More functions
  • Tests
  • etc

This bundle provides an easy way for
manage assetic packages inclusion in Twig Templates. Of course, We need to have previously installed the Assetic library .

This bundle allows you to print the code that includes assets (javascript and css) there in the place where desired. For example, after loading javascript jquery libraries already loaded at the end of the html code.

In example, this is posible:

Template 1 (Not extends from a base template):

{{ assets_add('assetic/foo.js', 'js') }}

Base Template:

{{ assets_render('js') }}

Getting as a result:

<script src="/assetic/foo.js" />

Installation

Add this entry to the deps file

[SmoyaAssetManagementBundle]
    git=https://github.com/smoya/AssetManagementBundle.git
    target=/bundles/Smoya/Bundle/AssetManagementBundle

Register the bundle into your application Kernel

// app/AppKernel.php
public function registerBundles()
{
    return array(
        //..
        new Smoya\AssetManagementBundle\SmoyaAssetManagementBundle(),
        //..
    );
}

In 2.1*

Smoya\Bundle\AssetManagementBundle\SmoyaAssetManagementBundle()

Now update vendors:

$ ./bin/vendors

Now, we need to add this entry to the autoloader:

<?php
// app/autoload.php

$loader->registerNamespaces(array(
    // ...
    'Smoya'        => __DIR__.'/../vendor/bundles',
));

Use

First of all, we need to set the packages need to include.
The guys of Sonata have a post with an example here.

Imagine the following case:

###We have 3 Templates

  • ::base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
            {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}
                <link href="{{ asset_url }}" media="all" type="text/css" rel="stylesheet" />
            {% endstylesheets %}
    </head>
    <body>
        {% block content %}
            This page exists for test SmoyaAssetManagementBundle
        {% endblock %}
    
        {% block javascripts %}
            <script src="{{ asset('assetic/main.js') }}"></script>
        {% endblock %}
    
        {% block extra %}
    
        {% endblock %}
   </body>
</html>
  • index.html.twig
    {% extends '::base.html.twig' %}
    {% block content %}
            This page extends from '::base.html.twig' template and i can include code.
        
    {# We need to render a widget #}
    {% render AcmeTestBundle:Test:widget %}
        
    {% endblock %}

    {% block extra %}
        <script src="{{ asset('assetic/bar.js' }}" />
    {% endblock %}
  • widget.html.twig
    {% block widget %}
        I am a widget and I need render Javascript at the bottom of the website code       
    {% endblock %}
    
    {# This block extra is not the ::base.html.twig 'extra' block #}
    {# Because im not extending the ::base.html.twig template #}
    {% block extra %}
        <script src="{{ asset('assetic/another.js' }}" />
        <script>
            alert('Widget loaded');
        </script>
    {% endblock %}

###The problem and a solution:
When using Twig render, and if the rendered template contains javascript, it will print where the’ve called. This is a problem if you are rendering before loading javascripts, especially if the code requires other libraries (eg jQuery).

For this we use the features of Twig adding this bundle as follows:

  • ::base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
            {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}
                <link href="{{ asset_url }}" media="all" type="text/css" rel="stylesheet" />
            {% endstylesheets %}
    </head>
    <body>
        {% block content %}
            This page exists for test SmoyaAssetManagementBundle
        {% endblock %}
    
        {% block javascripts %}
            <script src="{{ asset('assetic/main.js') }}"></script>
        {% endblock %}
    
        {# render managed assets #}
        {{ render_assets() }} 
    
        {% block extra %}
    
        {% endblock %}
   </body>
</html>
  • index.html.twig
    {% extends '::base.html.twig' %}
    {% block content %}
        This page extends from '::base.html.twig' template and i can include code.
        
        {# We need to render a widget #}
        {% render AcmeTestBundle:Test:widget %}
        
    {% endblock %}
    
    {# This one can do because we inherited from the template base, which contains this block below including javascript #}
    {% block extra %}
        <script src="{{ asset('assetic/bar.js' }}" />
    {% endblock %}
  • widget.html.twig
    {% block widget %}
        I am a widget and I need render Javascript at the bottom of the website code       
    {% endblock %}
    
    {# add_assets adds the inclusion html code for the passed assets in the place where the render_assets() function is called #}
    {{ add_assets('assetic/bar.js', 'js') }}
    {{ add_assets('alert("Widget Loaded");', 'inline_js') }}

##Options and parameters
Add Assets:

    {{ add_assets([$ASSETS], $FORMAT, {$ATTR}) }}

The parameters:

  • 1: ASSETS Array/Scalar An array of assets or a single asset. example: [‘assetic/foo.js’, ‘assetic/bar.js’]
  • 2: FORMAT String The format of the assets (js, css, inline_js or inline_css)
  • 3: ATTR Array Optional Associative array of attributes for the inclusion html tag. example for a css asset: {‘media’: ‘screen’}

Print assets:

    {{ render_assets($FORMAT) }}

The parameters:

  • 1: ASSETS String Optional The format of the assets to print.