Request smaller featured image sizes from CMS Blog Post APISOLVE
Sep 9, 2019 5:54 PM - edited Sep 9, 2019 5:54 PM
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:
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:
But with hubspot cdn, this doesn't work, I cannot make this image 500px wide:
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!
Solved! Go to Solution.
Sep 11, 2019 5:49 PM
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">
<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:
For images hosted on a custom domain, you might need to change from this:
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:
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 ScanlanHubSpot Developer Support