SteveDavidson
5 years agoQrew Cadet
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!
------------------------------
Steve
------------------------------
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
------------------------------
- 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
------------------------------