I'm following the guide here: https://octobercms.com/docs/backend/forms#form-fields where it says file_upload type image can be resize using imageWidth and imageHeight.

I noticed this creates a thumbnail version of the image instead of resizing the original, which is great, but I don't know how to reference it in a component view.

For the image I just do {{ image.path|app }}

What about the thumbnail?

{{ item.images[0].thumb(50,50,crop) }}
or
{{ item.images[0].thumb(100, auto) }}
images[0] - first image for this item

This above statement will not work. either it should be :

{{item.images[0].thumb(400,250,{'mode':'crop'})}}

or

{{item.images[0].thumb(400,250)}}

works perfect!!

Last updated 8 years ago

Thanks all...

Is it possible to reference the uploads folder for a problog Image and resize the image this way? Tried this but is not working.Any ideas?

src="{{ post.featured_images[0]['path'].thumb(120,75) }}"

Any help would be appreciated.

Firgured it out. Just had to take the reference to the path out like so...

src="{{ post.featured_images[0].thumb(120,75) }}"

And it works!

This one also worked for me:

<img src="{{ post.featured_images[0].thumb(400,250,'crop') }}">

It looks like the important thing is just the order, and that the mode is on single quotes. So, it's exactly the same thing as the following:

<img src="{{ post.featured_images[0].thumb(400, 250, {'mode' : 'crop'}) }}">

Best of luck!