Maintaining mobile images in responsive email templates

Question

In a 2 column content block the customer uses desktop and mobile images (see code)

<table bgcolor="#FAF7F0" border="0" cellpadding="0" cellspacing="0" class="content" role="presentation" width="567">
            <tr>
                <td class="mobile100" valign="top" width="277">

                    <!-- COMPONENT E1 Image Element INSTANCE -->
                     <a href="#"><img alt="alt" border="0" class="hidemobile" src="https://image.com/ccc.jpg" style="display:block;margin:0 auto;"></a>


                    <div class="mobile100 onlymobile" style="display:none;mso-hide:all;max-height:0;overflow:hidden;">


                        <a href="#"><img alt="alt" border="0" class="mobile100" src="hhttps://image.com/ccc-mobiel.jpg"></a>
                    </div>

Currently the mobile image must be updated in the code directly. The desktop image can be updated via upload dialog.

Question: What is the best solution for maintaining mobile images without having to interfere with the code? Is there a way to maintain both images via the upload dialog?

Answer 1

It's not really a SFMC issue, but it's how your CSS works for handling the mobile responsive aspects of your email/template.

The email/template is using CSS to determine the screen size (resolution) and subsequently showing the Large (desktop) or small (mobile) image.

As you are editing the email on a desktop, it's screen responsiveness displays to you the desktop version to which you can double-click and open the SFMC WYSIWYG editor.

There's little other way to switch between these but i know of a couple of hacks (though not ideal)

1) You shrink your browser view to a lower size, forcing the CSS to action the mobile view. You will then see the image that is in the html code for mobile and you could try and then using the WYSIWYG editor (not a great experience)

2) you script and set your images as variables, keeping the Ampscript at the top of the email. Then when you want to edit the images in mobile and desktop views, you modify the Ampscript variables e.g.

%%[
  set @hero_img_desktop = "blah.jpg"
  Set @hero_img_mobile = "blah_mobile.jpg"
]%%

Answer 2

Although @iManage does provide a solution to remove them from the actual HTML, they still will need to go into the code editing section to make edits. This could still lead to potential issues when handing responsibility of maintenance to those unfamiliar with AMPScript.

To remove that risk completely, what you could instead do is:

1. Put your URLS of the images into a nonsendable DE (e.g. ImageName | ImageURL)

2. Then use AMPscript to lookup and define a var to contain this URL. e.g.

   %%[ SET @yourImage = Lookup('yourImgDE', 'ImageURL', 'ImageName', 'myImage') ]%%
   
   

3. Then when you declare your images you use
   <img src="%%=v(@yourImg)=%% />.

This way any image changes can be made inside the DE instead of touching the code at all.