Symfony2 - Assetic - css font icons - php

How to include css font icon libraries istalled via composer in /vendor dir (fontawesome for example). Include:
{% stylesheets filter='cssrewrite'
'%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.min.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>
{% endstylesheets %}
But it does't rewrite font files url, it stays same, and icons wont load:
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
I know, we can't make urls poined outside of webroot, but maybe assetic can put this dependencies to /web automatically?
The only way I see for now is to copy this assets to /web dir with post-install composet script, but I'd like to find a better way.
Thanks!

Asked on the #symfony channel and the only answer I've got to use assetic with font-awesone was to include them in the config.yml under assetic. The original code is the following:
assetic:
java: /usr/bin/java
use_controller: false
bundles: [ CorvusFrontendBundle, CorvusAdminBundle ]
assets:
font-awesome-otf:
inputs: '%kernel.root_dir%/Resources/public/fonts/FontAwesome.otf'
output: 'fonts/FontAwesome.otf'
font-awesome-eot:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.eot'
output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.svg'
output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.ttf'
output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.woff'
output: 'fonts/fontawesome-webfont.woff'
filters:
cssrewrite: ~
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.8.jar
lessphp:
file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"
apply_to: "\.less$"
Then calling the css file as follow:
{# Common Stylesheets #}
{% stylesheets filter="?cssrewrite"
'%kernel.root_dir%/Resources/public/css/font-awesome.min.css'
'#CorvusCoreBundle/Resources/public/css/common.less'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
And finally dumping the files. However, and in my experience, I get duplicate files for the fonts themselves. I am probably doing something stupid.
HTH,
Tam
credit: https://gist.github.com/ilikeprograms/a8db0ad7824b06c48b44
Update June 2015: The answer was posted for version 2.1/2.3 of Symfony2. This answer might apply or not to the most current version: you will have to check

Great answer above but for occasions when your font's aren't stored in the app directory the above won't work. My CSS files are kept in my own bundle, so to make sure they are found I needed to configure my app/config/config.yml like so;
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles:
- AjtrichardsAdminBundle
- AjtrichardsMainBundle
assets:
font-awesome-ttf:
inputs: '#AjtrichardsMainBundle/Resources/public/fonts/icons.ttf'
output: 'fonts/icons.ttf'
font-awesome-woff:
inputs: '#AjtrichardsMainBundle/Resources/public/fonts/icons.woff'
output: 'fonts/icons.woff'

Related

Symfony2 Assetic dump when using multiple kernels

Using Symfony 2.7. I made my application in multiple kernels. My folder structure is like this:
Project
|
+-- app/
| |
| +-- candy/ // all config, parameters, kernel for candy application
| +-- vegetable/ // all config, parameters, kernel for vegetable application
|
+-- src/
+-- bin/
+-- vendor/
|
+-- web/
|
+-- candy/ // all assets, images, js etc. for candy application
+-- vegetable/ // all assets, images, js etc. for vegetable application
Now when I want to install assets i simply do:
php app/candy/console assets:install web/candy/
this works, however when I do:
php app/candy/console assetic:dump web/candy/
it searches for files in web/ directory, not in web/candy/bundles/../.
Why is that and what can be the solutions?
My base.html.twig:
{% block stylesheets %}
{% stylesheets
'bundles/mpshop/css/jquery-ui.css'
'bundles/mpshop/css/bootstrap.min.css'
'bundles/mpshop/css/style.css'
'bundles/mpshop/css/docs.css'
'bundles/mpshop/css/lightbox.css'
'bundles/mpshop/css/bootstrap-select.css'
'bundles/mpshop/css/style_custom.css'
'bundles/mpshop/css/responsive.css'
'bundles/mpshop/slick/slick.css'
'bundles/mpshop/slick/slick-theme.css'
'bundles/mpshop/css/fonts_googleapis.css'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block javascripts %}
{% javascripts
'bundles/mpshop/js/jquery-1.11.3.min.js'
'bundles/mpshop/js/jquery-ui.js'
'bundles/mpshop/js/migrate.js'
'bundles/mpshop/js/bootstrap.min.js'
'bundles/mpshop/js/bootstrap-select.js'
'bundles/mpshop/js/search.js'
'bundles/mpshop/js/ckeditor.js'
'bundles/mpshop/js/jquery.lightbox-0.5.js'
'bundles/mpshop/js/lightbox.js'
'bundles/mpshop/slick/slick.js'
'bundles/mpshop/js/custom.js'
'bundles/mpshop/js/scroll-to-top.js'
'bundles/mpshop/js/jquery.smooth_scroll.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
config.yml:
assetic:
debug: "%kernel.debug%"
use_controller: "%kernel.debug%"
bundles: [ EDBlogBundle, ApplicationEDBlogBundle ]
#java: /usr/bin/java
filters:
cssrewrite: ~
You should set the "write_to" directory in the config for each kernel.
app/candy/config/config.yml
assetic:
//...
write_to: '%kernel.root_dir%/../../web/candy'
app/vegetable/config/config.yml
assetic:
//...
write_to: '%kernel.root_dir%/../../web/vegetable'
Just as a side note, why is it that you are using multiple kernels?
I've heard the possibility of it but never seen the benefits so am interested in the thinking.

Symfony/Less #icon-font-path is undefined in glyphicons.less

I use Symfony 2.4 and i installed the bundle MopaBootstrap.
less say: NameError: variable #icon-font-path is undefined in glyphicons.less on line 13, column 8. It's a mopabootstrap file.
I extend 'MopaBootstrapBundle::base_initializr.html.twig'. I have no particular code, it's a new project.
Less work great for all my code, except the bootstrap glyphicons file.
Any idea ?
Edit: There is an open issue there if you have some ideas: https://github.com/phiamo/MopaBootstrapBundle/issues/839#issuecomment-39893655
I removed 'apply_to: ".less$"' in config.yml and added the less filter to my twig tags. Now assetic:dump --watch seems to work fine.
config.yml
assetic:
debug: %kernel.debug%
use_controller: false
filters:
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node, /usr/local/lib/node_modules]
apply_to: "\.less$" <<<<< Remove this line
Base.html.twig
{% stylesheets
'#MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less'
filter='less' <<<<< Add this line
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

Using Symfony2 assetic results in 404

I can't seem to get assetic to work with me.
Here is my assetic config in my config.yml file
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ FOSUserBundle, MyUserBundle ]
filters:
cssrewrite: ~
I have created a bundle that extends the FOSUserBundle. I've overridden the registration template and am trying to include my own css.
// MyUserBundle/Resources/views/Registration/register_content.html.twig
{% block stylesheets %}
{% stylesheets 'bundles/myuser/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
My bundle has the following structure:
/MyUserBundle
...
/Resources
...
/public
/css
signup.css
I always get a 404 though.
http://myproject.dev/css/494d9ed_part_1_signin_1.css 404 Not Found.
I get the following exception thrown:
No route found for "GET /css/494d9ed_part_1_signin_1.css"
I've published the assets so it also lives in
/MyProject
/web
/bundles
/myuser
/css
signin.css
What am I doing wrong?
Try with this syntax:
{% stylesheets filter='cssrewrite' '#MyUserBundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
and then on the command line:
php app/console cache:clear
php app/console assets:install --symlink
php app/console assetic:dump
In the DEV environment it should work without the assetic:dump command.

Compass spriting with Assetic on Symfony 2

It's my first time using Symfony so I don't know if I'm messing everything up or what but I can't seem to get compass spriting working on my project apparently.
This is what I have on my scss files:
#import "compass";
#import "compass/css3";
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites;
And I don't see any errors when compiling de sass but the icons are nowhere to be found and the css generated is something like:
.icons-sprite, .icons-icon01, .icons-icon02 {
background: url("/images/icons-sf92f9256db.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
On my config.yml file I have this:
assetic:
debug: "%kernel.debug%"
use_controller: false
filters:
cssrewrite: ~
sass: ~
compass:
bin: '/usr/bin/compass'
apply_to: "\.scss$"
http_path: /
images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
generated_images_path: %kernel.root_dir%/../web/images
http_generated_images_path: /images
parameters:
assetic.filter.compass.images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
assetic.filter.compass.http_path: /images
And my icons folder (with the original png files that I want to use for the sprite) is in /Myprojectfolder/src/src/Es/DolceVitaBundle/Resources/assets/images
The folder in /Myprojectfolder/src/web/images is empty
EDIT:
More info: I did app/console assetic:dump --watch and the css files were generated fine
And my styleshhets are added like this:
{% stylesheets output='css/*.css' filter="compass"
"#EsDolceVitaBundle/Resources/assets/scss/style.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Well, apparently something was off, maybe the cache, but the rest of my config was ok. I did the rest of my css and commented the icons part and after working for a day I uncommented to look at the issue again and the sprite showed up perfectly.
Don't forget to add to your parameters.yml:
assetic.filter.compass.generated_images_path: %kernel.root_dir%/../web/images

Symfony2 and Assetic - cssrewrite works perfectly for dev, not for prod

I include my CSS with the following code:
{% stylesheets 'bundles/majorproductionssewingdivasite/css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
In dev, this allows me to use image sprites without any problems. The resulting URL to my sprite is:
http://localhost/diva/web/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
But, in prod, it gets mapped to:
http://localhost/diva/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
Notice the lack of web directory.
The generated code in the CSS file is as it should be, and all my CSS (both the dev 'chunks' and the finalized prod assetic dump) are at web/css/. Any ideas as to why the prod environment is skipping the web directory?
EDIT: what's weird is that both dev and prod generate the same URL in the CSS itself:
url('../../bundles/majorproductionssewingdivasite/images/diva-sprites.jpg')
Solution is to dump the assets in the prod environment:
$ app/console assetic:dump --env=prod
Remember to Clear the Cache
php app/console cache:clear --env=prod --no-debug
berore
php app/console assetic:dump --env=prod --no-debug
Also remember to appropriate configure assetic, in your config_prod.yml set as below:
assetic:
use_controller: false
Edit:
As said in Symfony docs (actually in chapter refers to dev environment): tell Symfony to stop trying to process these files dynamically
In debug mode, Assetic 1.1 also seems to rewrite CSS even when it's not in the {% stylesheets %} tag. So it's worth checking that's there when you turn off debug in production.

Categories