Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
image swapping in responsive email design

aj2012

Newbie
Total Posts:  5
Posted: 08 March 2013 05:25 PM

Is there a way to swap images when using the responsive email design technique? So “Image A” appears in the desktop view, but for mobile it gets swapped with another image (“Image B”)?

Would my CSS in the @media section look like this:

img[class=“swap”] {
background-image: (ImageB.gif) !important;
}

And would the html look like this:
<img src=“ImageA.gif” width=“400” height=“200” border=“0” style=“display; block” class=“swap” />

Thanks in advance!


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 21 March 2013 04:39 PM
[ # 1 ]

aj2012,
I created a test for this with the code you recommended. I didn’t use the background property, because it has limited support. This simple code will let you switch images using media queries. It won’t work anywhere media queries won’t work, though, such as gmail.

<html>
<
head>
<
style type="text/css">
@
media screen and (min-width0px) and (max-width480px{
  img[class
="swap"] {
content
:url("http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg") !important;}
  } 
</style>
</
head>
<
body>
    <
img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg" width="500" height="500" border="0" class="swap" />
</
body>
</
html

 

lkfranklin

Newbie
Total Posts:  3
Posted: 09 August 2013 11:17 AM
[ # 2 ]

Thanks for supplying the code Geoff, however I can’t seem to get that to work? Can you confirm it is working on your end?

Cheers,
LK


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 August 2013 02:20 PM
[ # 3 ]

@lkfranklin,
Yes, I can confirm that it’s working. I pasted it into our testing service and the iPhone shows a different image. Have you looked at our blog on this: http://www.emailonacid.com/blog/details/C13/a_slick_new_image_swapping_technique_for_responsive_emails

Hope that helps.


 

lkfranklin

Newbie
Total Posts:  3
Posted: 09 August 2013 02:23 PM
[ # 4 ]

Hi Geoff,

Thanks for the reply. I did actually just read your new article about that ^ and yeah it is working sorry. I thought it would resize once I resized my browser window but since signing up for the services on emailonacid I can see it does detect it. On a side note is there any way to get it to resize when the browser is resized at all ?

Thanks again,
LK


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 09 August 2013 02:58 PM
[ # 5 ]

@LK,
The code above should work when resizing a browser window. I just confirmed this with chrome. This is based on window width, not height. “min-width” should respond to browser width, whereas “min-device-width” should not.


 

lkfranklin

Newbie
Total Posts:  3
Posted: 09 August 2013 03:06 PM
[ # 6 ]

Sorry think I’m getting confused.

The code in the original post ^ does work and resize in Chrome (but not FF latest version). I’ve now updated my code to use your new technique as discussed in the article you linked ^.

I was just wondering if there is a way to get this to respond/behave when the browser window is resized as this doesn’t seem to work at the moment in Chrome or FF?

Any help would be great.

Cheers,
LK


 

johnball

Newbie
Total Posts:  1
Posted: 19 September 2013 05:14 PM
[ # 7 ]

@lkfranklin,
Make sure your media query is set to ‘max-width’ and not ‘max-device-width’. This should allow you to resize your browser and emulate a mobile version of the email.


 

macretive

Newbie
Total Posts:  2
Posted: 27 March 2015 01:04 PM
[ # 8 ]

I’ve used this code in an email recently:

img[class=“swap”] {
content:url(“http://myserver.com/clientfolder/logo-group-black-mobile.png”) !important;
  width: 240px;
  height: auto;
  float: middle; !important;
  padding:0 0px 0 0px!important;} 

However, the company hosting/sending the emails requested that I use the images with a local path, like:

img[class=“swap”] {
content:url(“logo-group-black-mobile.png”) !important;
  width: 240px;
  height: auto;
  float: middle; !important;
  padding:0 0px 0 0px!important;} 

Do I need to remove the “url” after “content:”, since there’s no absolute path anymore?


 

xjohnballx

Newbie
Total Posts:  4
Posted: 27 March 2015 04:02 PM
[ # 9 ]
macretive - 27 March 2015 01:04 PM

I’ve used this code in an email recently:

img[class=“swap”] {
content:url(“http://myserver.com/clientfolder/logo-group-black-mobile.png”) !important;
  width: 240px;
  height: auto;
  float: middle; !important;
  padding:0 0px 0 0px!important;} 

However, the company hosting/sending the emails requested that I use the images with a local path, like:

img[class=“swap”] {
content:url(“logo-group-black-mobile.png”) !important;
  width: 240px;
  height: auto;
  float: middle; !important;
  padding:0 0px 0 0px!important;} 

Do I need to remove the “url” after “content:”, since there’s no absolute path anymore?

You need to leave the URL part in there. I wonder why they want you to use local images. That doesn’t make any sense to me.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 27 March 2015 04:12 PM
[ # 10 ]
macretive - 27 March 2015 01:04 PM

However, the company hosting/sending the emails requested that I use the images with a local path

If you use images with a local path, they will not show up for any of the recipients (because they do not have the image locally). You may want to explain this to the company.


 

macretive

Newbie
Total Posts:  2
Posted: 27 March 2015 06:01 PM
[ # 11 ]

That’s what I was thinking too… Maybe they will be changing the path to be relative to their server? I’ll check into that.

More importantly though (ignoring the issue with the paths), my original question about leaving the “url” in there stems from the issue of the images in question don’t show up on mobile devices. Am I missing some code that will make the “Swap” function work correctly?

Here’s the HTML that goes along with it:

<td align=“center”  width=“100%” valign=“middle” height=“30” style=” background-color:#ffffff” class=“devicewidthinner” >logo-group-black.png</td>
       
(The class “devicewidthinner” is just forcing the table to be a certain width on mobile devices.)