1

We are switching to use Mailjet API for sending emails. One problem we are facing right now: We are using apache velocity template for html body where we give image url in src tag in html. But we have different image for desktop, mobile/ipad for obvious reasons (image size etc.)

How can we determine when email is rendered on client's device which banner to be rendered. Does mailjet have any switch image functionality?

Thanks in advance.

SANKALP sharma
  • 81
  • 8

1 Answers1

2

If you need to swap an image, and not just downscale it (style="width:100%;height:auto;"), the responsive way of doing it is as follows:

Add this to your <head> section:

<style>
    @media screen and (max-width:620px) {
        .image_mobile {
            display:block!important; max-height: none !important; max-width:none !important; line-height: 1.5 !important;width:100%!important; height:auto!important;
        }
        .hide {
            display:none!important; width:0px!important; height: 0px!important; overflow:hidden!important; line-height: 0px!important; font-size:0px!important;
        }
    }
</style>

And put this in your content:

<img border="0" width="xxx" src="xxx" alt="xxx" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;width:100%;height:auto;" class="hide">
<!--[if mso]><!-->
<div style="display:none; font-size:0; line-height:0;  max-height: 0; max-width: 0; width:0;" class="image_mobile">
    <img border="0" width="xxx" src="xxx" alt="xxx" style="display:none; font-size:0; line-height:0;max-height: 0; max-width: 0; width:0; -ms-interpolation-mode: bicubic;" class="image_mobile">
</div>
<!--<![endif]-->

The first image will show by default (desktops; webmail; those who don't support @media). But most mobile apps will support @media and will therefore hide the first image, and display the second.

(Thus, it's not a function of Mailjet, but your code)

Nathan
  • 4,358
  • 2
  • 10
  • 26