Applying roundness to images in SendGrid emails

Need help Plugins
1

Hi folks,

I’m using SendGrid to email a daily digest of notifications to users. I would like to show a circular image of the user in the top-right corner of the email, like this:

Screenshot 2022-08-26 at 12.26.16
Screenshot 2022-08-26 at 12.26.161022×200 22 KB

I am using a substitution tag to pull a dynamic image from my Bubble database, and that works fine. What I’ve so far been unable to do is apply roundness to the image and make it show as a circle rather than a square. Bubble obviously cannot advise on this by email, as it’s outside of their support scope, but they did direct me to this article.

I wasn’t sure where to put the CSS, but found this page in SendGrid’s documentation saying that I can add it in Build > Advanced > Edit HTML Head. I would have thought that would affect the roundness of EVERY image in the email unless I could add some code to specifically confine the styling to my profile image substitution tag, and I don’t know what that might look like. Nevertheless, I tried dropping the CSS there. Sadly, it did nothing.

Does anyone know what I should do?

2

Hi, there @robin.wyatt.

I wanted to share my solution regarding the issue you’ve described. It’s late, but it may help others that are in a similar boat as well.

By referring to your linked documentations - what I did was:

Circular Images
Circular Images1830×505 33.9 KB

In case the image doesn’t load - the steps were:

  1. Open relevant E-mail template, head over to “Advanced”
  2. Edit HTML Head
  3. Between the “head” tag, include:
<style>
    .max-width {
      border-radius: 50%;
    }
</style>

Where “.max-width” is replaced by your own image class

  1. Click “Update”

My related post is here, if you’d like to see the result of the images:

1 Like