Skip to main content
Solved

Inline CSS Styling of Images in Notification Emails

  • May 20, 2020
  • 0 replies
  • 157 views
I have a rich text field that uses the below code to display an image from the web if a url is entered in the imageURL field, otherwise it will display the image using the url in the backupimage field. The code uses inline CSS to re-size the image, and works well within Quick Base.

If I click to email the record, the preview it displays looks correct (centered and resized), but when the record is emailed or the record is emailed via notification, the images are centered as expected, but not resized, and show up full-size in the email. It seems to ignore the width style in both the default and custom email notification types, but interprets the rest of the HTML correctly. Is there something wrong with my code here that affects only emails, or is there a better way to accomplish this? (I'd like to avoid downloading the image, resizing it, and re-uploading it). Thanks for any ideas!

var text backupimage = "<center><a href='"&[originalLink]&"' target='_blank'><img src='"&[backupimage]&"' width='150px'></a></center>";
var text storyimage ="<center><a href='"&[originalLink]&"' target='_blank'><img src='"&[imageURL]&"' width='150px'></a></center>";

If([imageURL]="",$backupimage,$storyimage)

------------------------------
Steve
------------------------------

Best answer by SteveDavidson

As an update to this, removing the 'px' from the width specification seemed to work, and the images are properly re-sized in HTML email notifications now in Outlook and Gmail. Here's the working code in case anyone stumbles upon this post in the future:

var text backupimage = [backupimage];
var text storyimage ="<center><a href='"&[originalLink]&"' target='_blank'><img width='150' src='"&[imageURL]&"'></a></center>";

If([imageURL]="",$backupimage,$storyimage)

The [backupimage] field is also a formula rich-text field with a similar <img> tag, but with a hard-coded image URL.

Thanks again Sam!

------------------------------
Steve Steve
------------------------------
This topic has been closed for replies.

  • SamJones1
  • Registered
  • May 21, 2020
Steve,
What email client are you using? HTML display in Email Clients is extremely variable, so the solution someone suggests for Gmail may not work for Outlook.com or Apple Mail.

------------------------------
- Sam

______________________________________________
Sam Jones
Vice President, Product and Technology
he/him

The Data Collaborative, Inc.
sjones@datacollaborative.com
366 Massachusetts Ave, Suite 203 | Arlington, MA 02474
------------------------------
- Sam ______________________________________________ Sam Jones Vice President, Product and Technology he/him The Data Collaborative, Inc. sjones@datacollaborative.com 366 Massachusetts Ave, Suite 203 | Arlington, MA 02474
Terms & ConditionsAccessibility statement