kanaslab: Including javascript and css in Symfony2

when installing the framework by default it comes with a bundle called "DemoBundle". I used that bundle to locate css and javascript. here i want to load twiter Bootstrap. i downloaded the bootstrap and uncompressed and place it in the "/<project folder>/src/Acme/DemoBundle/Resources/public/css/" folder. So now we want to call to bootstrap globally. "/samitiya/app/Resources/views/base.html.twig" file is a file that can be callable in every view file. And another this i don't want to mess "base.html.twig" file. So I create two separate files called
"/src/Acme/DemoBundle/Resources/views/Template/css.html.twig" and
"/src/Acme/DemoBundle/Resources/views/Template/js.html.twig".

then include them into the "base.html.twig". before include them we need to set "AcmeDemoBundle" as a asset. Open the
"/<project folder>/app/config/config.yml" file and find the
"# Assetic Configuration", then include the "AcmeDemoBundle" in to "bundles" list. this is how it looks like.

assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [AcmeDemoBundle]
    #java: /usr/bin/java
    filters:
        cssrewrite: ~
        #closure:
        #    jar: %kernel.root_dir%/Resources/java/compiler.jar
        #yui_css:
        #    jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar

Ok, lets include above file into "base.html.twig". Open the base.html.twig file, include fallowing lines to the <head></head> tags.

        {% include 'AcmeDemoBundle:Template:js.html.twig' %}
        {% include 'AcmeDemoBundle:Template:css.html.twig' %}

this is twig, If you want to include something we want to use {%include %} tag.
when we call for the bundle then it will automatically look at the its "Resources/views/" folder. we user ":" instead of "/" for separate directories.

Now we can include js files to "Template:js.html.twig" and css files to "Template:css.html.twig". Open the
"/src/Acme/DemoBundle/Resources/views/Template/js.html.twig" include the fallowing content

{% javascripts
    '@AcmeDemoBundle/Resources/public/js/jquery-2.0.1.min.js'
    '@AcmeDemoBundle/Resources/public/css/bootstrap/js/bootstrap.min.js'
    '@AcmeDemoBundle/Resources/public/css/bootstrap/js/bootstrap-dropdown.js'

%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

yes, this is not like twig include this require full path and start the bundle name with "@" sign. "bootstrap" require "jquery". So i have load first. "bootstrap-dropdown.js" wants to create drop downs. thats why i have these two files.
then open the css.html.twig file include fallowing content.

{% stylesheets
    '@AcmeDemoBundle/Resources/public/css/bootstrap/css/bootstrap.min.css'
    '@AcmeDemoBundle/Resources/public/css/bootstrap/css/bootstrap-responsive.css'

filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

thats it. to check inclusion reload any web page in the browser(firefox) and view the page source. above five files must be shown in the <head> tags and click on the the file links. they must load the appreciate js and css files.

kanaslab

Pages

Sunday, May 26, 2013

Including javascript and css in Symfony2

No comments:

Post a Comment

About Me