From a personal symfony 3 project, I want use the font-awesome library. In the config.yml file I added an asset like that :
awesomefont_css:
inputs:
- '%kernel.root_dir%/../web/library/font-awesome/css/font-awesome.css'
I call the asset from my index.php page :
{% stylesheets output="stylesheet.css"
'#bootstrap_css'
'#awesomefont_css'
"#style_css"
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
I cleared caches (via php bin/console cache:clear) but when I load my php page, I get the errors :
I understood the library font-awesome need use some another files. My question is : how can/must I add properly theses anothers files in a symfony 3 ?
Thanks !
I add samples symbolic links from mywebsite/web/library/font-awesome/fonts/* to mywebsite/web/fonts . I don't know if there is a better solution but I don't find another and that work
I included fortawesome/font-awesome via composer.
Then, you have to add additional entries to your config.yml:
fontawesome_css:
inputs:
- '%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.css'
filters: [cssrewrite]
font-awesome-otf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
output: 'fonts/FontAwesome.otf'
font-awesome-eot:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
output: 'fonts/fontawesome-webfont.woff'
font-awesome-woff2:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff2'
output: 'fonts/fontawesome-webfont.woff2'
then only include the fontawesome_css (as you did already):
{% block stylesheets %}
{% stylesheets '#bootstrap_css' '#fontawesome_css' '#custom_css' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
Finally, run
bin/console assetic:dump
and you're done! It is not necessary to mention the font files in your template, they are copied automatically.
I should add that the webpack/encore package is new and much better in my opinion! It replaces assetic.
You can also easily customize your bootstrap theme on the fly with this tool.
Related
I am using symfony3 as a newbie. I have installed sass on my fedora system and I try to use the sass filter to convert my scss files into css. I use the assetic bundle.
I have created an assets dir in web which contains a scss and a css dir.
My config.yml contains the following:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
jsqueeze: ~
sass: ~
compass: ~
My twig template include the following:
{% block stylesheets %}
{% stylesheets filter="sass" output="assets/css/app.css"
"%kernel.root_dir%/../web/assets/scss/main.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
{% endblock %}
After having launched
php bin/console assetic:watch
each time I bring a change in main.scss, .css files are generated in web/assets/css (app.css, app_main_1.css) but they are absolutely empty.
If I run
sass web/assets/scss/main.scss web/assets/css/app.css
a valid css file is generated.
Could somebody help me understanding what is wrong?
Giving the full path to sass and compass in the configuration file solves the problem.
I have been trying to figure out how to get assetic working with my CSS sources but am having no luck. Two articles I've been tyring to cross-reference are combining and minimising ccs files and assetic asset management. However, the hybrid I've ended up with is the below which isn't working:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However, when I try running (in Dev) I get an error saying:
Unexpected token "name" of value "rel" in base.html.twig at line 19
PS I have installed leafo and jsqueeze (I have javascripts to do figure out next) with:
$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze:"~1.0"
You have here an error in your code:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
in every line you have a file that should be rendered. In the second line you have added rel and type. you have to delete that both parameters otherwise its an option for stylesheets. If you delete them it should work.
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
In one of my Symfony projects I am using assetic for asset managment.
All my twig files extend a base file called base.html.twig. I This file (base) I have:
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'../vendor/bootstrap/css/bootstrap.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
In the other files that extend the base file I override the stylesheets block so that I can add other css files. This is what I do:
{% block stylesheets %}
{{ parent() }}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'bundles/account/css/signup.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Now the problem is that signup.css is never added in main.css and so are all the other files that are not in the stylesheet block in the base file.
I don't know why but this started happening when I swtiched to prod environment (it was working fine in dev). I've done, as recommending on Symfony's website:
php app/console assetic:dump --env=prod --no-debug
One other thing, it seems that I can't swtich back to dev mode even when I'm using app_dev.php
Do you guys have any idea of where these errors could come from ?
Thank you in advance for you help,
kimimsc
Your have a conflict with your 'option' attribute. So in prod environnement, the second stylesheet overwrite the first.
You must use another output value for signup.css (or don't use this option)
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