Cross-email-client compatible background image helper
If you’ve ever dealt with HTML email before, you know that it’s a really big pain in the behind. Email clients differ widely in their HTML and CSS support, so it’s almost impossible to create compatible HTML layouts without the use of tables and other archaic front-end techniques.
One of the most fundamental things you may want to do in an HTML email is add a background image to some element. While this task is easy in most web browsers, it’s not so with email clients. I stumbled across an article on Campaign Monitor that outlined a method for adding background images that is compatible with many (still not all) modern email clients.
Needing to use this method fairly often, I thought I’d turn it into a Rails view helper. This is what I came up with:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | def td_with_background_image(url, width, height, *arguments, &block) options = arguments.extract_options! content_tag :td, {:background => url}.merge(options) do %( <!—[if gte mso 9]> <v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImage” style=’behavior: url(#default#VML); display:inline-block; position:absolute; height:#{height}px; width:#{width}px; top:0; left:0; border:0; z-index:1;’ src=”#{url}”/> <v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theText” style=’behavior: url(#default#VML); display:inline-block; position:absolute; height:#{height}px; width:#{width}px; top:-5; left:-10; border:0; z-index:2;’> <![endif]—> #{capture(&block)} <!—[if gte mso 9]> </v:shape> <![endif]—> ) end end |
It’s not perfect, but it does the trick for me.
Posted via email from Adam Singer | Comment »
