Automatic srcset generation with width and height also overwrites sizes attribute

Develop, Build & Integrate CMS Development
1

Hi, I am currently optimizing image loading for our site. For that I am providing the width and height, so that Hubspot can automatically generate the srcset value.
But I noticed that it also overwrites the sizes value I set, which makes me unable to provide the right size for the right source to load on different screen sizes. Did I understand something wrong or is this an issue with Hubspot?
An example:

<img
src={image.src}
alt={image.alt}
width={image.width}
height={image.height}
class="my-image"
sizes="(min-width: 768px) 50vw, 100vw"
/>

Here the image is using the my-image class to for example be full width on mobile and then half width on tablets. I would like to reflect this in the sizes attribute for loading the right source on startup. Hubspot generates the right srcset options but also overwrites my sizes and says the image is always full width up to its native size:

sizes="(min-width: 1500px) 1500px, 100vw"

(This is the overwritten output if image.width is 1500)

Thanks for any help

2

Hey there!

You’re on the right track—HubSpot does automatically generate a srcset (and a default sizes) whenever you use its built-in image module or the image_tag/img_url filters with explicit width and height. By design, it assumes “full-width up to the image’s native size” unless you tell it otherwise. That’s why you’re seeing:

sizes=“(min-width: 1500px) 1500px, 100vw”

even though you’d prefer:

sizes=“(min-width: 768px) 50vw, 100vw”

Here are two ways to regain control over your sizes attribute:

1. Use the HubL image_tag (or img_url + img_srcset) with a manual sizes override

Instead of dropping a plain <img> in your template, leverage HubL’s image filters and pass your own sizes. For example, if you have an image object in a module or a context variable called image, do this:

{{ image.src | img_url(width=image.width, height=image.height) | img_srcset(max_width=image.width) | img_sizes( “(min-width: 768px) 50vw, 100vw” ) }} <img src=“{{ image.src|img_url(image.width, image.height) }}” srcset=“{{ image.src | img_url(image.width, image.height) | img_srcset(image.width) }}” sizes=“(min-width: 768px) 50vw, 100vw” width=“{{ image.width }}” height=“{{ image.height }}” class=“my-image” alt=“{{ image.alt }}” >

Or more succinctly with image_tag:

{{ image | image_tag( class=“my-image”, width=image.width, height=image.height, sizes=“(min-width: 768px) 50vw, 100vw” ) }}

What’s happening here?

  • img_url(…) generates the URL at the specified dimensions.
  • img_srcset(…) builds a full srcset up to your max width.
  • sizes=“…” stays exactly what you type in.

This way, HubSpot won’t stomp your sizes because you’re fully in charge of the HTML it spits out.

2. Build a tiny custom module with a “Custom Sizes” toggle

If you’re using the drag-and-drop Image module in the Design Manager:

  1. Clone the core Image module.
  2. In its module.json, add a field:

“name”: “custom_sizes”, “label”: “Sizes attribute”, “type”: “text”, “help_text”: “Enter your sizes, e.g. “(min-width:768px) 50vw, 100vw”.”, “default”: “(min-width:768px) 50vw, 100vw” }

  1. In the module’s markup:

<img src=“{{ module.image.src }}” srcset=“{{ module.image.src|img_srcset(module.image.width) }}” sizes=“{{ module.custom_sizes }}” width=“{{ module.image.width }}” height=“{{ module.image.height }}” class=“{{ module.css_class }}” alt=“{{ module.image.alt }}” >

  1. Publish and swap your page’s image module for this customized version.

Now every time you drop an image in your page, you get a settings field for “Sizes attribute” that never gets overwritten by HubSpot defaults.

Let me know if this helps, or if you have any other questions!

:check_mark: Was I able to help answer your question? Help the community by marking it as a solution.

200×200 7.52 KB
Brandon Woodruff
Senior Software Developer @ PearagonStill have questions? Reach out at brandon@pearagon.com
3

Unfortunately I can’t find the filters you provided in the reference. They return an empty string for me.

4

Hey @BarryGrennan @Anton so you have any other suggestions for @Maffis? Thank you! — Jaycee