The default "Image" module doesn't add height and width attributes to HTML

[Jere]

The default "Image" module is not adding image width and height to be part of my HTML. How could I add that behaviour? Shouldn't it be part of it already,  especially as HubSpot needs the height and width attribute for automatic image resizing? (as mentioned here: https://knowledge.hubspot.com/files/automatic-image-resizing-on-hubspot-content)

What the HTML looks like:

<img 
   src="...jpg"
   class="hs-image-widget"
   style="max-width: 100%; height: auto;"
   alt="..."
   title="..."
   loading="lazy"
>

And what it is missing: width="..." and height="..."

[GLimare]

Hello, any chance this gets prioritized?
Thank you.

[dennisedson]

@Adesignl , feel like jumping in here and helping out 😀

[Jere]

Hey @dennisedson and @Adesignl, would you have any update on this? 😄

[dennisedson]

@Jere ,

The default image module has a drop down option that allows the user to select the height and width as illustrated in this screen grab

This is similar to the image field you can use which would output something like this:

{% if module.image_field.src %}
	{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
	{% if module.image_field.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image_field.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="{{ module.image_field.max_width }}" height="{{ module.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
	{% endif %}
	 {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}

If you are looking to control the height and width from the backend and not allow the content editor control, you would want to combine this image field with the

resize_image_url function

Hope this helps you out a bit 😀

[Jere]

Hey @dennisedson, thanks for your reply!

So my options are to to either use exact width and height (I'm not a fan of that), or a custom module? I would do a custom module but the site is already live with hundreds of images and it would take too long to switch every single image from the default image module that cannot be modified by a developer to a custom one.

I do feel like the default image module should already add the height and width to be part of the image HTML without any developer interference, especially as those are needed for generating the "srcset" attribute images for different device screen widths.

[dennisedson]

@Jere ,

Quality feedback!  I will mention it to the team.  Would you also be willing to create an idea for this and add the link back here?