Cropping an image by URL

I have a string of a relative path to an image (/img/uploads/test.jpg) that was set in my front matter through Netlify CMS. How do convert it to an image object like on so I can crop it to a certain size?

My backup plan is “cropping” in the frontend with CSS. But for performance reasons, I’d obviously prefer cropping on page generation.

To do image processing you can either

(1) save the image under the assets folder, or

(2) save the image in the same page bundle as your content

Hmm… I’m not familiar enough with Hugo yet to tell if one of these options is compatible with a Netlify CMS workflow.

Basically, I’d like to give people a way to create content types from the admin. Let’s say they’re blog posts. For each post they create, Netlify CMS ensures a Markdown file is created in my content folder according to a data scheme of front matter attributes that I can define. Say I’d define an image attribute titled topPicture in the data scheme in Netlify CMS’ configuration. When someone creates a post and attaches a top picture, Netlify CMS will know to save the file in an asset folder I configured and set topPicture to /my-image-upload-directory/filename.jpg in the front matter of the newly created Markdown file.

Do you see a way in which I could apply image processing operations on images uploaded through Netlify CMS?

And I’ve never used Netlify CMS so I’m no help there. Maybe someone else with experience in that can help you