Discussions

Expand all | Collapse all

Inline CSS Styling of Images in Notification Emails

Jump to Best Answer
  • 1.  Inline CSS Styling of Images in Notification Emails

    Posted 10 days ago
    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
    ------------------------------


  • 2.  RE: Inline CSS Styling of Images in Notification Emails

    Posted 9 days 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
    ------------------------------



  • 3.  RE: Inline CSS Styling of Images in Notification Emails

    Posted 9 days 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
    ------------------------------



  • 4.  RE: Inline CSS Styling of Images in Notification Emails

    Posted 8 days 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
    ------------------------------



  • 5.  RE: Inline CSS Styling of Images in Notification Emails

    Posted 4 days ago
    Thanks for the help, Sam,

    I'll do some googling and asking some people around the office, but I appreciate the offer!

    I'll likely just end up deciding to host the images on our server or in a QB uploads table to avoid any potential hotlinking issues so will just resize the images manually for now.

    Thanks again!

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



  • 6.  RE: Inline CSS Styling of Images in Notification Emails
    Best Answer

    Posted 4 days 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
    ------------------------------