How to add stylesheets by twig template in Symfony - php

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' %}

Related

Symfony get Asset Name in Assetic output

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.

where to put CSS/JS files for FOSbundle Template overriding?

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).

symfony multilanguage templates

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' %}

Symfony Assetic Merge all files in one

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 %}

Symfony2 Append javascript flles from a form type template

I am creating an image cropper as new form type in Symfony2 using the jQuery plugin imgAreaSelect (website). In my form type template (imagecropper_widget.html.twig) I load jQuery and the plugins library.
As jQuery is loaded as well in my base.html.twig, the functions in the plugin library don't work anymore. Firebug throws an "is not a function" error.
If I remove in my base.html.twig the jQuery then it works well but of course that is not a solution.
It would be great if there would be a way to append the javascript files I need in that moment to the javascripts block. I tried to override the javascripts block from my theme but Symfony throws an error because I don't use or extend from another template.
So is there a legit way to append javascript files to a block that exists in the base.html.twig page?
Javascript block in base.html.twig:
{% block javascripts %}
{% javascripts '#jquery_js' '#bootstrap_js' filter='?yui_js' combine=true %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
imagecropper_widget.html.twig
{% block imagecropper_widget %}
{% spaceless %}
<h2>Select the area</h2>
<img src="http://localhost/project/web/test.jpg" id="imgc" style="width:100%" />
{% block javascripts %}
{% javascripts
'#jquery_js'
'bundles/imanagecmsfield/js/jquery.imgareaselect.js'
'bundles/imanagecmsfield/js/process.js'
filter="?yui_js"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% endspaceless %}
{% endblock %}
Thank you for your help!
I usually do not put in the base template the scripts and css files within the javascript block. The Javascript block is usually empty and at the bottom of the base template.
base.html.twig:
{% javascripts 'XXX' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}
This way, nothing will be overridden if I add site-specific scripts
otherside.html.twig:
{% block javascripts %}
{% javascripts %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
<script type="text/javascript">
;
</script>
{% endblock %}
If you don't mind having multiple script tags ( and thus losing combining all assets ), you could simply overwrite the javascripts block and render the parent like so:
{% block javascripts %}
{{ parent() }}
{% javascripts
'#AcmeDemoBundle/Resources/public/js/*.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Otherwise you'll need to do some more work as described here https://symfonybricks.com/en/brick/smart-use-of-assetic-to-compress-javascripts-and-stylesheets , to make it truly configurable.
Which in combination with an event listener that actually adds your javascripts to the configuration array, should provide a more configurable solution I'd guess :-).

Categories