Forum Discussion

SteveDavidson's avatar
SteveDavidson
Qrew Cadet
4 years ago
Solved

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...
NotificationsEmail
  • SteveDavidson's avatar
    SteveDavidson
    4 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's avatar
SamJones1
Qrew Cadet
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's avatar
SteveDavidson
Qrew Cadet
4 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's avatar
    SamJones1
    Qrew Cadet
    4 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
    ------------------------------
    • SteveDavidson's avatar
      SteveDavidson
      Qrew Cadet
      4 years 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
      ------------------------------
      • SteveDavidson's avatar
        SteveDavidson
        Qrew Cadet
        4 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
        ------------------------------