Email Image Module: Set Width on image placement

[robbn]

The out-of-the-box Email Image Module, when selecting an image, automatically sets the width attribute for the image to the maximum width available within a column, factoring in padding etc.

We needed to create our own version of the email image module.  I started with a clone of the OOTB module.  However, when an image is selected, the width attribute is set to the original image assets width.  Proper outlook display, and serving of appropriately sized images from the CDN (i believe) rely on this width attribute being appropriate to the available space.  I can trigger the width to adjust appropriately if I hit the down arrow on the width attribute, it forces HubSpot to correct this value the same way it does when an image is initially selected in the OOTB module.

This extra step, although "simple" is an ongoing issue for our email editors to remember to do each and every time they swap out an image.  Is it possible to have this width attribute calculate correctly every time an image is selected without any other user interaction?

[alyssamwilie · Accepted solution]

The code for this is written in the fields.json file of the module which can only be accessed in a local development environment, not in the Design Manager. Likely cloning such module in the Design Manager causes those instructions to be overwritten since the Design Manager isn't aware of them.

You can do something similar in the Design Manager it just removes some options on the front-end.

In the image field you would want to set Available size options to "Do not show controls". This will remove the width and height controls. You can leave them showing and the next step will still re-size the image, but the fields will not update with the re-sized values.

Then edit the linked_image tag to set size_type to "auto_custom_max" and the max_width to whatever you want the max width of the image to be.

{% linked_image
    label="Linked Image",
    src='{{ module.img.src }}',
    alt='{{ module.img.alt }}',
    width='{{ module.img.width }}',
    height='{{ module.img.height }}',
    link='{{ link }}',
    target='{{ target }}',
    open_in_new_tab='{{ target }}',
    size_type='auto_custom_max',
    max_width='520',
    loading='{{ loadingAttr }}'
%}

[robbn]

Thank you for the response.

Unfortunately, and oddly enough -- we cannot get to the "image_email" module within the Design Manager (without a direct link provided by HubSpot support) nor can we fetch a local copy of it to investigate and potentially modify the fields.json file on our copy to function similarly.

The alternative solution you provided doesn't seem to write in any width attribute, which is important for email images.