I’m new to a project using Twig js. I’ve been playing around with a template trying to get it to work but with no luck.
Is there anyway of writing.
If url contains ‘batch-‘ then load these 2 CSS files, else load this 1 CSS file?
Any help is greatly appreciated,
Thanks in advance
In order to do that you'll have to pass the url that you want to check to the template and then you'll be able to add the following:
{% if 'batch-' in url %}
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
{% else %}
<link rel="stylesheet" href="style1.css">
{% endif %}
Is there a way I can use the {% load staticfiles %} to load CSS files in django?
Variations of this don't work and this is obviously wrong:
<css src="{% static "/css/bootstrap/bootstrap.min.css" %}" rel="stylesheet">
Whats the proper way to load css files using this django tag?
EDIT
Here was my actual solution:
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap/bootstrap.min.css' %}" />
Remove the leading / slash from the {% static %} tag argument:
{% static "css/bootstrap/bootstrap.min.css" %}
I'm using KnPUniversity's video tutorial on Getting Started with Symfony2, and everthing's been going good except the video is teaching based off of version 2.0.3 and I am using 2.1.x-dev. When I get to a certain point in the video, it directs me to write code block #1 then modify it to more efficiently use code block #2, except code block #2 doesn't work. It doesn't throw any errors, it just fails to actually detect the stylesheets. In the source code of the page, there are zero references to any css style sheets using code block #2. Any idea what I'm doing wrong?
{# this causes the page to be styled and works fine #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/event/css/event.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/events.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/main.css') }}">
{% endblock %}
.
{# this causes the page to be unstyled. Missing stylesheet links in page source #}
{% block stylesheets %}
{% stylesheets
'bundes/event/css/*'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Well, I had a typo. It's not "bundes" it's "bundles". Problem solved and I'm an idiot.
When you use {{ asset() }} it creates a link to your web (public) directory.
But for the second part Assetic manages the css files - so it looks for the file inside your application and then writes it out into your web directory.
To fix your problem you can change your stylesheets like this:
{% stylesheets
'%kernel.root_dir%/../web/bundes/event/css/*'
filter='cssrewrite'
%}
But I suggest reading more about assetic to understand how you should be managing your css files Symfony 2 Assetic
I'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
So my question is basically, how the hell do I include simple CSS file inside Twig template?
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
This created a new folder
/web/bundles/webshome/...
this is just linking to the
src/Webs/HomeController/Resources/public/
right?
Questions
Where do you place your asset files, JS, CSS, and images? Is it OK to put them in Bundle/Resources/public folder? Is that the right location for them?
How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
Should I configure something else?
You are doing everything right, except passing your bundle path to asset() function.
According to documentation - in your example this should look like below:
{{ asset('bundles/webshome/css/main.css') }}
Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):
app/console assets:install web --symlink
Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
And you can use %stylesheets% (assetic feature) tag:
{% stylesheets
"#MainBundle/Resources/public/colorbox/colorbox.css"
"%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
You can write path to css as parameter (%parameter_name%).
More about this variant: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.
Scattering your web assets across tens of different bundles makes it
more difficult to manage them. Your designers' lives will be much
easier if all the application assets are in one location.
Templates also benefit from centralizing your assets, because the
links are much more concise[...]
I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.
In case you are using Silex add the Symfony Asset as a dependency:
composer require symfony/asset
Then you may register Asset Service Provider:
$app->register(new Silex\Provider\AssetServiceProvider(), array(
'assets.version' => 'v1',
'assets.version_format' => '%s?version=%s',
'assets.named_packages' => array(
'css' => array(
'version' => 'css2',
'base_path' => __DIR__.'/../public_html/resources/css'
),
'images' => array(
'base_urls' => array(
'https://img.example.com'
)
),
),
));
Then in your Twig template file in head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
</body>
</html>
Has anyone got or know if a printer friendly css file is available for the Django Admin site?
If you want to add in a print CSS stylesheet for the admin, add this to your admin/base_site.html template:
{% block extrastyle %}
{{block.super}}
<link rel="stylesheet" href="/path/to/your/print.css" type="text/css" media="print" charset="utf-8">
{% endblock %}
If you're looking to output the contents of the admin site, I would suggest exporting it as a CSV file first and then printing from spreadsheet software.
I have used this in the past and recommend it: https://django-import-export.readthedocs.org/en/latest/