Wallogit.com
2017 © Pedro Peláez
Symfony2 bundle that provides an easy way for manage assetic packages inclusion in Twig Templates.
An Asset Management Bundle for Symfony2, (*1)
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 ., (*2)
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., (*3)
In example, this is posible:, (*4)
Template 1 (Not extends from a base template): ``` jinja {{ assets_add('assetic/foo.js', 'js') }}, (*5)
Base Template: ``` jinja {{ assets_render('js') }}
Getting as a result:, (*6)
``` html , (*7)
## Installation ### Add this entry to the `deps` file
[SmoyaAssetManagementBundle] git=https://github.com/smoya/AssetManagementBundle.git target=/bundles/Smoya/Bundle/AssetManagementBundle, (*8)
### 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: ``` bash $ ./bin/vendors
Now, we need to add this entry to the autoloader:, (*9)
``` php <?php // app/autoload.php, (*10)
$loader->registerNamespaces(array( // ... 'Smoya' => DIR.'/../vendor/bundles', ));, (*11)
## Use First of all, we need to **set the packages** need to include. The guys of **Sonata** have a post with an example [here](http://sonata-project.org/blog/2012/5/15/assetic-package-configuration). Imagine the following case: ###We have 3 Templates * ::base.html.twig ``` jinja <!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 ``` jinja {% extends '::base.html.twig' %} {% block content %} This page extends from '::base.html.twig' template and i can include code., (*12)
{# We need to render a widget #} {% render AcmeTestBundle:Test:widget %}, (*13)
{% endblock %}, (*14)
{% block extra %}, (*15)
{% endblock %}, (*16)
* 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 %} <script src="{{ asset('assetic/another.js' }}" /> <script> alert('Widget loaded'); </script> {% endblock %}
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)., (*17)
For this we use the features of Twig adding this bundle as follows:, (*18)
::base.html.twig ``` jinja , (*19)
{% block javascripts %}
<script src="{{ asset('assetic/main.js') }}"></script>
{% endblock %}
{# render managed assets #}
{{ render_assets() }}
{% block extra %}
{% endblock %}
, (*20)
* 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 %}
<script src="{{ asset('assetic/bar.js' }}" />
{% endblock %}
widget.html.twig
``` jinja
{% block widget %}
I am a widget and I need render Javascript at the bottom of the website code
{% endblock %}, (*21)
{# 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') }}, (*22)
##Options and parameters Add Assets: ``` jinja {{ add_assets([$ASSETS], $FORMAT, {$ATTR}) }}
The parameters:, (*23)
Print assets:
jinja
{{ render_assets($FORMAT) }}, (*24)
The parameters:, (*25)
Symfony2 bundle that provides an easy way for manage assetic packages inclusion in Twig Templates.
MIT
twig css javascript asset manage assetic bottom
Symfony2 bundle that provides an easy way for manage assetic packages inclusion in Twig Templates.
MIT
twig css javascript asset manage assetic bottom