Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Content & Markdown

Twig link to *.jpg in page folder

Started by Mat 7 years ago · 5 replies · 1748 views

7 years ago

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

actually I use this in twig template:

TWIG

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

but whit this expression I can only upload file named "news"...

thanks

7 years ago

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

TWIG

{{ page.media.images|first }}

Let me know how it goes.
Paul

7 years ago

@paulhibbitts:
images|first

thanks for help, but if I change from this:

HTML

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

to this:

HTML

<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!

7 years ago

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: /forum/themes-styling/responsive-images-in-twig-t7673

Sorry, my CSS knowledge is pretty limited.

7 years ago

I've tryed various combination... but no success..

HTML

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

and

HTML

<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:

HTML

<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.

7 years ago

Solved!

TWIG

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

Suggested topics

Topic	Replies	Views	Activity
Definition lists in Markdown extra not working Content & Markdown · by Jochen, 8 months ago	6	100	8 months ago
Theme PinPress: No 'about' on Dutch pages Content & Markdown · by Ton Haarmans, 1 year ago	10	187	1 year ago
Is it possible to make the sub-directories foldable in the menu? Content & Markdown · by Jan L'Am, 1 year ago	4	148	1 year ago
Delimiter doing the opposite Content & Markdown · by Leonardo, 1 year ago	3	63	1 year ago
New Installation - Navigation Menu and Table Styling Content & Markdown · by belthasar, 1 year ago	4	259	1 year ago