Developed with love by KnpLabs Hire us for your project!
44

AssetManagementBundle

by smoya

An Asset Management Bundle for Symfony2

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):
jinja
{{ assets_add('assetic/foo.js', 'js') }}

Base Template:
jinja
{{ 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
    ``` jinja
    <!DOCTYPE html>


    Test
    {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}

    {% endstylesheets %}


    {% block content %}
    This page exists for test SmoyaAssetManagementBundle
    {% endblock %}

    {% block javascripts %}
        <script src="{{ asset('assetic/main.js') }}"></script>
    {% endblock %}
    
    {% block extra %}
    
    {% endblock %}
    

    ```

  • index.html.twig
    ``` jinja
    {% 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 %}

    {% endblock %}
    ```

  • widget.html.twig
    ``` jinja
    {% 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 %}


    alert('Widget loaded');

    {% 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
    ``` jinja
    <!DOCTYPE html>


    Test
    {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}

    {% endstylesheets %}


    {% 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 %}
    

    ```

  • index.html.twig
    ``` jinja
    {% 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 %}

    {% endblock %}
    ```

  • widget.html.twig
    ``` jinja
    {% 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:

jinja
{{ 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:

jinja
{{ render_assets($FORMAT) }}

The parameters:

  • 1: ASSETS String Optional The format of the assets to print.
smoya_assetmanagement:  []
  • Merge pull request #7 from c33s/master
    By smoya, 3 years ago
  • fixed coding standard
    By c33s, 4 years ago
  • added instanceof check to cast Twig_Markup objects to string
    By c33s, 4 years ago
  • Merge pull request #4 from eymengunay/master
    By smoya, 4 years ago
  • Inline tag views now output raw value
    By eymengunay, 4 years ago
  • Asset url rendering moved into views
    By eymengunay, 4 years ago
  • Readme updated
    By eymengunay, 4 years ago
  • Inline css and js types added
    By eymengunay, 4 years ago
  • Update README.md
    By smoya, 4 years ago
  • Deleted assetic requirement
    By smoya, 5 years ago
  • Merge pull request #1 from sgrodzicki/master
    By smoya, 5 years ago
  • Fixed PSR Coding Standards
    By sgrodzicki, 5 years ago
  • Unused variables
    By sgrodzicki, 5 years ago
  • Fixed typo in method
    By sgrodzicki, 5 years ago
  • Require Twig
    By sgrodzicki, 5 years ago
  • Ignore Composer files
    By sgrodzicki, 5 years ago
  • Fixed PHPDoc
    By sgrodzicki, 5 years ago
  • Ignore PhpStorm files
    By sgrodzicki, 5 years ago
  • Update composer.json
    By smoya, 5 years ago
  • added composer.json
    By smoya, 5 years ago
  • Update README.md
    By smoya, 5 years ago
  • Updated README.md
    By smoya, 5 years ago
  • Update README.md
    By smoya, 5 years ago
  • Readme improvement
    By Sergio, 5 years ago
  • Continues Readme fix
    By Sergio, 5 years ago
  • Changes on Readme
    By Sergio, 5 years ago
  • Vendors file added
    By Sergio, 5 years ago
  • Added .travis file for testing
    By Sergio, 5 years ago
  • Deleted .gitignore
    By Sergio, 5 years ago
  • changes on README
    By Sergio, 5 years ago