TLDR: How do I make Assetic scan for assets in Twig templates outside bundle?
I've got few registration wizards. Each of these wizards has it's own view directory, the file structure looks like this:
/SiteBundle/Wizard/General/Resources/views
/SiteBundle/Wizard/CountrySpecific/Resources/views
/SiteBundle/Wizard/[...several more...]/Resources/views
In config.yml I defined these paths for twig so I can use #general_wizard/template.html.twig paths:
twig:
paths:
"%kernel.root_dir%/../src/MyWeb/SiteBundle/Wizard/General/Resources/views": general_wizard
"%kernel.root_dir%/../src/MyWeb/SiteBundle/Wizard/CountrySpecific/Resources/views": country_specific_wizard
The problem is that assets used in these templates (inside the Wizard directories) are not dumped using assetic:dump. When I move the view sources to regular SiteBundle/Resources/views, then all the assets are correctly dumped.
Is there a way to make Assetic check the external templates too?
It is not possible with the stock assetic:dump (SF 2.3), as the /Resources/views/ path is hardcoded in the GeneratorBundle, which again provides the list of files to process to assetic. Of course, you could write your own command, but you would basically reinvent the wheel.
I would recommend to keep with the Resources/views convention, and create the subcategories below that:
/SiteBundle/Resources/views/General
/SiteBundle/Resources/views/CountrySpecific
That would have the same effect, and would not require you to write your own commands and mess around with SF2 internals.
I encountered the same problem after moving all templates to templates in the project root, as it will probably come to be in future versions of Symfony.
The simplest solution is to configure all assets in the configuration file and to locate the output files in the web directory, e.g., all bootstrap CSS files into web/css/bootstrap.css. A remaining difficulty is that referencing the assets with the javascripts tag doesn't work anymore because those tags have to be scanned by the Assetic Bundle to work. You have to do this the old-fashioned way, e.g., via {{ asset('css/bootstrap.js') }}.
With Bootstrap I encountered difficulties to make Glyphicons work, since the cssrewrite filter doesn't work as before. I went for Fontawesome at that point, but including your own copy of Glyphicons could also work.
Related
I am trying to create my own template with Symfony 2, but the problem is with the CSS when I write backround:url('images/img.png') the image doesn't show, but in my base.html.twig this URL works very well "{{ asset('images/templatemo_ads.jpg ') }}".
I have put my CSS and images folders into web folder because I will use them in other bundles and I use this command to activate assets PHP app/console assets:install web.
background:url() is conflict the default function of url() in the symfony/asset bundle.
Try inline js:
$('.test').css("background", "url({{ asset('images/templatemo_ads.jpg ') }}) no-repeat");
You should use "./" or "../" at the start of the CSS url.
When you use it, it says to the file system to look into the file system from the CSS file, when you don't you are setting a path to add after the current URL to look for the file there (associated with symfony routing, it might work on the homepage if it's the naked domain name, but that's it.)
You should avoid using JS on file sourcing, since people might block it.
Since we use assetic to manage the site's assets, we need to dump all images regardless if they are declared on a twig template due to most of them are used dynamically.
The way to afford this, I think, is declaring them as assets on assetic configuration, but it is a tedious task.
Does anybody know how to declare multiple image as assets in an elegant way?
Thanks
I have a template, one of those you could buy, with many css/js/images, very beautiful.
But I have to control these pages with Ruby on Rails, which I am still learning.
The template files have many directives for other files and folders.
I am trying to understand the Assets Pipeline and I am feeling that it looks not good.
There are dozens of css files, with the directives for many images that are placed in other folders.
I am very scared to be straightforward.
I am not the project owner, I just have these two requirements:
Use this template
Build the system in Ruby on Rails
Could someone indicate me the correct way to get along with this situation.
Thanks a lot.
There is no direct solution to this, but may be this can help: install_theme gem. I haven't used it but the link shows how to use an html/css/js theme in rails application.
Friends,
There is a solution for dummies!
I am feeling so fool.
Inside Rails folders, there is a folder called public
We just have to put our css/js/images inside this folder.
For example, in my template, the index.html was in the same folder then a folder called assets which has sub folder css, js, images
So, the files need for index.html were (relatively to it) in assets/css/... or assets/js/...
Thus, all I had to do was copy my whole folder assets to inside the public directory below Ruby on Rails files.
I found it here:
The Asset Pipeline
I am sorry for the dummy question.
Thanks a lot!
I have a web site built on Symfony2 which uses twig templates, LESS, and assetic.
In order to cache bust assets, I'm simply using this in my config.yml:
framework:
templating:
engines: ['twig']
assets_version: 'asset-version-here'
And then I use the asset() function to load the asset and the cache busting is handled for me.
However, the concern I have is when I load my LESS (css) file, there are references to other files, and I would like to know how these files can be cache busted as well.
Example:
.someSelector { background:url('../images/filename.png'); }
How can I make sure that the referenced file, filename.png is cache busted upon deployment?
The asset files referenced in Twig using asset() are cache busted automatically upon deployment (I use a deployment script hook that updates the assets_version in the framework's config), but those referenced in a stylesheet are not.
How can I do this?
I didn't manage to find a natural solution to this issue. In the end because I needed to move forward, I just added a certain tag in the query string, e.g. {ASSETS_VERSION}, and then I search/replace this with the revision number of the project at deployment time as part of my deployment script.
I'm not proud of this solution but it did solve my problem in the short term until I can find a more elegant solution.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)