CODEWITHSUNDEEP
phpsymfonytwitter-bootstrapassetic
gezpage
gezpage

Reputation: 451

Symfony 2 Bundle - install image resources

I have created a bundle for Twitter Bootstrap by copying the relevant files to the following locations:

Next, I execute php app/console assets:install web which copies the bundle resources to the web folder and in my twig template I can use assetic to pull in the css and javascript, which works fine.

The problem I have is that the vanilla bootstrap css is pointing to /img in the web root for the image resources, which are in fact in /web/bundles/bellabootstrap/img

I can manually copy these files to the desired location, or even create a symlink, but I want to know what the correct Symfony / Assetic way of doing this is.

Note that I am interested in how to do this not just for Bootstrap - jqueryui/jquery-datatables etc. and other 3rd party libs have exactly the same issue.

Thanks.

Upvotes: 2

Views: 4135

Answers (2)

gezpage
gezpage

Reputation: 451

I discovered the proper solution for this a while back:

http://symfony.com/doc/current/cookbook/assetic/asset_management.html#fixing-css-paths-with-the-cssrewrite-filter

Assetic (a great piece of software) can run your CSS through various filters, the one which solves this problem is ccsrewrite, as explained in the Symfony docs it will fix paths contained in your CSS files.

Upvotes: 3

Alberto Gaona
Alberto Gaona

Reputation: 2437

For JQuery UI (smoothness theme) I have: 

src/Acme/YourBundle/Resources/public/css/smoothness
src/Acme/YourBundle/Resources/public/css/smoothness/jquery-ui-1.8.16.custom.css
src/Acme/YourBundle/Resources/public/css/smoothness/images
src/Acme/YourBundle/Resources/public/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png

... and other image files (just as they came out from the jquery.com site).

In twig I have:

<link type="text/css" rel="stylesheet" href="{{ asset('bundles/acmeyour/css/smoothness/jquery-ui-1.8.16.custom.css') }}"></link>

No need to care for png files location since a good writen css takes care of it for you. The {{ asset() }} method, in the other hand, points to the right directory so you don't have to worry about that.

Upvotes: 2

Related Questions