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>
Related
Is this possible to use assetic with inheritance ? With the code below I get this error :
An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "_assetic_41351d9" as such route does not exist.
My app layout :
{# app/Resources/views/layout.html.twig
{% block javascripts %}
{% javascripts
'assets/js/jquery-2.2.0.min.js'
'assets/js/main.js'
output='assets/compiled/app.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
My child layout :
{% extends "::layout.html.twig" %}
...
{% block javascripts %}
{{ parent() }}
{% javascripts
'assets/js/jquery.owl.min.js'
output='assets/compiled/page.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Yes you can use inheritance with Twig, and there is nothing inherently wrong with what you are trying to do in your code. I would try completely clearing your cache and loading the page again, and make sure all of the assets you are trying to load properly exist.
I believe it's not working the way we wanted it, but I discovered named assets
You name all your parent template assets in the config file
assetic:
assets:
jquery_and_ui:
inputs:
- '#AppBundle/Resources/public/js/thirdparty/jquery.js'
- '#AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
And then you include the jquery_and_ui name in all children, along with any other assets:
{% javascripts
'#jquery_and_ui'
'#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
It's obviously a hassle to do but I can't find the easy way to do this and don't understand why it doesn't generate parent template assets.
EDIT
Are you by any chance using LiipThemeBundle? This could solve the problem:
# app/config/config.yml
liip_theme:
# ...
assetic_integration: true
That should work fine. Extending block javascripts is ok for assets as well.
Actually such a message
Unable to generate a URL for the named route "_assetic_41351d9" as
such route does not exist
says about outdated cache. Did you clear it? That helped me.
php app/console cache:clear --env=dev
Hope it makes sense.
In my case it appeared that error was caused by fact that the base file extension was .html.twig, while child file had only .twig - changing extensions of both files to .html.twig solved the problem...
Maybe I don't understand it. My main template is: app/Resources/view... But where should be css/js/img ? In my opinion in: app/Resources/view/public/... Because it isn't files bundles and all project in production environment. In my case "frontend page".
Of course, when the files(css/js/img) belongs to bundle is in appropriate bundle.
Now I have:
{% stylesheets '../app/Resources/views/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Assetic Add file located in app/Resources/js
But don't see images files.
How according to the standard symony2, I should store and manage "main" template files?
I would like to safely and well. I learn the symfony2.
All "web assets resources" should be place into web folder (that is made for all files "reachable" from the www).
You only need to run php app/consolle assets:install(*) to let symfony place all of your assets in the right place
When you want to use them simply use
<link href="{{ asset('bundles/yourbundlename/css/style.css') }}" type="text/css" rel="stylesheet">
(or whatever you have called your files)
(*) you can choose even the --symlink option to avoid file copies
All the images CSS js file should be kept in /web folder and can be used
{% stylesheets '/css/*' %}
<link href="/abc.css" type="text/css" rel="stylesheet" />
{% endstylesheets %}
or should be kept in bundle and you have to assetic dump them.
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
kindly refer the below link for the same:
http://symfony.com/doc/current/cookbook/assetic/apply_to_option.html
I am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I have this:
ShopBundle
Controller
Resources
public
images
marker.png
views
Default
index.html.twig
In my index.html.twig, I'd like to have this
<img src="{{ asset("images/marker.png") }}"/>
And I'd love people using my bundle who just want to use their own marker.png to just have to build a bundle inheriting mine and place their image just by following files structure:
MyShopBundle
Resources
public
images
marker.png
Is there any simple way to do this in Symfony2 ? The need seems so simple that I can't believe I didn't find answers already.
So,
How do you include an image asset in your bundle template from your bundle resources directory ? I already did a ./apps/hfr/console assets:install web but my template does not print the right url (/images/marker.png instead of /bundles/ShopBundle/Resources/public/images/png)
Is it possible to override the way I want or did I lost my way ?
Solution:
use the # syntax ...
{% image '#VendorMyShopBundleBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
Please note that Vendor/YourBundle/Resources/public will NOT be accessible by your web server normally.
The assets:install command will therefore copy the assets to web/bundles/vendoryourbundle
The {{ asset('path/to/asset.jpg') }} function will adjust the url of your asset if youre using the dev environment:
http://hostname/app_dev.php
from
/path/to/asset.jpg
to
/app_dev.php/to/asset.jpg
[EDIT]
if you want more control over the assets maybe consider using asset collections.
You can configure them as follows:
# app/Resources/config/config.yml
assetic:
[...]
assets:
css_bootstrap:
inputs:
- %kernel.root_dir%/../src/Vendor/YourBundle/Resources/public/twitter-bootstrap/less/bootstrap.less
- [...]
filters:
- lessphp
- [...]
output: css/bootstrap.css
my_image:
inputs:
- %kernel.root_dir%/../path/to/image.png
filters:
- optipng
output: images/image-with-new-name.png
and use them afterwards in your template like this:
{% stylesheets '#css_bootstrap' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
I am NOT sure right now if the assetic/assets/packagename/inputs configuration array supports the #VendorYourBundle syntax aswell and then uses bundle inheritance though.
Addition:
Before you can use these packages you will have to use the console command:
php app/console assetic:dump
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 !