Twig link to *.jpg in page folder

Hello, is possibile to set twig as he take automatically the *.jpg file I have uploaded?

actually I use this in twig template:

<img src="{{['news.jpg'].url }}" class="img-responsive ">

but whit this expression I can only upload file named “news”…


Hi @msa, might something like this work (untested)?

{{|first }}

Let me know how it goes.

thanks for help, but if I change from this:

<div class="column col-xs-12 col-4 p-2"><img src="{{['news.jpg'].url }}" class="img-responsive "></div>

to this:

<div class="column col-xs-12 col-4 p-2">{{|first }}</div>

I see the image, but I loose the class. How I can add the class to twig? thanks!

Hi @msa, to be honest I am not sure why that would be the case. Using a div with that Twig looks to be a-ok: Responsive images in twig

Sorry, my CSS knowledge is pretty limited.

I’ve tryed various combination… but no success…

<div class="column col-xs-12 col-4 p-2">{{|first.addClass('img-responsive') }}</div>


<div class="column col-xs-12 col-4 p-2">{{'img-responsive')|first}}</div>

I do a test with other twig function:

<div class="column col-xs-12 col-4 p-2">{{|first.cropZoom(600,200).html() }}</div>

and this correctly crop the image… but I need the responsive class, not crop.


{% block content %}
<div class="wrapper-extra">
	<div class="columns">

		{% set image =|first %}
	    {% if image %}
	    <div class="column col-xs-12 col-4 p-2">
	        <img src="{{ image.url }}" class="img-responsive">
	    {% endif %}

	  <div class="column col-xs-12 col-8 p-2 text-justify">
	  	<h1>{{ page.title }}</h1>
	  	{{ content }}</div>

{% endblock %}

1 Like