HubSpot Ideas

ayrtonwebs

Featured image resizing through the the file UR

Today when we put one of our clients' HubSpot blog through the website grader, we saw that the blog had a page size of 13mb. The problem was that the images they we're uploading as the featured image were large images (3000x3000px+). We quickly figured out that we could resize the original image by adding and specifying a width attribute to the <img> tag. This process changed the page size from 13mb to 1.8mb.

 

I have two examples here: http://cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg... http://cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg... The first one resizes (crops) the image to a 300px width, and the second image it's resized (cropped) to a 500px width.

 

I got this back from support: 

"looked into this and it does have to do with the url structure and our ability to intercept the request before our content delivery network receives it. With how these tokens grab the url of an image, we can not manually resize them.

 

Using the default CDN host, http://cdn2.hubspot.net/hubfs/53/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761 needs to be changed to http://cdn2.hubspot.net/hub/53/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761"

 

Because we are using the featured image tag, {{ content.post_list_summary_featured_image }}, we can't edit the URL to include the "/hub/"-part. Is it possible to implement that on the featured image url as a standard so we can specify the width in the url on future blogs?

7 Replies
ndwilliams3
Key Advisor

We had the same problem with our blog. Sometimes the images were uploaded with huge resolutions. I noticed images that were resized had "hs-fs/hubfs" in the path vs "hubfs" In the listing template, I used this to modify the path.

{{ content.post_list_summary_featured_image|replace('hubfs','hs-fs/hubfs') }}?width=1139

Works great now! No images larger than 1139px on the listing.

ayrtonwebs
Member | Elite Partner

@ndwilliams3 Thank you for your reply. Unfortunately your solution isn't working. 

{{ content.post_list_summary_featured_image }}

Outputs this URL: https://cdn2.hubspot.net/hubfs/2998086/test/giovanni-calia-796.jpg.

{{ content.post_list_summary_featured_image|replace('hubfs','hs-fs/hubfs') }}?width=1139

Somehow, when I literally copy & paste the syntax into the blog template it reads out an URL, https://cdn2.hubspot.net/hs-fs/hubfs/2998086/test/giovanni-calia-796.jpg?width=1139, which doesn't work. Am I missing something here?

I even tried to change the url manually from Outputs this URL: https://cdn2.hubspot.net/hubfs/2998086/test/giovanni-calia-796.jpg to output this URL: https://cdn2.hubspot.net/hs-fs/hubfs/2998086/test/giovanni-calia-796.jpg, but it keeps returning a small transparent square.

ndwilliams3
Key Advisor

based on your original example, it looks like the url structure may be different when using the default CDN domain (https://cdn2.hubspot.net). we're using our domain.

 

Original:

https://cdn2.hubspot.net/hubfs/2998086/test/giovanni-calia-796.jpg

What it needs to be:

https://cdn2.hubspot.net/hub/2998086/hubfs/test/giovanni-calia-796.jpg?width=1139

 

 This should work:

{{ content.post_list_summary_featured_image|replace('hubfs/2998086','hub/2998086/hubfs') }}?width=1139   

 

ayrtonwebs
Member | Elite Partner

@ndwilliams3 Your solution is working like a charm, thank you for your help!

donnhill
Member | Platinum Partner

I think a better way of doing this is to use the "resize-image-url" function in HUBL.

Used like so...

{{ resize_image_url(content.post_list_summary_featured_image, 1139 ) }}

It will resize the image to a width of 1139px exactly.

This will resize a 13mb image to a 25kb image. 

aaronbieber
Member

@donnhill that is a great solution, which worked perfectly for me in the HubL code for my custom module. Thanks!

jmclaren
HubSpot Employee

Hey guys, 

When it comes to resizing images you can do this using the resize_image_url() HubL function. Thank you Donnhill for pointing it out.

This is a lot more safe than modifying the urls using |replace.

The resize image url function also properly handles the domain issue for you.

If you have any questions feel free to reply 🙂