I am working with symfony 2.5 and while including the css and js files although they seem to work but when i check the source in browser i see multiple css and js files being included where as i only included them once. This is what my header.html.twig looks like
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
{% block stylesheets %}
{% stylesheets '#DefaultBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
<link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
{% endstylesheets %}
{% endblock %}
{% block topjavascripts %}
{% javascripts '#DefaultBundle/Resources/public/js/*' %}
<script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
<script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
{% endblock %}
<body>
Here is the source i see in browser and you will notice each css and js file has been mentioned over 5 times.
I tried removing the #DefaultBundle/Resources/public/css/* from {% stylesheets '#DefaultBundle/Resources/public/css/*' %} but doing that removes all the style
What am i doing wrong?
Try this:
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
<link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
<link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
<script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
<script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
</head>
{% endblock %}
<body>
Or, if you don't want to call each file explicitly, try this:
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
{% block stylesheets %}
{% stylesheets 'bundles/default/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
{% block topjavascripts %}
{% javascripts '#DefaultBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
{% endblock %}
<body>
this is pretty funny
{% stylesheets '#DefaultBundle/Resources/public/css/*' %}
using that you're telling the template engine to iterate all the css in the assets directory, and adding all the <link/> to them, that's why they repeat times the assets
As per documentation:
(http://symfony.com/doc/current/book/templating.html#including-stylesheets-and-javascripts-in-twig)
You can also include assets located in your bundles' Resources/public folder. You will need to run the php app/console assets:install target [--symlink] command, which moves (or symlinks) files into the correct location. (target is by default "web").
http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-javascript-files
To include JavaScript files, use the javascripts tag in any template:
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Including CSS Stylesheets:
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Notice that in the original example that included JavaScript files, you referred to the files using a path like #AppBundle/Resources/public/file.js, but that in this example, you referred to the CSS files using their actual, publicly-accessible path: bundles/app/css. You can use either, except that there is a known issue that causes the cssrewrite filter to fail when using the #AppBundle syntax for CSS Stylesheets.
Related
I'm trying to edit my app.scss on my Symfony 4 project.
But the background-color doesn't work.
body {
background-color: #ccccff;
}
On my base.html.twig, I've this :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/app.scss" rel="stylesheet">
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" rel="stylesheet"> {% block stylesheets %}{% endblock %}
</head>
<body>
{% include "components/sidebar/sidebarHeader.html.twig" %}
<div class="col-md-12"> {% block body %}{% endblock %}
</div>
{% include "components/sidebar/sidebarFooter.html.twig" %}
{# TODO: Trouver un moyen d'insérer <script src="/js/jquery.min.js"></script> au lieu du footer sidebar #}
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
The only solution that is working is to edit directly the bootstrap.min.css.
However, if I edit my app.scss, if it is after my bootstrap.min.css on the base.html.twig, why it doesn't work ?
Thanks for your help !
You have this in your code example...
<link href="/css/app.scss" rel="stylesheet">
However, a browser doesn't know what to do with it, since it's pre-compiled css. You need to replace that line with:
<link href="/css/app.css" rel="stylesheet">
And actually compile the scss file using Sass. Make sure the compiled css file is in the same location as the Sass file, or you'll need to change the path.
On my symfony 3.2 project I am using the FOSUserBundle for User Registration and authentication. What I am trying to do is to apply a custom theme to the registration form.
Therefore I have made the app/Resources/views/base.html.twig that is my application's base template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" ></link>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% block javascriptsHeader %}
{% endblock %}
</head>
<body class="{{ classes }}">
{% block body %}
{% endblock body %}
{% block javascriptsFooter %}
{% endblock javascriptsFooter %}
</body>
</html>
I have also changed Resources/FOSUSerBundle/views/layout.html.twig with the following content:
{% extends AppBundle::base.html.twig %}
{% body %}
{% block fos_user_content %}
{% endblock fos_user_content %}
{% endblock body %}
As seen on:
* Symfony2: How to extend a Bundle?
* http://symfony.com/doc/current/bundles/FOSUserBundle/overriding_templates.html
But I get the following error:
Unexpected token "punctuation" of value ":" ("end of statement block" expected).
Do you have any idea how to use my default template as registration from template?
You have the wrong string in extends. Change
{% extends AppBundle::base.html.twig %}
to
{% extends '::base.html.twig' %}
and it should work.
NOTE: Using ::base.html means that the template engine will look for base.html in app/Resources/views/base.html.twig. Setting AppBundle::base.html.twig is wrong. If the template was located in a bundle (i.e. AppBundle - src/AppBundle), then the path would look something like
#AppBundle/base.html.twig.
I have a Symfony2 app that must serve different themes. These themes are essentially directories containing CSS files (eventually other files and minified into a single one).
In Phalcon, I could dynamically set the asset location of my assets in the controller. In Symfony, assets are explicitly defined. My current solution is as follows, but it doesn't look great. This is the HTML of my base.html.twig. I have a property theme in my entity and I define the theme object in my controller.
Basically I'm looking for the proper way to do this in Symfony. Otherwise, I'll just do it like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% if theme is defined %}
{% for asset in theme.css %}
<link rel="stylesheet" href="{{ asset.url }}"/>
{% endfor %}
{% endif %}
</head>
<body>
{% block page %}
Welcome to the default page!
{% endblock %}
{% block javascripts %}
{% if theme is defined %}
{% for asset in theme.js %}
<script src="{{ asset.url }}"></script>
{% endfor %}
{% endif %}
{% endblock %}
</body>
</html>
I think the most elegant way is to define a default theme, and put the diffrent themes into a root folder, just like this:
themes/
default/
css|js|images...
blue/
css|js|images...
yellow/
css|js|images...
then in Twig template engine, you can use it like this way:
<link rel="stylesheet" href="themes/{{ theme_name|default("default") }}/css/app.css"/>
<script src="themes/{{ theme_name|default("default") }}/js/app.js">
I have some pages in my Symfony project that needs some specific css, in general I have a general css file for font and such, but on every page I have a table that needs different formatting.
I know I can use classes for this, but it is more convenient that I just use a different css file for these pages.
Now I am using this in my twig template file:
{%block stylesheets %}
{%endblock%}
But is there a way to include a css file? I have this in my main template file:
<head>
<meta charset="utf-8">
<title>Sign in · Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="{{asset('bundles/loginlogin/css/socproGame.css')}}" rel="stylesheet">
{%block stylesheets %}
{%endblock%}
</head>
And if I do it like this it won't work:
{%block stylesheets %}
<link href="{{asset('bundles/loginlogin/css/specificPage.css')}}" rel="stylesheet">
{%endblock%}
Your main template should look like this
{% block stylesheets %}
{% stylesheets
'bundles/loginlogin/css/socproGame.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
And your twig which extends the main:
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'bundles/loginlogin/css/specificPage.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
I would like to generate a pdf from an html.twig template but something wrong...
In fact, the PDF has been create with the good content but there is no layout. It's seems the CSS files are not import...
I use Bootstrap from twitter to manage the layout.
Here the part of my controller
$filename = "CI-TRI-".$Chrono->getChrono();
$this->get('knp_snappy.pdf')->generateFromHtml(
$this->renderView('WebStoreMainBundle:Admin:customInvoiceTemplate.html.twig', array('User'=>$User,'Parts'=>$parts, 'device'=>$device, 'rate'=>$rate)),
__DIR__.'/../../../../web/download/'.$filename.'.pdf'
);
And here my layout :
<html>
<head>
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/customInvoice.css') }}">
<base href="http://{{app.request.host}}">
<meta charset="UTF-8" >
{% endblock %}
</head>
<body>
{% block header %}
<div class="span2">
<img src="{{ asset('bootstrap/img/GTO_logo.png') }}">
</div>
{% endblock %}
{% block content %}
{% endblock %}
</body>
Wish someone can help me..
PS: Sorry for the typos, english is not my native language.
It would be easier to supply absolute parameter like that:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css', absolute=true) }}">
The assets must be linked using absolute paths. So instead of:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
It should be:
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/bootstrap/css/bootstrap.css">
I had this issue myself and this sorted it out for me.
Take note when using Symfony 2.7, Twig has removed absolute argument for asset() function.
<link rel="stylesheet" type="text/css" href="{{ absolute_url(asset('bootstrap/css/bootstrap.css')) }}">
See New in Symfony 2.7: the new Asset component for more info.
#user1805558's answer worked for me. I was also using Less, and used this, which some may find helpful to see:
{% block stylesheets %}
{% stylesheets filter='lessphp' combine=true output='css/pdf.css.twig'
'../app/Resources/assets/css/pdf.less'
%}
<link rel="stylesheet" type="text/css" href="{{ asset(asset_url, absolute=true) }}"/>
{% endstylesheets %}
{% endblock %}
UP for absolute option in asset call :
<img src="{{ asset('/assets/img/AVNZ-Logo-H-SMALL.jpg', absolute=true) }}">
It's related in official bundle repo :
https://github.com/KnpLabs/KnpSnappyBundle/issues/78
I had the same problem. As commented in this issue your asset URLs need to be absolute.
This can be accomplished in symfony using the asset twig funtion and "package urls":
http://symfony.com/doc/current/reference/configuration/framework.html#assets-base-urls
For example:
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.css') }}">
And then, in your app/config/config.yml
framework:
# ...
templating:
assets_base_urls:
http:
- "http://yourdomain.com/"
If you are in your local configuration, inside your config_dev.yml you should use a different URL instead, like:
- "http://localhost/myproject/web/"