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
Related
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]
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 am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I have a module for manage images inside my Sonata Admin. I want to display those images where sonata logo is placed, how I can do that? I have the code for get the images in my controller and also the template to display the image but don't know how to use this from Sonata, any advice?
You can override the sonate base template (like you overide any other template) or any block listed inside of it.
there is a block called logo and it looks like this
{% block logo %}
<a href="{{ url('sonata_admin_dashboard') }}" class="brand">
<img src="{{ asset(admin_pool.titlelogo) }}" alt="{{ admin_pool.title }}" />
{{ admin_pool.title }}
</a>
{% endblock %}
In combination with a Twig-Extension it should be no problem to fetch the image out of the database
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