React resize_image_url()

Develop, Build & Integrate CMS Development
1

Is there a pendant to resize_image_url() for React directly?

Because Breeze is 100% sure, that if I only add ?width=200 to the url of the Image. Hubspot will resize it. But this is not the case. Is there any other posibillity except HublData?

Thanks a lot.

2

Hi @DMarketing328,
Thank you for posting to the Community!
I’d like to tag in some Subject Experts to see if they can offer any guidance here -- Hi @miljkovicmisa @MBERARD and @Indra Do any of you have any tips for @DMarketing328?
Thank you!
Cassie, Community Manager

3

Hi @DMarketing328,

The width parameter actually works but there is one important caveat.

Usually / by default, the image will get served with this url:

yourwebsite.com/hubfs/some-directory/your-image.png

The “hubfs” needs to have “/hs-fs/” right before for the width parameter to work:

yourwebsite.com/hs-fs/hubfs/some-directory/your-image.png

Hope this helps!

4

Thanks a lot, this works perfectly. In the url.

It’s strange that this option isn’t available directly in the image field. Or did I misconfigure something?
Also it’s not working if i rewrite the src url. Becaus now it takes the url of the Hubspot CDN and not the url from my domain.

5

I don’t think it’s misconfiguration, it’s just not an obvious “setting”.

When an image module is used and the Size control is left as “Automatically adjust”, then the image seems to be consistently served with only “/hubfs/” but when then size is specified, the URL automatically changes to “/hs-fs/hubfs/”

160653i2BDFB5D49F83192B.png
160653i2BDFB5D49F83192B.png375×183 9.77 KB

This should also apply regardless of whether the image is served on the CDN or domain, as the url path (i.e. “/hubfs/”) appears to be the same.

6

Greetings @DMarketing328,

There is no direct React or JavaScript equivalent to resize_image_url().

The function is server-side only, part of the HubL templating engine.

Adding ?width=200 or ?resized=… only works for certain HubSpot-hosted image URLs (those served from the HubSpot File CDN with specific patterns like f.hubspotusercontent), and even then, not always consistently, it depends on the file source and CDN version.

In a React app, unless HubSpot provides an image resizing endpoint, you can’t force HubSpot’s CDN to resize it just by adding query params.

So possibly within a HubSpot theme/module, wrap your React component in a HubL template so the URL can be pre-resized server-side via resize_image_url().

Hope this helps, if it does then help the community by marking it as a solution and giving a upvote.
Happy HubSpotting.
Thanks & Regards,
Dilshad Shaikh