I know if using the file upload option you can get the image size to be whatever you specify with imageWidth / imageHeight and there's options of cropping and such.

But I have a large image (for a page banner), which I want to be selected from the media, and the file url be saved to the database. The image being rendered in the backend form is way too big though. (It is a background image and cropped for the banner where it is displayed in the frontend). Changing the width value seems to change how wide the image is but the height is just the full image height. I tried adding the crop mode as you can for file uploads, but it seemingly has no effect.

Is there a way to do this that I am missing, or am I going to try and add a css class to the section and hack together some rules for this particular backend form?

Thanks

Did you check the documentation for mediafinder formwidget ?

https://octobercms.com/docs/backend/forms#widget-mediafinder

There is an imageWidth / imageHeight property as for the fileupload formwidget

Last updated 4 years ago

Bumping this.....I'm back working on this project again, it was put on hold through the Covid crisis.....

So I am using the imageWidth & imageHeight values. The image will scale according to the width, but it doesn't crop to the specified height.

This image is just a background image for a banner, so it is overly sized. The css takes care of the height of the banner in the front end, and I need to try and replicate the banner dimensions in the backend.

I tried using the thumbOptions settings which works only for the file upload field type, whereas this is a media finder field type.

So I'm guessing the only way I can achieve this cropping of the media finder image is going to have to be done by some custom backend css.

The code that uses these is here... so the imageHeight is not used if imageWidth is not set to zero:

https://github.com/octobercms/october/blob/develop/modules/backend/formwidgets/mediafinder/assets/js/mediafinder.js#L46-L52

And it's not setting the CSS width/height properties but maxWidth/maxHeight ...

mjauvin said:

The code that uses these is here... so the imageHeight is not used if imageWidth is not set to zero:

https://github.com/octobercms/october/blob/develop/modules/backend/formwidgets/mediafinder/assets/js/mediafinder.js#L46-L52

And it's not setting the CSS width/height properties but maxWidth/maxHeight ...

Thanks for this mate. Never thought to just try the height option alone and that indeed crops the image to a reasonable height now. The crop and offset settings don't appear to do anything so the alignment of the image doesn't marry up with the front end, but that's not the end of the world.

You can also use the cssClass and atributes field properties to help style any field, in case you didn't know.

ref. https://octobercms.com/docs/backend/forms#form-field-options