Assigning output of a twig function to a twig variable - symfony

I have the twig/assetic code below:
{% if post.media %}
{% image '#ApplicationMyBundle/Resources/images/AjaxLoader-298x179.gif' output='/images/AjaxLoader-298x179.gif' %}
<img src="{{ asset_url }}" data-src="{% path post.media, 'news_size_4' %}" />
{% endimage %}
{% endif %}
The real image path is in {% path post.media, 'news_size_4' %}, I need to get this output in to a variable so i can use it elsewhere. {{ asset_url }} is no good as that only gives me the ajaxloader image.
Is there anyway this can be done?

As suggested by Hakim in a comment, you can use the set Twig tag.
Define the variable:
{% set myPath %}
{% path post.media, 'news_size_4' %}
{% endset %}
Display this variable:
{{ myPath }}

Related

Reuseable blocks inside of custom form themes in symfony

I want to call a custom block inside an overwritten theme-block:
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}
The imagePreview is not shown.
But it is working when I don't use a block.
And it is also working when I dont use a FormTypeExtension and create an ImageType instead.
So I guess the file_widgetblock still has the scope of the parent form_div_layout.html.twig and there in fact no imagePreview block exists.
So how can I solve this.
I mean now I solved it by removing the block.
But I just want to know if someone has a solution to this.
Maybe there is a way for using reuseable blocks inside of custom form themes in symfony?
Finally I found the solution:
I just did not 'use' the base template explicit.
The form theme worked without this - because symfony falls back the the base form theme when it does not find a block inside the new theme file.
But it seems then you also can not use custom blocks inside this new theme file.
So this works now:
{% use 'form_div_layout.html.twig' %}
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}

Slice Twig path

I would like to delete the first occurrence of '/' in my twig path. I need it to show image in my pdf. I don't know how to deal with it and need help from someone smarter.
<p>{% path(project.mainImage), 'reference' %}</p>
Gives me:
/upload/media/img/a6ab300301dd8e5de89bac068a16aaa9e90b2a1b.jpeg
I need:
upload/media/img/a6ab300301dd8e5de89bac068a16aaa9e90b2a1b.jpeg
Ok guys, I am just stupid.
Here is the answer:
{% set rendered %}{% path project.mainImage, 'reference' %}{% endset %}
<img src="{{ rendered|replace({'/upload':'upload'}) }}">
Works like a charm.
You could use the slice Twig filter, like this:
{% set rendered %}{% path project.mainImage, 'reference' %}{% endset %}
<img src="{{ rendered|slice(1) }}">
UPDATE:
And if you only want to do it on routes starting with /, you could do like this:
{% set rendered %}{% path project.mainImage, 'reference' %}{% endset %}
{% if rendered|slice(1) == '/' %}
<img src="{{ rendered|slice(1) }}">
{% else %}
<img src="{{ rendered }}">
{% endif %}

Using Twig in Symfony 2: Translation inside an embeded block does not work

I am using Twig inside my Symfony 2 WebApp project. I use {% embed SomeTamplate %} to include the content of one template file in another. This workes fine, but translation is not working inside the embedded file.
Page Template:
{% extends 'AppBundle::layout.html.twig' %}
{% trans_default_domain mypages' %}
1: {{ 'pages.home.sometext'|trans }}
{% embed "block.html.twig" with {'classes': 'homepage-hero'} %}
{% block content %}
2: {{ 'pages.home.sometext'|trans }}
{% endblock %}
{% endembed %}
{% embed "block.html.twig" with {'classes': 'red-bg'} %}
{% block content %}
3: {{ 'pages.home.sometext'|trans }}
{% endblock %}
{% endembed %}
Block template:
{% trans_default_domain mypages' %}
<div class="full-width-block{% if classes is defined %} {{ classes }}{% endif %}">
X: {{ 'pages.home.sometext'|trans }}
{% block content %}
{% endblock %}
</div>
Output:
1: SomeText
X: SomeText
2: pages.home.sometext
X: SomeText
3: pages.home.sometext
So: While the translation works fine within the two template files, the same text constant within the embedded block, is not translated. How can I fix this?
the domain must be enclosed in quotes, just put the last quotation mark.
Visit http://symfony.com/doc/current/book/translation.html
Put it this way:
{% trans_default_domain "mypages" %}
I hope your problem is solved

Is it possible to do some sort of implicit loop with Twigs `{% image %}` to return all images in the directory?

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 %}

Assetic image filter and localized resources

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?

Resources