Email Template Help - Mobile Image in Head

Forum|Forum|6 years ago
February 8, 2020
2 replies
4440 views

Hi!

I got an email template from our dev team and am trying to convert it to 2.0. I'm not sure how to handle this particular variable. There's a mobile version of the background image in the head while the desktop background image is in the body. Any ideas on how to go about doing this?

<head>
<style>
@media only screen and (max-width: 599px) {
.story1_mobile_background {background-image:url(/images/story1_mobile.jpg) !important; }
		}
</style> 
</head>
<body>
<!-- Hero Module Without CTA --> 
<table class="container_module" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> 
                      <tbody> 
                        <tr> 
                          <td class="story1_mobile_background" align="center" valign="top" width="100%" background="/images/story1_desktop.jpg" style=" background-image:url(/images/story1_desktop.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> 
                            <div style="visibility:hidden; display:none; color:transparent; height: 1px;"> 
                              <img src="images/spacer.gif" alt="" height="1"> 
                            </div> 
                            <!--[if gte mso 9]>
									<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:171px;">
									<v:fill type="frame" src="/images/story1_desktop.jpg" />
									<v:textbox inset="10,10,10,10" v-text-anchor="top">
									<![endif]--> 
                            <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> 
                              <tbody> 
                                <tr> 
                                  <td class="padding_top_60 padding_right_100 padding_bottom_60 padding_left_23 text_26" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 290px 30px 40px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; -webkit-text-size-adjust:none;"><span class="text_26" style="margin:0; font-family:Arial, Helvetica, sans-serif; 
font-size:35px; line-height: 37px; color:#ffffff;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></span></td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table> 
<!-- End of Hero Module Without CTA --> 
 </body>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

Level 10

Well, the images have different values so they can't be a single variable in this case.

Dave_Roberts

Level 10

The paths are different here, but maybe it'd be possible to adhere to a strict naming convention and use something like a token or string variable to change the image path for both of the images using a single variable.

For example,

story1_desktop.jpg and story1_mobile.jpg

could be written with variables as:

${Img-URL}_desktop.jpg and ${Img-URL}_mobile.jpg
and the value of the string variable would be "story1".

As a string variable it might look like:

<meta class="mktoString" id="IMG-URL" mktoname="Image URL" default="story1" mktoModuleScope="true"/>

and in your code it'd look something like:

<head>
<style>
@media only screen and (max-width: 599px) {
.story1_mobile_background {background-image:url(/images/${IMG-URL}_mobile.jpg) !important; }
		}
</style> 
</head>
<body>
<!-- Hero Module Without CTA --> 
<table class="container_module" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> 
                      <tbody> 
                        <tr> 
                          <td class="story1_mobile_background" align="center" valign="top" width="100%" background="/images/${IMG-URL}_desktop.jpg" style=" background-image:url(/images/${IMG-URL}_desktop.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> 
                            <div style="visibility:hidden; display:none; color:transparent; height: 1px;"> 
                              <img src="images/spacer.gif" alt="" height="1"> 
                            </div> 
                            <!--[if gte mso 9]>
									<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:171px;">
									<v:fill type="frame" src="/images/${IMG-URL}_desktop.jpg" />
									<v:textbox inset="10,10,10,10" v-text-anchor="top">
									<![endif]--> 
                            <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> 
                              <tbody> 
                                <tr> 
                                  <td class="padding_top_60 padding_right_100 padding_bottom_60 padding_left_23 text_26" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 290px 30px 40px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; -webkit-text-size-adjust:none;"><span class="text_26" style="margin:0; font-family:Arial, Helvetica, sans-serif; 
font-size:35px; line-height: 37px; color:#ffffff;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></span></td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table> 
<!-- End of Hero Module Without CTA --> 
 </body>

You'd need to make sure the first parts of your image's path were exactly the same and the last parts were always "_mobile.jpg" and "_desktop.jpg". I might even think about changing this to a ".png" instead of ".jpg" if you go this route to allow for the use of transparent images when necessary.

This might also work with tokens, but I've only tested something like this quickly to confirm that the image would render in the preview panel using this method. I didn't send a test email, so you'd want to make sure everything is coming thru as expected, but this might help to accomplish what you're after here.

Let me know how it goes if you do give it a try.

SanfordWhiteman

Level 10

Thought about suggesting the naming convention, but it'd be really fragile to keep up.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded