Request smaller featured image sizes from CMS Blog Post API

SOLVE
Occasional Contributor

Hi all! 

We have a Wordpress site with a Hubspot blog. We've created a hubspot blog post importer plugin on the Wordpress site to output blog cards on the website's homepage here: https://www.incourage.com/#from-the-blog

The plugin relies on the get blog posts method of the hubspot blog API https://developers.hubspot.com/docs/methods/blogv2/get_blog_posts

Currently, it pulls the raw uploaded image before any compression. So if an admin adds 10MB images, we end up with 60MB in download requests.

You can see the waterfall of those requests here where hubspot cdn is adding 40 seconds of load time to the page here: 
https://www.webpagetest.org/result/190909_WK_95d0b2a4fc0a94fcfc142d60317ba652/1/details/#step1_reque...

When I load an image directly on the blog, I can add ?width=500 to generate a cached, smaller version of the image. I can make this image 500px wide:
https://teamblog.incourage.com/hs-fs/hubfs/InCourage_Personal_Coach.png?width=500

But with hubspot cdn, this doesn't work, I cannot make this image 500px wide:
https://cdn2.hubspot.net/hubfs/5726364/InCourage_Parents-2.png?width=500

I can not find anything in the above docs about requesting image dimensions or sizes. Am I missing something? Any advice would be greatly appreciated!

 

Thanks! 

Jim

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
HubSpot Moderator

Hi @jimthornton,

 

I'll give a little background on how our image resizing process works. For automatic resizing on our CMS, the HubSpot CMS basically looks for height and width attributes on <img> tags. So an image like:

 

<img src="//cdn2.hubspot.net/hub/53/file-2661651770-jpg/7K0A6113-2-1.jpg" width="500">

...would become:

 

<img src="//cdn2.hubspot.net/hub/53/file-2661651770-jpg/7K0A6113-2-1.jpg?width=500" width="500">

And that's similar to what you're seeing in your first image hosted on teamblog.incourage.com: https://teamblog.incourage.com/hs-fs/hubfs/InCourage_Personal_Coach.png?width=500, where the width is appended in a query string to the file URL. The CMS is basically intercepting the request from the File Manager CDN, and then it can use the resizing service to resize the image instead of serving up the original file.

 

For files hosted in the File Manager (whether hosted on a custom domain like teamblog.incourage.com or on a default domain like cdn2.hubspot.net), those files can be resized if you use the proper URL structure. I'm not entirely sure why it was done this way, but I think it has to do with how our service is able to intercept requests from the CDN. So for images hosted on the default cdn2 domain, you'd need to adjust a URL from this:

 

http://cdn2.hubspot.net/hubfs/53/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

...to this:

 

http://cdn2.hubspot.net/hub/53/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

For images hosted on a custom domain, you might need to change from this:

 

http://blog.hubspot.com/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

to this:

 

http://blog.hubspot.com/hs-fs/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

And ^that structure matches what you're seeing for your file where the image resizing was done. In the case of your non-resized image, you'll need to change your original URL from:

 

https://cdn2.hubspot.net/hubfs/5726364/InCourage_Parents-2.png?width=500

...to:

 

https://cdn2.hubspot.net/hub/5726364/hubfs/InCourage_Parents-2.png?width=500

It will take a little longer to load the image the first time you're loading a new image size, since the image resizing process needs to run. But then it caches the newly resized image, so it will load faster from then on.

 

It sounds like you're using a plugin to pull content from HubSpot over to WordPress. Is it possible for you to edit the plugin so that it changes the URL structure of those images to follow that new format? That should enable the image resizing to work for you.

 

I'll see if we can get this documented a bit more formally. But for now, let me know if you have any questions.

 

Leland Scanlan

HubSpot Developer Support
4 Replies 4
Highlighted
HubSpot Moderator

Hi @jimthornton,

 

I'll give a little background on how our image resizing process works. For automatic resizing on our CMS, the HubSpot CMS basically looks for height and width attributes on <img> tags. So an image like:

 

<img src="//cdn2.hubspot.net/hub/53/file-2661651770-jpg/7K0A6113-2-1.jpg" width="500">

...would become:

 

<img src="//cdn2.hubspot.net/hub/53/file-2661651770-jpg/7K0A6113-2-1.jpg?width=500" width="500">

And that's similar to what you're seeing in your first image hosted on teamblog.incourage.com: https://teamblog.incourage.com/hs-fs/hubfs/InCourage_Personal_Coach.png?width=500, where the width is appended in a query string to the file URL. The CMS is basically intercepting the request from the File Manager CDN, and then it can use the resizing service to resize the image instead of serving up the original file.

 

For files hosted in the File Manager (whether hosted on a custom domain like teamblog.incourage.com or on a default domain like cdn2.hubspot.net), those files can be resized if you use the proper URL structure. I'm not entirely sure why it was done this way, but I think it has to do with how our service is able to intercept requests from the CDN. So for images hosted on the default cdn2 domain, you'd need to adjust a URL from this:

 

http://cdn2.hubspot.net/hubfs/53/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

...to this:

 

http://cdn2.hubspot.net/hub/53/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

For images hosted on a custom domain, you might need to change from this:

 

http://blog.hubspot.com/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

to this:

 

http://blog.hubspot.com/hs-fs/hubfs/00-Blog_Thinkstock_Images/hubspot-15k.png?width=761

And ^that structure matches what you're seeing for your file where the image resizing was done. In the case of your non-resized image, you'll need to change your original URL from:

 

https://cdn2.hubspot.net/hubfs/5726364/InCourage_Parents-2.png?width=500

...to:

 

https://cdn2.hubspot.net/hub/5726364/hubfs/InCourage_Parents-2.png?width=500

It will take a little longer to load the image the first time you're loading a new image size, since the image resizing process needs to run. But then it caches the newly resized image, so it will load faster from then on.

 

It sounds like you're using a plugin to pull content from HubSpot over to WordPress. Is it possible for you to edit the plugin so that it changes the URL structure of those images to follow that new format? That should enable the image resizing to work for you.

 

I'll see if we can get this documented a bit more formally. But for now, let me know if you have any questions.

 

Leland Scanlan

HubSpot Developer Support
Occasional Contributor

Thanks Leland,

 

It's working well. From 27MB to 2.7MB and 49s to 6s for doc complete!

 

The plugin developer, Morphatic, shared their string replace regex (php) for our URL structure change:

 

$ft_img = preg_replace('~(.*?)hubfs/(\d+?)(/.*)~', '$1hub/$2/hubfs$3', $ft_img );
$ft_img .= '?width=500';

 

Reply
0 Upvotes
HubSpot Moderator

That's great, Jim! Thank you also for posting the regex.

Leland Scanlan

HubSpot Developer Support
Reply
0 Upvotes
Occasional Contributor

No prob and thanks again for your solution.

I got another commnuity badge out of posting that first reply. So with one post and one reply I now have 83 hubspot badges. Maybe 85 if there is a badge for posting a second reply and starting a two day reply streak..