Resize image from frontmatter / page header

1

myfiles.md

myfiles:
- header:
  text:
  image: this is the image url 
  imagealt:

myfiles.html.twig

{% for myfile in page.header.myfiles %}
    {% if myfile.header %}
        <h4>{{ myfile.header }}</h4> 
    {% endif %} 
    {% if myfile.image %}
        <img class="my-image" src="{{ myfile.image }}"> 
    {% endif %} 
    {% if myfile.text %}
        <p>{{ myfile.text }}</p>
    {% endif %}
{% endfor %}

This works in that it’s showing all the images, but how can I automatically resize them all?
I’ve tried several things

<img class="my-image" src="{{ myfile.image.cropResize(200,200) }">

doesn’t work. Nor do any of the page.media things I’ve tried.

I’d like to put all images in hi-res in one folder (per category), and then have Grav resize (and hopefully cache?) them for every page. (So I don’t have to manually resize anything).

2

hi @hwk123

With filename in the frontmatter

myfiles:
    -
        header: header
        text: text
        imagename: banner2.png
        imagealt: imagealt

and twig

{% for myfile in page.header.myfiles %}
    {% if myfile.header %}
        <h4>{{ myfile.header }}</h4>
    {% endif %}
    {% if myfile.image %}
		{% set crop_image_url = page.media[myfile.imagename].cropResize(200, 200).url() %}
		<img class="my-image" src="{{ crop_image_url }}">
    {% endif %}
    {% if myfile.text %}
        <p>{{ myfile.text }}</p>
    {% endif %}
{% endfor %}

Hope that help

3

Thank you @dimitrilongo !
Images are not yet showing up, but the “some text” in the below example does show up.
I put the images in user/pages/01.pagename/images - so the code below should be correct?

{% if myfile.imagename %}
	{% set crop_image_url = page.find('/images').media[myfile.imagename].cropResize(200, 200).url() %}
	<img class="my-image" src="{{ crop_image_url }}">
            <p>some text</p>
{% endif %}

Edit:

It’s a modular page actually, I copied all images to several folders, because I’m not really sure where I should put them for page.media to work?

I’ve got images in :

  • /user/pages/01.pagename/
  • /user/pages/01.pagename/images
  • /user/pages/01.pagename/_modulename/
  • /user/pages/01.pagename/_modulename/images

Still no images are showing up…

When I log in to the Admin Panel, they DO show up as images under Page Media… (I’m guessing these are the images in this folder - /user/pages/01.pagename/_modulename/ )

4

Update: fixed.

I added

<p>the image {{ dump(page.media[myfile.imagename].url() ) }}</p>

and the URL it spit out was the correct one for most images, but “null” for some others.
After some more tweaking I’ve found the problem:
As soon as I save the PNG images to JPG, dimitrilongo’s code solution is working perfectly fine.