Building Custom Image Cropper

Highlighted
New Contributor

Hello,

 

So I've built a template with image placeholders that have a max width and height as I want them to be perfect squares. The problem is when the marketing team goes to upload an image, Hubspot auto-crops, and the image is never centered.

 

I'd like to add a feature like this one in the code: https://codepen.io/qertis/pen/RNPXee?q=Crop%20image&limit=all&order=popularity&depth=everything&show...

 

Simply put, I want the marketing team to be able to choose where the image will be cropped during the upload process. I'm familiar with HTML, CSS & some JS, but I have no idea how to add a feature like this within Hubspot.

 

My ultimate goal is to make the marketing team's lives as easy as possible & for our images to no longer look silly.

 

Thank you in advance!

Best,

Virginia 

1 Reply 1
HubSpot Moderator

Hi @VHughes    Rather than trying to build a cropping/resizing into the template, a better bet would be to train your team to crop and resize the picture to your specified dimensions before placing them. 

 

We provide a robust set of cropping/resizing tools in the HubSpot file manager. If you are running Windows you can download GIMP to edit images, or use Pixlr online. Mac users can easily crop and resize using the Preview app (I've been using this for more than a decade). 

 

By perfecting your image prior to upload, you eliminate the risk of a web browser not reading your code correctly, and you also eliminate the possibility of increased load time due to photo processing issues.    

 

Basic cropping and resizing of images is a skill that all content creators should posses, so spending some time teaching this could add value down the road. 

 

Ed 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes