Add crop functionality to the resize_image_url function.

tstrack

The resize_image_url function is quite handy for preventing users from adding images of an obscene size and reducing page weight. One idea to take it to the next level would be adding a crop parameter. Something like:

 

{{ resize_image_url("http://your.hubspot.site/hubfs/img.jpg", 300, 300, 300, crop=true) }}

 

would generate an image that's 300x300px.

5 Replies
jmclaren
HubSpot Employee

Question - would you want the crop parameter to just crop to the dimensions you specified or for you to be able to control the cropping in some way?

kierana
Contributor

To chime in here - I enjoyed working with Shopify's img_url filter. It was super straight forward.

https://www.shopify.co.uk/partners/blog/img-url-filter

 

Cropping:

{{ product.featured_image | img_url: '450x450', crop: 'center' }}

Additionally a pretty cool piece of functionality is the scale property (especialy for retina images)

{{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2 }}

Thanks

Kieran

 

 

 

tstrack
Contributor | Platinum Partner

A crop position would be great. X could get left, center, or right. Y could get top, center, or bottom. And defaulting to the center seems appropriate.

M0zz0
Participant | Diamond Partner

Yes! +1 on this, on how this should work, as an example, in Dato CMS, when you upload an image you can select the "focal point" so when you crop the image, the image is cropped automatically based on that focal point

M0zz0_0-1634722093200.png

 

HaavardB
Member | Partner

Why isn't this standard functionality?