CMS Development

Jere
Contributor

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

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)

 

Jere_0-1653574721746.png

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

0 Upvotes
5 Replies 5
dennisedson
Community Manager
Community Manager

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

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

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes
Jere
Contributor

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

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

0 Upvotes
dennisedson
Community Manager
Community Manager

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

@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

Edit_Page___ron.png

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 😀

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes
Jere
Contributor

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

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.

0 Upvotes
dennisedson
Community Manager
Community Manager

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

@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? 

 

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes