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/"
Related
Hello Guys I'm new to symfony and twig and what i'm trying to achiv is this:
In my base.html.twig file I try to include('article.html.twig') all works fine until I try to override(extend) the stylesheets block that resides in base.html.twig from article.html.twig.
I get an error message that this can only be achived if I extend base.html.twig (I know it works like that but its not what I want)
I want in fact to attach to article.html.twig the css and the javascript related to the html in this template and that they only get linked (loaded by the browser) in the section of the page whenever I include the template in any other template. It should work like a standalone component (webpart) or whatever this is called.
Do any of you know if such a thing is possible?
Thanks in advance.
Here is the base.html.twig:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
{% block stylesheets %}
<link rel="stylesheet" type="text/css" media="all" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
<p>Test include:</p>
{{ include('article.html.twig') }}
</body>
Here is the article.html.twig
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" type="text/css" media="all" href="{{ asset('custom.css') }}" />
{% endblock %}
<div id="article">
This is an Article!
</div>
Sorry, I just read your question again, and now I fully understand what you are trying to achieve.
Unfortunately it is not possible to override a block from within an include. It's exactly like the error message already states... It is only possible to override a block if you extend the original template.
I finally just got my Symfony2 app to work in Heroku except that it's not getting any CSS or JS. Does anyone know what the problem might be?
Including <head> code from the base.twig.html
<head>
<meta charset="UTF-8" />
<title>{% block title %}Machine{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/bmatznerfoundation/css/foundation.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/project/css/main.css') }}">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="{{ asset('bundles/project/js/jquery-1.11.2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/project/js/script.js') }}"></script>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('bundles/project/favicon.ico') }}">
</head>
I noticed that it seems to be using Symfony2 favicon and such. So it might be using the wrong directory somehow, or bundle, for the "web" view of things.
it's
Root >
Web >
bundles >
bmatznerfoundation > ...
framework > (original symfony junk)
project > (THE FILES I WANT)
.htaccess
app.php
app_dev.php
apple-touch-icon.png
config.php
favicon.ico (a Symfony icon)
robots.txt
Haha, this is silly, in my .gitignore file, /web/bundles was there. I simply removed it, re-committed, then everything worked great!
I include font awesome CSS in Symfony twig file.
{% stylesheets
"#AppBundle/public/admin/bower_components/bootstrap/dist/css/bootstrap.min.css"
"#AppBundle/public/admin/bower_components/metisMenu/dist/metisMenu.min.css"
"#AppBundle/public/admin/dist/css/sb-admin-2.css"
"#AppBundle/public/admin/bower_components/font-awesome/css/font-awesome.min.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
It applies in this page. I check this, but icon class is not applied with the font. Please give me solution. Thanks in advance.
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 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.