Resize images from (image: ) tag

Hey everyone!

So, recently I’ve had the problem that people have been adding images to fields using the (image: ) tag (using the panel), but have not bothered optimising or resizing them beforehand. (And also don’t really know how they would go about doing that, since they don’t have the technical understanding.) So, as an example, we’ve regularly had posters that were uploaded with 4000px width, which are only shown at around 500px width.

So, I know that I can resize images using thumbs and all that good stuff for which I have a specific path. (Which I don’t have, when I just echo the contents of a field, which includes text as well as imagery.) Is there any way to define that all images inside a specific field (or specific div or on a specific page or whatever) are just downsized to a certain width? Or is there any way to crop images automatically on upload? (While I would probably prefer the first option.)

I don’t really want to include a specific class for each image, since that just adds one layer of complexity for users that don’t really have a lot of technical understanding in the first place.

Of course, a fully responsive option (different sizes for different viewports) would be even better, but for now, this would be all I really need.

I hope that makes some kind of sense. Maybe I’m also just missing something really obvious.

Any ideas?

Thanks for your help!

  • david.

First idea that comes to mind is using panel.file.upload hook that checks the size of an image and resizes it if it is too big.