How to display an image by passing a variable path to twig?
{% image '{{path}}' %}
<img src="{{ asset_url }}" width=100 height=100/>
{% endimage %}
The above code is not working where
path =#Bundle/Resources/public/images/image.jpg
Or how to convert variable path to asset_url?
have you tried with asset('images/image.jpg')?
Related
I've got a problem with showing thumbnails using Liipimaginebundle in TWIG template.
I'm rendering an index:
return $this->render('ad/index.html.twig', array(
'ads' => $ads,
));
and in index.html.twig I'm using FOR loop to show thumbnails related to ads.
{% for ad in ads %}
//with parameter - doesn't work
{% set img = ad.mainPhoto %}
<img src="{{ img | imagine_filter('thumb') }}" />
//working fine
<img src="{{ asset('/uploads/2.png') | imagine_filter('thumb') }}" />
{% endfor %}
mainPhoto stores a path to photo related to current ad - for example:
/uploads/2.png
While using an "img" parameter, I've got an exception:
An exception has been thrown during the rendering of a template ("Parameter "path" for route "liip_imagine_filter" must match ".+" ("" given) to generate a corresponding URL.").
What is the correct way to define the path in this case?
You are passing only the path as a string to the imagine_filter, add the asset and it should work:
{% for ad in ads %}
{% set img = ad.mainPhoto|default %}
{% if img <> "" %}
<img src="{{ asset(img) | imagine_filter('thumb') }}" />
{% endif %}
{% endfor %}
Considering that Twig has it's {% for %} loops and it's {% image %} sections, is there something such as the following be done with Twig to return all images within the AppBundle/Resources/images/gallery/ directory? It would seem to make sense but I've not been able to find anything so far:
{% image #AppBundle/Resources/images/gallery/*.jpg %}
<img src="{{ asset_url }} />
{% endimage %}
Yes, that is possible. Assetic just doesn't distinguish between different file types:
{% image '#AppBundle/Resources/images/gallery/*' %}
<img src="{{ asset_url }}" />
{% endimage %}
This will render all images from the gallery directory, no matter the file extension.
The same can be done with CSS and JS files via
{% stylesheets '#AppBundle/Resources/css/*' %}
<img src="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts '#AppBundle/Resources/js/*' %}
<img src="{{ asset_url }}" />
{% endjavascripts %}
I searched a lot but could not find a solution to achieve this:
{% for i in 1..6 %}
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
{% endfor %}
Name of the images should be dynamic. Please help.
The above code throws error:
Unexpected token "operator" of value "~"
Solution:
According to what #Nic posted (accepted answer), the only workaround seems to be this:
{% for i in 1..6 %}
<li>
<img src="{{ asset('bundles/digicreekil/images/college/demo/facilities/thumbs/laboratory/t'~i~'.jpg') }}" alt='demo'/>
</li>
{% endfor %}
You can't use variables in Assetic (and therefore in the {% image %} tag).
The reason is, according to Kris Wallsmith (creator of Assetic):
(...) that Assetic needs to be able to parse a Twig template and extract any assets that are defined there. This is not possible if you use a variable in the tag.
Christophe Coevoet adds:
The assets are dumped when using the CLI command for this, not when rendering the page. So you cannot use variables as you don't have their values.
See this GitHub issue for the complete conversation.
Remember that Assetic creates and optimizes the assets when you run app/console assetic:dump, not when the page is actually rendered. Therefore, it cannot know of any values, it can only work with static assets.
So if you want to work with dynamic assets, you'll have to do something like this:
{% for i in 1..6 %}
<li>
<img class="facThumb" src="{{ asset('images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg') }}" alt="Facilitiy"/>
</li>
{% endfor %}
In this case, you can iterate through the numbers 1-6 and use the variable in the asset's URL because you're not using Assetic, but Twig's asset() function. asset() simply returns the full URL of the asset, it doesn't do any optimizations so it can be executed during runtime.
But if you want to use Assetic's optimizations and filters, you can also give it the static assets:
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/1.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/2.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/3.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
(etc.)
This way, you'll have to copy the same code 6 times, but it allows you to use Assetic.
When I launch this command :
assets:install web
Symfony copy my asset into something like :
web/bundles/mybundle/img/img.png
So when I use this ressources, I have to do something like that :
{{ asset("bundles/mybundle/img/img.png") }}
That way, this part "bundles/mybundle/" is public.
How can I hide this part ?
I know that it's easily done with assetics like that :
{% javascripts '#AcmeDemoBundle/Resources/public/js/*' output='js/main.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
But for media (images, videos...) it's a different story. Any Idea ?
Use Assetic for images as well as for js, then set the output to wherever you wish.
{% image '#AcmeFooBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
For one of our projects we have a couple of headers which are different for each locale. At this moment I'm using the assetic image function to load the correct image, like this:
{% image '#AgendaBundle/Resources/public/images/header_1.png' output='/images/header_1.png' %}
<img src="{{ asset_url }}" class="mod-rounded" />
{% endimage %}
To add a translated version of the headers, the only way to do this seems to be hardcoding the locale:
{% if app.request.locale == 'nl' %}
{% image '#AgendaBundle/Resources/public/images/header_1.png' output='/images/header_1.png' %}
<img src="{{ asset_url }}" class="mod-rounded" />
{% endimage %}
{% else %}
{% image '#AgendaBundle/Resources/public/images/header_1_en.png' output='/images/header_1_en.png' %}
<img src="{{ asset_url }}" class="mod-rounded" />
{% endimage %}
{% endif %}
This seems tedious, error prone and hard to maintain. Is there a better and more elegant solution available?