How to add image as preview / pre-header in HTML OR can we code that it Adobe campaign classic? | Adobe Higher Education
Skip to main content
S
sphawde
March 30, 2023
Beantwortet

How to add image as preview / pre-header in HTML OR can we code that it Adobe campaign classic?

  • March 30, 2023
  • 3 Antworten
  • 2564 Ansichten

I want to show a image instead of preview text (section below the email subject) when the email reaches to the inbox. Please suggest some valuable solutions to accomplish this.

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von abhinav99

Hi @sphawde ,

You can replace the preview text with your image source.

It should work this way.

Refer to this code:-

<!-- Visually Hidden Preheader Text: BEGIN --> <div aria-hidden="true" style="text-align:center;OVERFLOW: hidden; MAX-HEIGHT: 0px; mso-hide: all;"> <br><img src="yourimage.png" style="width: 300px;" data-status="true" </div> <!-- Visually Hidden Preheader Text: END -->

3 Antworten

abhinav99
abhinav99Antwort
Level 4
March 31, 2023

Hi @sphawde ,

You can replace the preview text with your image source.

It should work this way.

Refer to this code:-

<!-- Visually Hidden Preheader Text: BEGIN --> <div aria-hidden="true" style="text-align:center;OVERFLOW: hidden; MAX-HEIGHT: 0px; mso-hide: all;"> <br><img src="yourimage.png" style="width: 300px;" data-status="true" </div> <!-- Visually Hidden Preheader Text: END -->
Marcel_Szimonisz
Community Advisor
Marcel_SzimoniszCommunity Advisor
Community Advisor
April 1, 2023

Hello @sphawde,
I am not aware that image can be used in preheader for email. The definition of preheader is:

 

An email preheader is the short summary text that appears next to or below the subject line of an email in most email clients. It provides additional context and information about the email content and helps the recipient decide whether to open the email or not.

Since the preheader text is typically displayed in plain text format, it's not possible to include images in the preheader. However, you can use HTML tags such as bold, italic, and links to format and enhance the preheader text.


 

And for that you can use the bullet proof preheader from litmus article
https://www.litmus.com/blog/the-little-known-preview-text-hack-you-may-want-to-use-in-every-email/

<div style="display: none; max-height: 0px; overflow: hidden;"> Insert hidden preheader text here. </div> <!-- Insert &#847;&zwnj;&nbsp; hack after hidden preview text --> <div style="display: none; max-height: 0px; overflow: hidden;"> &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; &#847; &zwnj; &nbsp; &#8199; &#65279; </div>



Marcel

    Sukrity_Wadhwa
    Community Manager
    Sukrity_WadhwaCommunity Manager
    Community Manager
    April 13, 2023

    Hi @sphawde,

    Were you able to resolve this query with the help of the given solutions or do you still need more help here? Do let us know. In case the given solutions were helpful, then kindly choose the one that helped you the most as the 'Correct Reply'.
    Thanks!

    Sukrity Wadhwa
    Allgemeine NutzungsbedingungenAccessibility statement

    Loading footer...