Twig link to *.jpg in page folder

Support Content & Markdown
1

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="{{ page.media['news.jpg'].url }}" class="img-responsive ">

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

thanks

2

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

{{ page.media.images|first }}

Let me know how it goes.
Paul

3

thanks for help, but if I change from this:

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

to this:

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

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

4

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.

5

I’ve tryed various combination… but no success…

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

and

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

I do a test with other twig function:

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

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

6

Solved!

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

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

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

{% endblock %}

1 Like