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>
I made a flask app with flask-bootstrap. I am using virtualenv as well. Where would I find the stylesheet that I edit to customize the colors? Or is there another way to have custom colors?
Add you custom colors to a css file, e.g. mystyle.css, put it under the static folder, then add your custom css file to your template.
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}
Check the documentation here: Adding a custom CSS file:
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'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
So my question is basically, how the hell do I include simple CSS file inside Twig template?
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
This created a new folder
/web/bundles/webshome/...
this is just linking to the
src/Webs/HomeController/Resources/public/
right?
Questions
Where do you place your asset files, JS, CSS, and images? Is it OK to put them in Bundle/Resources/public folder? Is that the right location for them?
How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
Should I configure something else?
You are doing everything right, except passing your bundle path to asset() function.
According to documentation - in your example this should look like below:
{{ asset('bundles/webshome/css/main.css') }}
Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):
app/console assets:install web --symlink
Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
And you can use %stylesheets% (assetic feature) tag:
{% stylesheets
"#MainBundle/Resources/public/colorbox/colorbox.css"
"%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
You can write path to css as parameter (%parameter_name%).
More about this variant: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.
Scattering your web assets across tens of different bundles makes it
more difficult to manage them. Your designers' lives will be much
easier if all the application assets are in one location.
Templates also benefit from centralizing your assets, because the
links are much more concise[...]
I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.
In case you are using Silex add the Symfony Asset as a dependency:
composer require symfony/asset
Then you may register Asset Service Provider:
$app->register(new Silex\Provider\AssetServiceProvider(), array(
'assets.version' => 'v1',
'assets.version_format' => '%s?version=%s',
'assets.named_packages' => array(
'css' => array(
'version' => 'css2',
'base_path' => __DIR__.'/../public_html/resources/css'
),
'images' => array(
'base_urls' => array(
'https://img.example.com'
)
),
),
));
Then in your Twig template file in head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
</body>
</html>
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.