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">
                <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>

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?

  • Can you explain? At what upload dialog are you looking? Is this related to SFDC? – Dean M. Nov 7 '18 at 22:34
  • No. This is a SFMC issue. When creating an email I'm able to change images by double click in the email editor. But this only works for the desktop image, The mobile image has to be updated by changing the image url in the html code. But this I want to avoid. – Oliver Nov 8 '18 at 9:56

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"
  • Point 1 does not work, point 2 could make it a bit easier. Thanks! – Oliver Nov 9 '18 at 10:56

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.