I'm starting at creating my own bundles and upload them to github.
I have just created this: https://github.com/Ziiweb/FrontendBundle
Inside the bundle, there is an image here: https://github.com/Ziiweb/FrontendBundle/tree/master/Resources/public/images
And I'm loading that image this way below inside a template in the same bundle, in the same way as it said in the docs:
{% image '#ZiiwebFrontendBundle/Resources/public/images/ajax-loader.gif' %}
<img class="loader" src="{{ asset_url }}" alt="Example" />
{% endimage %}
The problem: after installing the bundle (composer) in another project, I get the error below when trying to request the template where the image is:
An exception has been thrown during the rendering of a template
("Unable to generate a URL for the named route "_assetic_0b1c853_0" as
such route does not exist.") in
ZiiwebFrontendBundle:Default:contact.html.twig at line 15.
I get the same message using this code:
{% image 'bundles/ziiwebfrontend/images/ajax-loader.gif' %}
<img class="loader" src="{{ asset_url }}" alt="Example" />
{% endimage %}
Yes, I have installed the assets using assets:install so my image is at web/bundles/ziiwebfrontend/images/ajax-loader.gif.
NOTE: I think I have Assetic installed correctly.. I have used these 3 steps.
I think you missed to add same bundle in config.yml
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [YourBundleName]
Related
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.
To display an image in my Twig template I do
<img src="{{ asset('images/mylogo.png'}}" />
It works fine if I put manually my image 'mylogo.png' in the 'web' directory of my application. But I don't think it is a good way to go. I should use the command 'assets:instal web'
The problem is when I use the command 'assets:instal web' the name of my image is modified (for example the name would be fce32_mylogo_2.png) . . . I think it is assetic who is modifying the name of my image.
But then my Twig template do not find my image when I use to display that image.
Is it normal I put my image 'mylogo.png' manually in my web folder ? I'm not sure about that . . .
Edit: I know I can use this synthax:
{% image 'bundles/myBundle/img/mylogo.png' %}
<img src="{{ asset_url }}" class="img-responsive" alt="">
{% endimage %}
But this does not allow to pass twig variables. I would like to do this:
{% image 'bundles/myBundle/img/'~someVar.logoUrl %}
<img src="{{ asset_url }}" class="img-responsive" alt="">
{% endimage %}
clear your asset dumps and try this:
app/console assets:install web --symlink
Is this possible to use assetic with inheritance ? With the code below I get this error :
An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "_assetic_41351d9" as such route does not exist.
My app layout :
{# app/Resources/views/layout.html.twig
{% block javascripts %}
{% javascripts
'assets/js/jquery-2.2.0.min.js'
'assets/js/main.js'
output='assets/compiled/app.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
My child layout :
{% extends "::layout.html.twig" %}
...
{% block javascripts %}
{{ parent() }}
{% javascripts
'assets/js/jquery.owl.min.js'
output='assets/compiled/page.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Yes you can use inheritance with Twig, and there is nothing inherently wrong with what you are trying to do in your code. I would try completely clearing your cache and loading the page again, and make sure all of the assets you are trying to load properly exist.
I believe it's not working the way we wanted it, but I discovered named assets
You name all your parent template assets in the config file
assetic:
assets:
jquery_and_ui:
inputs:
- '#AppBundle/Resources/public/js/thirdparty/jquery.js'
- '#AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
And then you include the jquery_and_ui name in all children, along with any other assets:
{% javascripts
'#jquery_and_ui'
'#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
It's obviously a hassle to do but I can't find the easy way to do this and don't understand why it doesn't generate parent template assets.
EDIT
Are you by any chance using LiipThemeBundle? This could solve the problem:
# app/config/config.yml
liip_theme:
# ...
assetic_integration: true
That should work fine. Extending block javascripts is ok for assets as well.
Actually such a message
Unable to generate a URL for the named route "_assetic_41351d9" as
such route does not exist
says about outdated cache. Did you clear it? That helped me.
php app/console cache:clear --env=dev
Hope it makes sense.
In my case it appeared that error was caused by fact that the base file extension was .html.twig, while child file had only .twig - changing extensions of both files to .html.twig solved the problem...
I want to include full asset URLs in my page templates, mainly so the Behat failed test page grabs still display properly. I've read this question, which suggests using absolute_url() as of 2.7, however I'm using the {% stylesheets %} or {% image %} tags to filter my assets.
Can anyone advise if there's a better way than doing something like this...
{% image
'#AcemBundle/Resources/public/imgs/logo.jpg'
output='compiled/imgs/logo.jpg' %}
<img src="{{ app.request.getSchemeAndHttpHost() ~ asset_url }}" alt="Logo"/>
{% endimage %}
... ?
Updated
Added full {% image %} tag I'm using.
Use it like this:
<img src="{{ asset('bundles/mybundle/assets/img/logo.png') }}">
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