Im new to Symfony2 and Twig, I want to adapt an admin template to Twig and include in my Symfony2 Project as a bundle.
I create a bundle just for the assets and the templates and partials.
I solved many problems after get it working, but now I don't understand why assetic is not generating well the files.
I have the next folders inside src/Name/Bundle/Resources:
The idea is to define the default layout, partials that you can include in future layouts, and generate different layouts extending default.html.twig and embedding assets like css or js for specific type of pages.
default.html.twig
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
{% block head %}{% endblock %}
</head>
<body>
{% block header %}{% endblock %}
{% block sidebar %}
{#{{ include('NameBundle:Partials:sidebar.html.twig') }}#}
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
head.html.twig
<meta charset="utf-8"/>
<title>{% block title %}Admin Dashboard Template{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
{% block stylesheets %}
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'@NameBundle/Resources/public/global/plugins/font-awesome/css/font-awesome.min.css'
'@NameBundle/Resources/public/global/plugins/simple-line-icons/simple-line-icons.min.css'
'@NameBundle/Resources/public/global/plugins/bootstrap/css/bootstrap.min.css'
'@NameBundle/Resources/public/global/plugins/uniform/css/uniform.default.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
{% endstylesheets %}
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
{% block page_level_plugin_stylesheets %}{% endblock %}
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN PAGE STYLES -->
{% block page_stylesheets %}{% endblock %}
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
{% stylesheets
'@NameBundle/Resources/public/global/css/components.css'
'@NameBundle/Resources/public/global/css/plugins.css'
'@NameBundle/Resources/public/admin/layout/css/layout.css'
'@NameBundle/Resources/public/admin/layout/css/themes/default.css'
'@NameBundle/Resources/public/admin/layout/css/custom.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
{% endstylesheets %}
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
{% endblock %}
I have that 2 static fields, and now I want to generate the login template, extending default template and adding some assets to the head:
login.html.twig
{% extends 'NameBundle:Default:metronic.html.twig' %}
{% block head %}
{% embed 'NameBundle:Partials:head.html.twig' %}
{% block page_stylesheets %}
{% stylesheets
'@NameBundle/Resources/public/global/plugins/select2/select2.css'
'@NameBundle/Resources/public/admin/pages/css/login.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
{% endstylesheets %}
{% endblock %}
{% endembed %}
{{ parent() }}
{% endblock %}
config_dev.yml
assetic:
use_controller: false
bundles: [ D2ArmoryMetronicBundle ]
Also I used:
php app/console assetic:dump --watch
php app/console cache:clear
The result of that code in my browser is:
<head>
<meta charset="utf-8">
<title>Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="/css/05f94b6_font-awesome.min_1.css" rel="stylesheet" type="text/css">
<link href="/css/05f94b6_simple-line-icons.min_2.css" rel="stylesheet" type="text/css">
<link href="/css/05f94b6_bootstrap.min_3.css" rel="stylesheet" type="text/css">
<link href="/css/05f94b6_uniform.default_4.css" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN PAGE STYLES -->
<link href="/css/bf1faf2_select2_1.css" rel="stylesheet" type="text/css">
<link href="/css/bf1faf2_login_2.css" rel="stylesheet" type="text/css">
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="/css/ed78c26_components_1.css" rel="stylesheet" type="text/css">
<link href="/css/ed78c26_plugins_2.css" rel="stylesheet" type="text/css">
<link href="/css/ed78c26_layout_3.css" rel="stylesheet" type="text/css">
<link href="/css/ed78c26_default_4.css" rel="stylesheet" type="text/css">
<link href="/css/ed78c26_custom_5.css" rel="stylesheet" type="text/css">
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico">
</head>
How the controller is on false value I can see the files created at /web/css.
In that head code you can find 3 prefix to the assets:
05f94b6_ // Files included in head.html.twig GENERATED
bf1faf2_ // Files included in the login.html.twig embed code NOT GENERATED
ed78c26_ // Files included in head.html.twig GENERATED
I don't know if I forgive something or I misunderstand something of the workflow.
Thanks in advance and sorry for my English, I try to give my best.