i have a list of objects which has an image as an attribute(name of the image as a string) , i am looping this list in twig and i try to display the image in an img html tag which takes it's source of image through a symfony 'asset' path .
this the twig part of code :
{% for offre in listeoffres %}
<li>
<img src="{{asset('images/')}} {{ offre.nomImage }}" alt="">
</li>
<li>
{{ offre.titre }}
</li>
{% endfor %}
Notes :
The database contains correct image names and the images already
exist in the correct folder (web/images)
The '{{ offre.nomImage }}' displays correctly the image name that
it's in the database (with the extension)
When i display {{asset('images/')}} {{ offre.nomImage }} it shows:
/myproject/web/images/ image.jpg
While your solution works, Tthe correct way to use the asset function would be to pass the full path of the image to the function call:
{{ asset('images/' ~ offre.nomImage) }}
I have solved it. The problem was the space between the asset and the image name.So the image source should have been like this :
{{asset('images/')}}{{ offre.nomImage}}
Related
How would I be able to supersede the hierarchical dependencies in Drupal 8's twig engine to be able to loop within the i.e Lists/Views which is assigned to a block. So we would have a template: block--views-block--[machine-name]-1.html.twig You will be required to have the variable {{ content }}
Which then recursively buries itself down to field templates. Its completely killing me that one would need so many levels to produce on block of content.
I would like to iterate within the top custom block template the list.
Attempted
{% for key, value in _context %}
<li>{{ key }}</li>
{% endfor %}
To evaluate what is available to iterate down into the object but with no luck. I did though find a nice overriding object structure to reach the field attributes but that was within the field level
item.content['#item'].entity.uri.value
Thanks
i use this to "generate" a picture from my
node--news--full.html.twig
<div class="col-md-3">
{{ content.field_newsbild }}
</div>
the twig debug suggests some filenames. i took this:
field--node--field-newsbild--news.html.twig
and in there i wrote:
{% for item in items %}
<img alt="" src="{{ file_url(item.content['#item'].entity.uri.value) }}" class="img-responsive" {{ attributes }} >
{% endfor %}
hope i'll help a bit.
I want to store full path of image (sonata media bundle) into variable in twig. Is that possible?
If I write:
{% set pic = path item.image, 'big' %}
it throws me an error: Unexpected token "name" of value "item" ("end of statement block" expected) ...
If I write:
{% set pic = item.image %}
then it works, but it stores only name of the file, not full path.
Why don't you do like this ?
{% set rendered %}{% path item.image, 'big' %}{% endset %}
....
Here is my path {{ rendered }}
There is not such a function available (there is a path() function to generate routes). You have to create your own twig extension with this custom function. Read all about that in the documentation.
Perhaps you can solve with:
<img src="{% path media, 'small' %}" data-href="{% path media, 'big' %}">
I'm trying show image using assetic (symfony2, twig). URL address of image depends on the bundle.
{% image '#'{{ bundleName }}'/Resources/public/images/logo.png' %}
<img src="{{ asset_url }}" />
{% endimage %}
But it does not work.
You need to use the concatenation operator (~) to combine expressions inside twig tags:
{% image '#' ~ bundleName ~ '/Resources/public/images/logo.png' %}
I found a workaround for this. My situation is that I have images stored in a subdirectory under Resources/images. I wanted them there, rather than the web directory, as they will only be used temporarily and I want to just delete the subdirectory when they are no longer needed rather than having to delete images from various subdirectories. So, I couldn't use the asset() function (since the images were in the bundle) and assetic doesn't seem to support dynamic images.
I needed to display one of 2 banner images based on certain criteria. I wound up creating a twig template that would generate each image using assetic (2 images, so 2 templates).
<a href="{{ vm.bannerLinkUrl }}">
{% image '#MyBundle/Resources/public/images/path/to/image/banner.jpg' %}
<img src="{{ asset_url }}">
{% endimage %}
</a>
I created a 'banner' action in my Home controller to render the templates.
public function bannerAction()
{
/* code to load data into a view model object called $vm */
$template = $this->render(
"MyBundle:Home:path/to/banner-template-subdir/{$vm->bannerType}-banner.html.twig",
['vm' => $vm]
);
return $template;
}
Finally, I used the render function to generate the correct banner from the main page template.
<div class='banner'>
{{ render(controller("MyBundle:Home:banner")) }}
</div>
The document said
{# src/Acme/ArticleBundle/Resources/views/Article/recentList.html.twig #}
{% for article in articles %}
<a href="{{ path('article_show', {'slug': article.slug}) }}">
{{ article.title }}
</a>
{% endfor %}
also, can use 'url' like this:
Home
it confused me what is the difference between using 'url' and 'path'?
They are very similar.
path()
Generates a relative/absolute path :
path('contact') will generate /contact
url()
Generates a scheme-relative/absolute url, ie domain + path
url('contact') will generate http://example.org/contact
The url() style is useful when using cross-domain ajax or generating emails, because the hostname won't be the same.
Take a look at the code https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Extension/RoutingExtension.php for more information
url Twig function generates absolute path
path Twig function generates / related url
Example we have http://sf2sandbox.local with AcmeDemoBundle
{{ path('_welcome') }} produce /
{{ url('_welcome') }} produce http://sf2sandbox.local/
I have to generate something like star rating and I have to generate some html for styling ect.
<div class="star on"><i>*</i></div>
<div class="star on"><i>*</i></div>
<div class="star on"><i>*</i></div>
<div class="star"><i></i></div>
<div class="star"><i></i></div>
I want to render using a twig function passing active stars parameters.
{{ stars(4) }}
Is correct use twig functions for generate html code?
Or maybe should I use {% include ... %}
No need in overengineering for such simple task.
If you generate your array in Controller, then it could look like this:
$stars = array(
true,
true,
true,
false,
false,
);
Then you could render your HTML in Twig:
{% for star in stars %}
<div class="star{{ star ? ' on' }}"<i>{{ star ? '*' }}</i></div>
{% endfor %}
In case if you would like to operate with Twig only, I recommend you to use macro:
{% macro stars(stars, total) %}
{% for item in 1..total %}
{{ item }}<br>
{% if item <= stars %}
<div class="star on"><i>*</i></div>
{% else %}
<div class="star"><i></i></div>
{% endif %}
{% endfor %}
{% endmacro %}
If you've defined your macro in the same template, you should call it via _self, if in another file - just like a function, but not forget to import your file into needed twig. See chapter about macros (linked above).
Following call will produce HTML structure that you described in your question:
{{ _self.stars(3,5) }}
See the Extending Twig section of its docs. According to the table in the first section on that page, using functions for content generation is natural. I create a lot of Twig functions and I suggest you create one to solve your problem.
BTW, your function can render a separate template with HTML code — do not generate the HTML code right in your Twig function's PHP code. To render a separate template from your Twig function, inject the service_container service into it, get the templating service and call the render() method on it:
return $this->container->get('templating')->render($pathToYourCustomTemplate);
Usually, it's best to inject the needed services individually, but if you inject the templating service instead of service_container, you'll get a cyclic dependencies problem. That's why injecting the whole container into Twig extensions is a reasonable exception.