Request smaller featured image sizes from CMS Blog Post API

Developer Support APIs & Integrations
,
1

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: Teaming up to build a more positive culture in youth sports - inCourage
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_request78
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

2

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.

3

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';
4

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

5

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..