Hello @Doubleo,

Great question!

Some things to keep in mind is that image mapping is not supported on all devices or email clients and that it is not responsive. This means you’ll need to use an image size that is exactly the same width as your email on desktop and use an entirely separate image size for mobile. For this reason your map coordinates may not align accurately on mobile based on the various screen sizes for the many mobile devices your recipients can be viewing the email on. 

If you wish to attempt to work around this though, I would suggest separating out a Desktop and Mobile only copy within the same email template to better organize and optimize your email to be as seamless as possible. In addition, Email on Acid actually has a great blog titled Image Map Support in HTML Email on some of the pros and cons of using imaging mapping that also explains the behavior you are experiencing on mobile.

I hope this helps!

David

Hi @david.to. Thanks for the response.

I understand that there are limitations with image maps. May I ask then; what is Klaviyo’s recommended method for adding multiple links in image based emails? Should we be using the outdated approach of sliced images in tables? 

I tried using absolute-positioned, percentage based a tags (see below), which work great, and responsive. However no luck in Gmail; for some reason it doesn’t like the code. Any suggestions?

<style>
  .fakemap {position:relative;}
  .link1 {border: 1px solid red; height: 45%; width: 50%; position: absolute; left: 0%; top: 0%;}
  .link2 {border: 1px solid red; height: 45%; width: 50%; position: absolute; left: 50%; top: 0%;}
  .link3 {border: 1px solid red; height: 55%; width: 100%; position: absolute; left: 0%; top: 45%;}
  </style>
<div class="fakemap"><img src="http://image.path.here" alt="Image alt text" width="564" /> <a class="link1" title="Link1" href="https://en.wikipedia.org/wiki/Jupiter"> </a> <a class="link2" title="Link 2" href="https://en.wikipedia.org/wiki/Saturn"> </a> <a class="link3" title="Link 3" href="https://en.wikipedia.org/wiki/Neptune"> </a></div>

Also, how come Klaviyo’s editor doesn’t come with an actual HTML block? Seems really limited to use the WYSIWIG editor for HTML.

Thanks again,

-oo

Hey @Doubleo,

To mimic image mapping to be consistent across all devices, we do recommend using the traditional method of slicing images and using them within a table block each identifying different URL links. 

In addition, when you embed custom code within a Klaviyo block, the client typically doesn’t load it correctly because its in a text block. This leads the client to think it should be loaded as text. Because this is custom code, to alleviate this, we recommend fully custom coding the template to allow the client to better understand the content. 

I’ll certainly be sharing your thoughts and suggestion pertaining to an option for an HTML block for use within our template editor. 

David

Thanks @david.to. We’ll keep using tables then. And yes, an HTML block would be incredibly helpful!

-oi