Expand my Community achievements bar.

Announcing the launch of new sub-community for Campaign Web UI to cater specifically to the needs of Campaign Web UI users!
SOLVED

Dynamic image - Adobe Campaign classic emailer issue

Avatar

Level 1

<tr><td class="w100p_m hauto_m show_m bg-mob-image" align="center" valign="top" aria-hidden="true" height="329px" background="https://bmw-eu-apac-mkt-prod1-m.adobe-campaign.com/res/img/2F955E062A5EBD0BD8F4C8F2A0C0372F.jpg" style="background-image: url('https://bmw-eu-apac-mkt-prod1-m.adobe-campaign.com/res/img/2F955E062A5EBD0BD8F4C8F2A0C0372F.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; font-size:2px; line-height:2px; mso-hide: all; "><img src="<%= targetData.optionsCode %>" class="w100p_m hauto_m show_m" width="100%" height="100%" border="0" style="display:none; visibility:hidden; mso-hide: all;" alt=""></td></tr>

Hi above is the my code used in emailer. img src="<%= targetData.optionsCode %>" this is not working properly. I got this code from ACC tester & image not seen. I don't know what the issue 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @shashikala 

 

This code will not work for Outlook. For Outlook specifically, you will have to use VML (Vector Markup Language).

 

Along with this code, you will have to use VML code to render background images in Outlook.

 

It will look something like this:

  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="<%= targetData.optionsCode %>" />
  </v:background>
  <![endif]-->

 

I would suggest reaching out to the person who built this HTML and asking them to add VML support for Outlook clients.


     Manoj
     Find me on LinkedIn

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @shashikala ,

 

When tested the same code for me its working fine in Outlook and gmail for Image loading, the width and height needs to be adjusted for gmail and Outlook for proper rendering.

 

Also , please use alt text inside html so that if the Image don't get loaded, it will show the text value given in this Tag.

PFA the code added with alt text

 

<tr><td class="w100p_m hauto_m show_m bg-mob-image" align="center" valign="top" aria-hidden="true" background="https://bmw-eu-apac-mkt-prod1-m.adobe-campaign.com/res/img/2F955E062A5EBD0BD8F4C8F2A0C0372F.jpg" alt="Test Image12"  height="329px" style="background-image: url('https://bmw-eu-apac-mkt-prod1-m.adobe-campaign.com/res/img/2F955E062A5EBD0BD8F4C8F2A0C0372F.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; font-size:2px; line-height:2px; mso-hide: all; "><img src="<%= targetData.optionsCode %>" class="w100p_m hauto_m show_m" width="100%" height="100%" border="0" style="display:none; visibility:hidden; mso-hide: all;" alt="Test Image"></td></tr>

 

Also, Please set the data for optionsCode in the workflow for this variable to work inside html as shown below

 

LakshmiPravallika_0-1695390324310.png

 

Here the Image loading works fine, but the width and height needs to be adjusted as per requirements in the HTML Code.

 

Regards,

Pravallika.

 

Avatar

Level 1

Thank you for the reply.
Actually there are 2 images. one is background & another one is car image called in cozy code. But that code not working. When its done testing on ACC then Outlook will not show background image & that cozy code car image. Please let me know if you have any solution on this.

Avatar

Community Advisor

Hi @shashikala ,

In your workflow, Right click the inbound transition of 'Delivery' activity > Display the target.

ParthaSarathy_2-1695391005621.png

Check whether you have @optionsCode in temporary table (Top-Right you can see 'Schema' tab)

ParthaSarathy_1-1695390800007.png

Copy the URL from 'Data' tab, and paste the URL in your browser, and verify the image URL render properly.

ParthaSarathy_0-1695390704135.png

Avatar

Correct answer by
Community Advisor

Hello @shashikala 

 

This code will not work for Outlook. For Outlook specifically, you will have to use VML (Vector Markup Language).

 

Along with this code, you will have to use VML code to render background images in Outlook.

 

It will look something like this:

  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="<%= targetData.optionsCode %>" />
  </v:background>
  <![endif]-->

 

I would suggest reaching out to the person who built this HTML and asking them to add VML support for Outlook clients.


     Manoj
     Find me on LinkedIn