How to display different hero image in email

Hi I am querying whether its possible to change the hero image as per desktop vs mobile? I know it can be done but can't seem to work it out. The most i've managed to do is to hide the image on desktop but reveal on mobile...

i think these guys do it brilliantly-

https://em.waitrose.com/pub/sf/ResponseForm?_ri_=X0Gzc2X%3DWQpglLjHJlYQGt3ceEeck4CsAUFoBGTuzcUKmAMpKCcU7hDaiVXMtX%3DWQpglLjHJlYQGiupza8Sy8zdzeMSiEXzbb3fnzbzbezf49P5iIvJSAu&_ei_=EqeN3rKttUcPWJkOIlm2KycOrKhEGM_c

And i'm hoping to reenact the same thing so I'm hoping someone can help?

Thanks!!

roshodgekiss roshodgekiss, 3 years ago

Hi again Graycode - you're in luck. We've got a chapter in our Responsive Email Guide that covers swapping one image for another on mobile screens, simply by hiding the 'desktop' image and making a background image appear in its place. Here's the skinny on this. We used this technique successfully in our last monthly newsletter.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Graycode, 3 years ago
roshodgekiss :

Hi again Graycode - you're in luck. We've got a chapter in our Responsive Email Guide that covers swapping one image for another on mobile screens, simply by hiding the 'desktop' image and making a background image appear in its place. Here's the skinny on this. We used this technique successfully in our last monthly newsletter.

Hi again! :)

I tried both examples yesterday but today it worked brilliantly!! So happy, as I was told by others that in order to change the image it could only be done via javascript and I knew others like Waitrose had done it so well. However, they combine a fluid site and changing the image. How can I also do that?

Before contacting you yesterday I already had my main image resizing fluidly but I'd like to use another image altogether for the mobile version. Is it either or?  Any work arounds for this?

Thanks!

roshodgekiss roshodgekiss, 3 years ago

Hi there Graycode, from what I understand, you can pull this off using a % width. For example, based on the example in the guide:

img.fluidwidth { max-width: 100%; height: auto; } /* add this */

CSS @media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-325.png);
        width: 325px !important;
        height: 115px !important;
    }
    td[class="headercell"] img { 
        display: none; 
    }
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="headercell">
        <img src="images/header.png" border="0" class="fluidwidth" /> <!-- Note fluidwidth class -->
    </td>
   </tr>
</table>

In theory the image will resize to the width of the surrounding table cell, but not exceed its original dimensions. Then when the media query is triggered, the image will be swapped for the 'mobile' background image.

Thanks Graycode - I hope this is the answer you're looking for :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Dave Immerz, 3 years ago

Hi Ros,

Do you know if this technique works with templates generated from your template builder?

I can get the example (‘Optimizing images for mobile’) working fine but it doesn't seem to play nice with a generated template and I'm guessing the media query classes are to blame e.g. table[class=w640], td[class=w640].

Any ideas how I can overcome this?

Thanks
Dave

roshodgekiss roshodgekiss, 3 years ago

Hi Dave, you'll need to edit the template builder code considerably to get fluid images to work. In all likelihood, you

Instead of using the fixed widths in our media query, you will likely have to use something like:

table[class=w640], td[class=w640] { width: 80% !important; }
img[class="w640"] { width: 100% !important; height: auto !important; }

Personally, I think your best bet is to build your media query from scratch when going fluid, as the styles we've provided are positively fixed width (for simplicity). Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098