Email templates: freemarker, spring, outlook and images issue

Question

I've been struggling with email templates and images for quite a while now. I've successfully managed to make the images appear in the mail but they do not take the css into account.

Backend/Spring :

This is a simple Spring service used to send mails.

import org.springframework.mail.javamail.JavaMailSender;
import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;

    private JavaMailSender emailSender;

    @Autowired
    private Configuration freemarkerConfig;

public void sendResetPassword(Utilisateur utilisateur, String password) throws MessagingException {
        String title = messageService.getMessage("user.mail.resetpassword.title");
        String titleStrong = messageService.getMessage("user.mail.resetpassword.titleStrong");
        String logoImg = imgPath+"/mail/mail_password.png";

        Map<String, Object> templateVars = new HashMap<>();
        templateVars.put("subject", title + " " + titleStrong);
        templateVars.put("title", title);
        templateVars.put("logo",logoImg);
        templateVars.put("titleStrong", titleStrong);
        templateVars.put("password", password);

        String sendTo = "";
        for(String recep : mailService.getRecipientsFromString(utilisateur.getEmail())) {sendTo=recep;break;}

        this.sendMail("reset_password.html",templateVars,Arrays.asList(logoImg),sendTo,title+" "+titleStrong);
    }

    private void sendMail(String tmplName,Map<String,Object> vars,Collection<String> imgs,String recepient,String subject) {
        MimeMessageHelper messageHelper = this.getMailHelper();

        try {
            messageHelper.addTo(recepient);
            messageHelper.setSubject(subject);
            messageHelper.setFrom(from);
            messageHelper.setReplyTo(replyTo);
            this.initTemplateForGeneralInfos().entrySet().forEach(e -> vars.put(e.getKey(), e.getValue()));

            Template template = freemarkerConfig.getTemplate(tmplName, Locale.FRENCH, "UTF-8");
            String processedTemplate = FreeMarkerTemplateUtils.processTemplateIntoString(template, vars);
            messageHelper.setText(processedTemplate, true);
            globalImgs.forEach(str -> {
                try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
                    throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
                }
            });
            imgs.forEach(str -> {
                try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
                    throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
                }
            });

            messageHelper.addInline("globalLogo.png", new ClassPathResource(imgPath+"/logo/globalLogo.png"));
        } catch (IOException e) {
            throw new IllegalArgumentException("Template " + tmplName + " not found or unreadable", e);
        } catch (TemplateException e) {
            throw new IllegalArgumentException("Error while processing template " + tmplName, e);
        } catch (MessagingException e) {
            throw new IllegalArgumentException(e);
        }
        emailSender.send(messageHelper.getMimeMessage());
    }

HTML Template:

<#macro layout subject>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>${subject}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta content="width=device-width">
        <style type="text/css">
            /* Fonts and Content */
            body,
            td {
                font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
                font-size: 14px;
            }

            body {
                background-color: #F2F2F2;
                margin: 0;
                padding: 0;
                -webkit-text-size-adjust: none;
                -ms-text-size-adjust: none;
            }

            .highlight {
                color: #58CB7E;
                font-size: 22px;
            }

            .small {
                color: #9B9B9B;
                font-size: 12px
            }

            @media only screen and (max-width: 480px) {
                img {
                    height: auto;
                }
            }

            p {
                padding-bottom: 0.5em;
            }

            #body,
            #footer {
                background-color: white;
            }
        </style>

    </head>

    <body style="margin: 0px; padding: 0px; -webkit-text-size-adjust: none;">
        <table style="border-spacing: 0; margin:0 5em">
            <tbody>
                <tr>
                    <td><img id="logo" src="cid:globalLogo.png" style="display: block; margin: auto; padding: 50px 0;" /></td>
                </tr>
                <tr>
                    <td id="header" style="color: white;
    text-align: center;
    background-color: #92D051;
    color: white;
    padding-top: 15px;
    padding-bottom: 35px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 22px;">
                        <img src="cid:${logo}" style="display: block; margin: auto; padding: 30px 0;" />
                        <span>${title} <b style="text-transform: uppercase;">${titleStrong}</b></span>
                    </td>
                </tr>
                <tr>
                    <td id="body" style="font-size: 18px; padding: 1em 5em; background-color: white;">
                        <#nested />
                    </td>
                </tr>
                <tr>
                    <td id="ecos" style="justify-content: space-around; display: flex; padding-bottom: 20px;background-color: white;">
                        <#list globalImgs as source>
                            <img src="cid:${source}" style="height: 30px; padding: 0 1em;" />
                        </#list>
                    </td>
                </tr>
                <tr>
                    <td id="copyright" style="background-color: #273826;
    color: white;
    text-align: center;
    padding: 35px;
    letter-spacing: 1px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;">Company
                        &sdot; Copyright &copy; ${date?string.yyyy}</td>
                </tr>
            </tbody>
        </table>
    </body>

    </html>
</#macro>

So the problem is that with outlook ,the style doesn't seem to apply to the images. It works great with thunderbird however. So I guess Outlook is loading the images after the styles.. ? Do you guys have any information about this and do you have any fix for this issue?

Thank you!

Answer 1

Outlook ignores padding and margin applied to img .

The solution is to apply padding to the td surrounding the image.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td style="padding: 10px;">
      <img src="http://example.com/example.png" width="100" height="50" alt="" border="0">
    </td>
  </tr>
</table>

Good luck.

Email templates: freemarker, spring, outlook and images issue

Question

1 answers

solution1
0 2019-01-15 10:26:35

Email templates: freemarker, spring, outlook and images issue

Question

1 answers

solution1 0 2019-01-15 10:26:35

solution1
0 2019-01-15 10:26:35