In Symfony2 I have a number of standard JavaScript files I include and compress into one file using the Twig YUI filter like so:
{% javascripts
'#WebIlluminationShopBundle/Resources/public/js/jquery.js'
'#WebIlluminationShopBundle/Resources/public/js/ui.js'
'#WebIlluminationShopBundle/Resources/public/js/tools.js'
'#WebIlluminationShopBundle/Resources/public/js/overlay.js'
'#WebIlluminationShopBundle/Resources/public/js/uniform.js'
'#WebIlluminationShopBundle/Resources/public/js/slider.js'
'#WebIlluminationShopBundle/Resources/public/js/global.js'
output='js/shop-compressed.js' filter='yui_js' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
Within my Twig templates I then include specific JavaScript Twig files, which have data passed to them as variables from the controller:
{% include 'SomeCompanySomeBundle:ControllerName:testScript.js.twig' with {'variable1': variable1, 'variable2': variable2} %}
Is there a way to compress this JavaScript like I would the main JavaScript files I use using the YUI filter?
It may not be possible, but just wondered if someone new for sure.
Twig generated JS files needs to be refreshed with Twig context on each request, son it's not possible !
Related
Im trying to include tinymce 4.5.5 to my Symfony project using Assetic
{% block javascripts %}
{% javascripts '#MyAmazingBundle/Resources/public/js/jquery.min.js'
...
'#MyAmazingBundle/Resources/public/js/tinymce.min.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
I downloaded TinyMCE Community and copied file tinymce.min.js to my Resources. I have got error:
TypeError: u is not a constructor
I researched that u is Theme so i tested some things and changed include by adding whole tinemce directory to resources + new declaration:
#MyAmazingBundle/Resources/public/js/tinymce/tinymce.min.js
I think Assetic breaking it because I tryied to include tinymce file from cloud and it worked but when i downloaded code from cloud and icluded from resources it was again broken in other way (not visible etc - something not worked)
I also tested some other ways to include it but nothing worked...
What is the correct way to add tinymce to symfony project/bundle and include to template?
// EDIT
I tryied include it by asset function and it worked so probably assetic breaking it by making copy of this file but anyway how to fix it?
<script src="{{ asset('bundles/myamazing/js/tinymce/tinymce.min.js') }}"></script>
Is it possible to use multiple assetic dump filters for css assets. I want to achieve "cssuglify" filter followed by "cssrewrite" filter. As of now I tried to figure it out so far only found that we can apply only one filter at a time, otherwise write your own asset management scripts. Any help or clue would be great.
Thanks
You can use the filter attribute more than once inside {% stylesheets %}:
{% stylesheets filter='cssuglify' filter='cssrewrite'
......
......
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% end stylesheets %}
I just run on Gassetics, seems to be the next gen of SF assets management. So far I used Assetics.
One question though : with Assetics I used to split files in order to load only needed one, using Twig parent() method :
{% block scripts %}
{{ parent() }}
{% javascripts
'#LCHAdminBundle/Resources/public/js/jquery.specific.addition.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock scripts %}
SO I could add on a specific page, only script needed and so was "forced" (in the noble way) to think and split my twig files accordingly.
Is it possible to do so with Gassetics? I jsut saw that you can specify back-end and front-end files, nothing more.
If I nest Twig files with Gassetic tag, will it do the trick?
EDIT : thanks to Wouter J. comment, I adjust my question :
In Assetics you explicitely specify files you want to include, giving the nesting ability. As in Gassetics you just add the tag which will be replaced during CSS/JS file generation, how do you achieve the same?
You can do all of this in the gassetic config (see section yaml example with gassetic.yml in https://github.com/romanschejbal/gassetic).
Example gassetic.yml:
js:
files:
common.js:
- assets/vendor/jquery/jquery.js
- assets/vendor/angular/angular.js
page1.js:
- assets/vendor/lchadminbundle/jquery.specific.addition.js
common.html.twig:
{% block scripts %}
<!-- prod:common.js --><!-- endbuild -->
{% endblock scripts %}
page1.html.twig
{% extends 'common.html.twig' %}
{% block scripts %}
{{ parent() }}
<!-- prod:page1.js --><!-- endbuild -->
{% endblock scripts %}
This approach is better than nesting scripts in children templates, since the commonly needed files can be cached between page requests.
I have problem with included files. In my layout.html.twig I have scripts.js at the end body section before {% block script %}{% endblock %}. When file extending layout and use script block, its ok, but when use this block and include file whose use the same block, then is problem. Rendered page has all javascripts, but in different places.
For example:
page.html.twig
...
There is page.html.twig
{% include 'file.html.twig' with {'something': 'something'} %}
After include file.html.twig
..
{% block script %}
<script src="file1.js"></script>
{% endblock %}
file.html.twig
There is file.html.twig
{% block script %}
<script src="file2.js"></script>
{% endblock %}
Then rendered page look like this:
There is page.html.twig
There is file.html.twig
<script src="file2.js"></script>
After include file.html.twig
<script src="file1.js"></script>
I want have all javascript files in one place, one by one.
I think you should try to 'embed' instead of 'include'.
http://twig.sensiolabs.org/doc/tags/embed.html
With embedded, you can choose blocks to include.
Ps : If you override a block, you can get the parent block content in using parent() :
{% block script %}
{{ parent() }}
{% endblock script %}
The {% block %} tag and the inheritance system work only with layouts and {% extends %}. It is not meant to be used with includes, so the script block in your included file.html.twig does not merge with page.html.twig.
One solution would be to set a an argument to you included file.
file.html.twig
{% if get == 'content' %}
There is file.html.twig
{% endif %}
{% if get == 'script' %}
<script src="file2.js"></script>
{% endif %}
page.html.twig
...
There is page.html.twig
{% include 'file.html.twig' with {'something': 'something', 'get': 'content'} %}
After include file.html.twig
..
{% block script %}
<script src="file1.js"></script>
{% include 'file.html.twig' with {'something': 'something', 'get': 'script'} %}
{% endblock %}
You will need to conform to a standard practice when dealing with included templates and inheritance (you can invent your own standard).
Try to compartmentalize your includes, I usually have a directory called 'partials' for includes, and 'fragments' for renders. Each one belonging to a single collection of controller views.
One way I dealt with a similar problem to what you are having was to use a base template which covered the requirements of a specific set of views, each view template would extend it. It may be somewhat wasteful to include the javascripts and stylesheets for the entire collection of views for a specific controller, but it is a) more efficient that including all assets everywhere and, b) I manage the view specific assets under a single base template.
So long as the views have a dependency on that base template the structure wouldn't break.
Think of Twig templates as PHP classes (they compile to classes anyway). A class can inherit from one chain of parents. What you are trying to do is treat two sub-classes as a single child of a super class, overriding the same method at the same time. Simply can't be done. An include is closer to a child property, with is own rules and properties. The included template is less dependent on the includer than vice-versa, so it is impossible for it to inherit from it conventionally.
I'm including CSS stylesheets in my template like so:
{% stylesheets
"#SomeBundle/Resources/assets/css/default.css.twig"
"#SomeBundle/Resources/assets/css/global.css.twig"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However I want to run these CSS files through Twig, is this in any way possible while using the {% stylesheets %} tag or does this require some other approach. I've already tried enabling a twig filter but that does not exist.
You could do it if you load the css as an internal stylesheet. Something like this:
{% block stylesheets %}
{{ parent() }}
{% include 'AcmeBundle:Bundle:mycss.css.twig' %}
{% endblock %}
And then the mycss.css.twig template would contain:
<style type="text/css">
/* */
</style>
Most common things you'd want to do by processing CSS with Twig should be possible with Sass, LESS or similar, which can be applied as Assetic filters. First tutorial Google threw up was this one: http://alexandre-salome.fr/blog/Sass-Compass-Assetic-In-Ten-Minutes
Admittedly, that doesn't look like much help if you're unable to run Ruby/Node.js/whatever on the production server you're developing for, but it should be possible to create an Assetic filter based on one of the PHP ports of Sass/LESS (assuming they're any good) if that's the case.