AsseticBundle gives a possibility to define named assets in the Symfony's configuration file. How can I reference them in Twig templates, with {% javascripts %} and {% stylesheets %} Twig tags?
Symfony's own Assetic documentation mentions only special notation for #BundleName/Resources/file.cs to include bundle assets, but tells nothing about the named assets.
Question Symfony2: How to properly include assets in conjunction with Twig template inheritance? has a short mention in the comments that this is possible, but does not tell how to do it.
Using only the asset's given name (like jquery in the Assetic's own Readme) does not work. Assetic tries to look the file web/jquery that apparently does not exist.
The short version:
Use "#name" in your templates:
The longer version:
If your assetic configuration looks like this :
[config.yml]
assetic:
assets:
bootstrap_css:
inputs:
- %kernel.root_dir%/../web/components/bootstrap/css/bootstrap.css
- %kernel.root_dir%/../web/components/bootstrap/css/bootstrap-theme.css
jquery_ui_css:
....
Now you can use this in your templates, for example in your base.html.twig
<html><head>
...
{% stylesheets output='compiled/main.css'
"#bootstrap_css"
"#jqueryui_css"
...etc
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head></html
This one also defines that all css that is in there should be concatenated into one main.css file in the compiled directory.
Related
I wonder if how could I load an assetic group of assets from inside my controller.
my config.yml:
assetic:
assets:
systemassets:
inputs:
- 'bundles/belkapanel/js/*.js'
- 'bundles/belkapanel/router.js'
Using twig, the solution is very simple:
{% javascripts '#systemassets'%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
it will resolve the path wildcard and generate an single .js file with the content of all files found inside "systemassets".
However, I want to get the generated .js file inside an controller. I know it is possible, but reading the symfony's assetic-bundle I only found AsseticHelper with "javascripts" method, but I don't know how to use it, I think it is used after the packagename and wildcards are resolved.
/** #var DynamicAsseticHelper $asseticDynamic */
$asseticDynamic = $this->get('assetic.helper.dynamic');
$assets = $asseticDynamic->javascripts('systemassets'); // Doesn't work!
I'm looking at AsseticTokenParser, I think it is the solution, am I right? can someone help me find the solution?
This should work:
$assets = $asseticDynamic->javascripts(array('#systemassets'));
See this documentation chapter for more details (check PHP version).
On my eZ publish 5 site I have all my templates in Twig, in the vendor/ezsystems/demobundle/EzSystems/DemoBundle/Resources/views/ subfolders. They are all being used throughout my whole site, no problems there. With one exception: 404 pages. If I go to mysite/nonexistingurl, it gives me a kernel (20) / Error page, with status 404. The template being used for this is the 20.tpl somewhere in eZ publish/symfony, I don't want that, I want to use my own Twig template for this.
How can I achieve this? I added a vendor/ezsystems/demobundle/EzSystems/DemoBundle/Resources/views/Exception/error.html.twig page, but this one is not being called
first add this configuration parameter
parameters:
ezpublish_legacy.default.module_default_layout: 'YourBundle::pagelayout_legacy.html.twig'
you may add it in the parameters.yml file located in path/to/yourezpublishinstall/ezpublish/config, the parameters.yml is usually imported in the config.yml located in the same folder
this would define the twig template located in path/to/yourbundle/Resources/views/pagelayout_legacy.html.twig as the parent template for legacy stack modules templates
inside the pagelayout_legacy.html.twig template, you may use this code
{% extends 'YourBundle::pagelayout.html.twig' %}
{% block content %}
{# module_result variable is received from the legacy controller. #}
{% if module_result.errorCode is defined %}
<h1>{{ module_result.errorMessage }} ({{ module_result.errorCode }})</h1>
{% else %}
{{ module_result.content|raw }}
{% endif %}
{% endblock %}
note in the code, the template extends the pagelayout.html.twig template, that should here define a block named content, the pagelayout.html.twig may usually be the main base layout for your ez publish 5 website
you may modify the pagelayout_legacy.html.twig template to your needs
reference:
http://share.ez.no/forums/developer/overriding-legacy-error-pages-templates
I've a project with backend and frontend.
In the backend I want to add one option to change template
The style is defined on base.html.twig on this line:
<link href="{{ asset('css/themes/default.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
My question is how can I change the style when I load this file.
The template option will be stored on database.
EDIT:
In the moment I'm doing like this: I created an action on default controller to return a new Response with the template defined on DB, then in base.html.twig.
{{ render(controller("AdminPageBundle:Default:getTemplateAdmin")) }}
it works like this, but I don't think is the best way to do this
I hope that I understood the question. I assume that you're looking for a way to 'bind' the correct stylesheet depending on settings from the database, the latter being already solved
Twig provides an OOP like inheritence that you may leverage to make this work.
Here's a solution in three steps :
Step one : write a "theme aware" action. In the controller
...
public function adminAction(){
//get the settings information, this is hardcoded for the sake of esample
//you may as well fetch this from the DB
$themeSettings = array('style'=>'blue');
//render the template and inject the variable
return $this->render('AdminPageBundle:Default:template.html.twig',
array('theme'=>$themeSettings));
}
Step2 : create a base template with the default theme (failsafe)
//let's call it base.html.twig
<!DOCTYPE html>
<html>
<head>
...
{% block stylesheets %}
<link href="{{ asset('css/themes/default.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}
....
</head>
...
Step3 : Override the 'stylesheets' block in the theme-aware template
//template.html.twig:
{# make it a child of base.html.twig #}
{% extends '::base.html.twig' %}
{# override the stylesheets block #}
{% block stylesheets %}
{# include what you already have in the parent template (link to default.css) #}
{{ parent }}
{# add your own theme from the database (using the 'theme' variable from the controller #}
<link href="{{ asset('css/themes/'~ theme.style ~ '.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}
With this example, rendering 'template.html.twig' will load the stylesheet at '/css/themes/blue.css'.
You may as well implement this directly in the base template without relying on inheritence, but I'm assuming that some templates are theme-aware and some aren't. Inheritence provides flexibility to implement this feature only where you need it.
Of course, there are several other ways to solve the problem. Writing a custom twig extension to handle theming would be the right thing to do for a reliable long term solution, especially if theming is not just about loading a stylesheet. You may also write an event handler (for the kernel.view event) to modify the template or inject theme settings just before rendering. This answer shows an example.
In order to override a template for FOSUserBundle, I should create a twig file with the same name conserving the hierarchy. That's fine and it works perfectly.
My problem is that the twig file is not static ( in the desktop version I will render a twig file and in the mobile version we will render another one). I decide which twig to render on the controller by testing on a session variable.
Is there a solution to dynamically change the twig to render in FOSUserBundle without overriding all controllers?
You can test your session variable in twig also. Simply include another template in your twig :
{% if app.session.isMobile %}
{% include '::mobile.html.twig' %}
{% else %}
{% include '::desktop.html.twig' %}
{% endif %}
i want to override a css file i.e reside in sonata-project/admin-bundle/Sonata/AdminBundle/Resources/public/bootstrap/css path of sonata admin bundle project.
Please help me out.
One way you can you override the css files of sonata admin but remember this will override the block of stylesheets but still you can call the stylesheets of parent block by calling {{ parent() }}
{% block stylesheets %}
/* this will override the parent block you can define here your css files*/
<link rel="stylesheet" href="{{ asset('cssfilepath.css') }}"/>
{% endblock %}
{% block stylesheets %}
/*this will extend the parent block */
{{ parent() }}
<link rel="stylesheet" href="{{ asset('cssfilepath.css') }}"/>
{% endblock %}
I used the answer of M Khalid Junaid that is working like a charm. Here some facts I missed while implementing this.
Update your config.yml like this:
sonata_admin:
templates:
list: AppBundle::Admin/list.html.twig
The src/AppBundle/Resources/views/Admin/list.html.twig then can look like this:
{% extends 'SonataAdminBundle:CRUD:base_list.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<style type="text/css">
* {
}
</style>
<!-- and/or -->
<link rel="stylesheet" href="{{ asset('cssfilepath.css') }}"/>
{% endblock %}
It is possible to remove/add stylesheets in Sonata Admin Bundle within configuration file without handling template files:
sonata_admin:
assets:
remove_stylesheets:
- bundles/sonataadmin/css/old.css # path to vendors css-file to remove
extra_stylesheets:
- build/admin/css/new.css # your css-file to add
Considered above options are listed in Sonata Admin Bundle CONFIGURATION in FULL CONFIGURATION OPTIONS section.