how to show an image in gmail inbox preview

Question

I have been receiving promotional emails with an image along with the subject line. i have seen this only in Gmail. Not emojis, but image preview right below the subject line portion in the inbox preview The emails are much more catchy with this. I have been checking google for a while to see what this feature is called but could not find any clue on the same. Any information on this is Greatly appreciated.

Answer 1

Add a Event onmouseover=FuntionName() to each GridView row, and show the popup which will include the message. But get it from client side

Answer 2

enter image description here

This is the image of gmail inbox preview for product listing.

Answer 3

Gmail Promotion Annotation Since 2018 you can, indeed, add images with a preview in Gmail by using JSON-LD markup in the email's head. Gmail Promotions Tabs can have/show:

• Logo
• Image
• Subject
• Deal Badges with Dates Frames
• Discount Code within a Badge Design

The customization is quite strict, as of now, but the google guidelines are commented in the code snippet below:

<script type="application/ld+json">
 [{
   "@context": "http://schema.org/",
   "@type": "Organization",

   // WARNING: Before sending email, either point the logo
   // at your own image or delete the logo annotation.
   //
   // If showing a logo, we recommend using an https URL.
   // It's not a requirement today, but may be in the future.
   "logo": "https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png"
  },{
   "@context": "http://schema.org/",
   "@type": "EmailMessage",

   // Use this optional alternative subject line to avoid duplicate text
   // between the subject, deal badge, and discount code.
   "subjectLine": "[Important] Please add subject line in annotation"
  },{
   "@context": "http://schema.org/",
   "@type": "DiscountOffer",

   // Describe your discount, this will be shown as a badge (eg "25% off" or "free 
      shipping")
   "description": "20% off",

   "discountCode": "PROMO",
   "availabilityStarts": "2019-07-21T03:42:38-07:00",
   "availabilityEnds": "2019-07-24T03:42:38-07:00"
  },{
   // Promotion card with single image.
   // We recommend using an https URL.  It's not a requirement today, but may be in 
       the future.
   // Any image size will work and will just be cropped automatically.
   // GIF & WEBP images are not supported and will be filtered out.
   // Sample image is 538x138, 3.9 aspect ratio
    "@context": "http://schema.org/",
    "@type": "PromotionCard",
    "image": "https://www.google.com/gmail-for-marketers/promo-tab/markup- 
     tool/sample.png"
 }]
</script>

Resources for this answer can be found in Google Developers Documentation: Promotion Tab Documentation