Inline CSS Styling of Images in Notification Emails

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

NotificationsEmail

SteveDavidson
5 years ago
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
------------------------------

SamJones1
Qrew Cadet
5 years ago
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
------------------------------
- SteveDavidson
  Qrew Cadet
  5 years ago
  Hi Sam,
  
  I primarily use outlook, which is where I first noticed the issue. I forwarded the notification email to my gmail, and the images still seemed to be ignoring the width styling, even though the center and link tags still worked.
  
  You raise a good point about different email clients. This app is for generating newsletters by just copy/pasting links to the article and image, and since it will be sent to people likely using all sorts of different email clients (and also the issue of hotlinking images, which probably isn't the best way to go about it), perhaps the best solution after all will in fact be to download and re-upload the image (and resize it at the same time) so it is hosted in a place we control.
  
  It would still be nice to get to the bottom of this though if possible, for future reference when including images in email notifications in other apps.
  
  ------------------------------
  Steve Steve
  ------------------------------
  - SamJones1
    Qrew Cadet
    5 years ago
    Steve,
    I suspect that you'll get to the bottom of this looking for how folks style images in emails regardless of Quick Base. I suspect this forum isn't going to get you to your answer, as you've got the QB part working just fine.
    
    I work with some great programmers who could definitely take a whack at this, if you're interested.
    
    ------------------------------
    - 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
    ------------------------------

Forum Discussion

Inline CSS Styling of Images in Notification Emails