How to save image sizes in Mailchimp templates

I am creating a newsletter template in Mailchimp. The template contains a repeatable section with an image with a size prefix. For some reason, it separates the width = "and height =" "values ​​from the img element and only includes them if you manually set them in the image settings for each image. This means that if the user loads an image of a different size and If you don’t enter the correct sizes manually, then in Outlook the image is displayed as full size.

To make it less user friendly in the design editor, he uses CSS / width / height styles to show what size the image is, so he says (for example) 350px wide at 234px tall and you can upload a much larger image and it shows it with a width of 350 pixels (which will make the user think that this is correct). However, it does not include the html img width / height values ​​unless you manually specified them, which means that the image size is incorrect in Outlook.

Does anyone know to make the html variable width automatically be included in the img element anyway? Otherwise, users need to manually set the same width / height for each image manually, and if they forget, it will not display correctly in Outlook?

Thanks,

Dave

+5
source share
2 answers

For other links, I now spoke with mailchimp and using a combination of the code https://www.snip2code.com/Snippet/25348/HTML-Email-Template--max-width-hack-for- (below) and max-width / Values max-height css for img fix the problem in Outlook:

<!--[if (gte mso 9)|(IE)]> <center> <table> <tr> <td width="600"> <![endif]--> <div style="max-width: 600px; margin: 0 auto;"> <p>This text will be centered and constrained to 600 pixels even on Outlook which does not support max-width CSS</p> </div> <!--[if mso]> </td> </tr> </table> </center> <![endif]--> 
+2
source

To get around this problem, you must have the maximum width indicated on the actual image itself and make sure that it is embedded in the tag as follows:

 <img mc:edit="image" src="image.jpg" width="200" style="max-width:200px;"> 

This does not count if it is included in the CSS in the head.

With the markup above the MailChimp editor, width = "200" is added AFTER the user edits the image. But if the user does not edit the image, then, unfortunately, the width is not added, so the corrections described above would be worth a try.

+1
source

All Articles