I have the following structure for the css files
Public
- css
-- fr
--- style.css
-- en
--- style.css
the css folder include fr and en folders
and I'm including CSS stylesheets in my template like so:
{% stylesheets '#AtgNewsBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
so i need to include the fr or en folder as user selection
i tried the following but does not work
{% stylesheets '#AtgNewsBundle/Resources/public/css/{app.request.getLocale()}/*' filter='cssrewrite' %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/{{app.request.getLocale()}}/*' filter='cssrewrite' %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/"{{app.request.getLocale()}}"/*' filter='cssrewrite' %}
any help please
You can do it this way:
{% if app.request.locale=="fr" %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/fr/*' filter='cssrewrite' %}
{% elseif app.request.locale=="en" %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/en/*' filter='cssrewrite' %}
{% endif %}
You should use the right concatenate operator:
{% stylesheets '#AtgNewsBundle/Resources/public/css/' ~ app.request.getLocale() ~ '/*' filter='cssrewrite' %}
If you prefer to do string interpolation (less readable IMHO), you should use:
{% stylesheets '#AtgNewsBundle/Resources/public/css/#{app.request.getLocale()}/*' filter='cssrewrite' %}
Related
I generate my file with code like this:
{% block head_stylesheets %}
{% stylesheets
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
It dumps a file named like this: c543k540_myfile_1.css
This file is composed of the asset name followed by the filename: {assetName}_{filename}.css
How can I customize the output in keeping the asset name in the output?
{% block head_stylesheets %}
{% stylesheets
output="css/mynewfilename.{assetName}.css" // <--- Here
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
Update to clarify
I know that if I use the name option, in prod it will compile to myouputname.css but what I would like to have in debug/dev environment is following the bellow code something like myfile_myouputname_1.css
{% block head_stylesheets %}
{% stylesheets
name="myouputname" // <--- Here
filter='?uglifycss'
'#MyBundle/Resources/public/less/myfile.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_stylesheets %}
Thanks for your reply.
Using Assetic to manage web assets in Symfony applications is no longer recommended. Instead, use Webpack Encore.
https://symfony.com/doc/current/frontend/assetic/index.html#dumping-asset-files
Page-Specific JavaScript or CSS (Multiple Entries) is described here:
https://symfony.com/doc/current/frontend/encore/simple-example.html#multiple-javascript-entries
// webpack.config.js
Encore
// ... general CSS file here...
.addStyleEntry('some_page', './assets/css/assetName.css')
;
Using addStyleEntry() is supported, but not recommended. A better option is to follow the pattern above: use addEntry() to point to a JavaScript file, then require the CSS needed from inside of that.
I am very beginner in symfony and using symfony 2.8.
I have use FOS bundle for login and registration.
I want to use bootstrap template for login and registration.
1) I have put layout.html.twig file in app/Resources/FOSUserBundle/views directory
2) I have also put
{% block fos_user_content %}{% endblock fos_user_content %}
block in my layout.html.twig file
3) and put my CSS/JS files in following directory
web/bundles/FOSUserBundle/public/css
web/bundles/FOSUserBundle/public/js
4) and use above css & js file in my layout.html.twig file as below
{% block stylesheets %}
<link href="{{ asset('FOSUserBundle/public/js/jquery-2.2.3.min.js') }}" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('FOSUserBundle/public/js/bootstrap.min.js') }}"></script>
{% endblock %}
but i am not able to see bootstrap layout in registration form.
override FOSUserBundle layout by adding the file layout.html.twig in app/Resources/FOSUserBundle/views
Extends this layout from your base layout. Eg.
{% extends 'myapp_base.html.twig' %}
{% block content %}
{% block fos_user_content %}{% endblock %}
{% endblock %}
In your myapp_base.html.twig add bootstrap files
{% block stylesheets %}
<link href="{{ asset('assets/css/bootstrap.css') }}" rel="stylesheet" />
{% endblock %}
{% block content %}{% endblock %}
{% block javascripts %}
<script src="{{ asset('assets/js/bootstrap.js') }}"></script>
{% endblock %}
Don't put bootstrap files in web/bundles folder as those files are copied from bundles public folder (assets:install command).
Instead you can put theme in /web/assets/js and /web/assets/css folder (for a manually installation).
I followed this tutorial to add sass support in symfony:
https://alexandre.salome.fr/blog/sass-compass-assetic-in-ten-minutes
So far, I have a stylesheets.html.twig with this content:
{% stylesheets filter="sass"
"css/main.scss"
"css/details.scss"
"css/talk.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
that works fine, but how do I add more stylesheets when a specific *.html.twig is used? I guess I cant use blocks when using the filter function like this above.
For Synfony2 it should look like:
{% block css %}
{% stylesheets output='css/compiled/index.css'
'#MainBundle/Resources/css/editable.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
ok dimitrio, your answer directed me to the solution
first problem was, that the stylesheets.html.twig was included, and therefor I couldnt access and overide the block inside it, so I replaced it by use:
#base.html.twig
{% use "::stylesheets.html.twig" %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
and inside the stylesheets.html.twig
#stylehseets.html.twig
{% block stylesheets %}
{% stylesheets filter="sass"
"css/main.scss"
"css/basic.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Inside my specific twig I had to add content to the block
{% block stylesheets %}
{{ parent() }}
{% stylesheets filter="sass"
"css/specific/show.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
It works nice, but isn't there a solution that is shorter for the specific twig? Iam looking for something like
{% addstylesheet 'css/specific/show.scss' %}
Is there any ways, to merge all *.css files for example, from many layouts in one, using native Symfony Assitic Manager.
Example:
**base.html.twig**
{% block stylesheets %}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/bootstrap/css/bootstrap.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
**index.html.twig extends base.html.twig**
{% block stylesheets %}
{{ parent() }}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/main.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
In prod env this example gives me two files, but i want one meged?
I don't think Assetic does what you are wanting it to do.
I think the easiest way to get those into the one file would be to just include the parent file in your stylesheets list and override the parent block like..
**index.html.twig extends base.html.twig**
{% block stylesheets %}
{% stylesheets filter='cssrewrite,uglifycss' output='css/compiled/main.css'
'bundles/sscore/bootstrap/css/bootstrap.css'
'bundles/sscore/main.css'
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
you can use scssphp , but you will need to install (scssphp) for that.
{% stylesheets filter="scssphp" output="styles/css/default_g.css"
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"
"styles/css/myfileone.css"
"styles/css/myfileone2.css"
"styles/css/main.css"
"styles/css/myfile.css"
%}
<link rel="stylesheet" href="{{ asset('styles/css/default_g.css') }}" />
{% endstylesheets %}
I want to embed different Stylesheet files with assetic in a twig template of a Symfony2 project. The used stylesheet depends on the theme setting of the user.
I used
{% stylesheets
'#CuteFlowCoreBundle/Resources/public/css/application.css'
'#CuteFlowCoreBundle/Resources/public/css/theme/'~app.session.get('cuteflow_theme')~'/application.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
But this throws an error:
Unexpected token "operator" of value "~" in "CoreBundle::layout.html.twig"
I tried the following too. But this didn't help either.
{% set theme = '#CuteFlowCoreBundle/Resources/public/css/theme/'~app.session.get('cuteflow_theme')~'/application.css' %}
{% stylesheets
'#CuteFlowCoreBundle/Resources/public/css/application.css'
theme
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
Any ideas how this can be done?
The answer is simple : you cannot do it.
Assetic will iterate your templates and generate every files from {% stylesheets %} blocks.
If you use a variable (session for example), Assetic cannot "guess" all possible values.
You have 2 possibilities :
Separate 2 CSS calls (1 for common call, 1 for dedicated theme CSS) - makes more sense to me
Create 1 CSS per theme
Separate 2 CSS calls
{% stylesheets "A.css" "B.css" %} ... {% endstylesheets %}
<link rel="stylesheet" href="{{ asset("css/" ~ theme ~ ".css") }}" />
Create 1 CSS per theme
If you want to create one theme for each available theme, for keeping it simple, you have to do it manually :
{% if theme == "XXX" %}
{%stylesheets "A.css" "XXX.css" %} ... {% endstylesheets %}
{% elseif theme == "YYY" %}
{%stylesheets "A.css" "YYY.css" %} ... {% endstylesheets %}
{% endif %}