CMS Development

Jere
Contributeur

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 Votes
7 Réponses
milesofsmiles
Membre

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

Also running into a dead end on this issue. Missing height and width attributes on all my images is flagged as a moderate SEO issue by Bright Edge.

0 Votes
GLimare
Participant

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

Hello, any chance this gets prioritized?
Thank you.

0 Votes
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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

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

0 Votes
Jere
Contributeur

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 Votes
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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 😀

0 Votes
Jere
Contributeur

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 Votes
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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? 

 

0 Votes