May 26, 2022 10:22 AM - edited May 26, 2022 10:58 AM
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="..."
7 hours ago
Hello, any chance this gets prioritized?
Thank you.
May 27, 2022 1:30 PM
@Adesignl , feel like jumping in here and helping out 😀
May 30, 2022 9:10 AM
Hey @dennisedson and @Adesignl, would you have any update on this? 😄
Jun 1, 2022 10:46 AM
@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
Hope this helps you out a bit 😀
Jun 2, 2022 5:06 AM
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.
Jun 2, 2022 4:17 PM